当前位置: 首页 > news >正文

深入React Hoooks:从基础到自定义 Hooks

使用 useContext

useContext 是另一个常用的 Hook,它可让我们在函数组件中轻松访问 React 的 context。如果你的应用程序依赖于一些全局状态,或者你希望避免将 props 一层一层地传递到子组件,context 很有用。你可以在父组件设置一个值,然后在任何子组件中直接读取到它。

创建一个 context 对象很简单,使用 React.createContext() 并在需要访问它的组件中使用 useContext 即可。

import React, { useContext } from 'react';// Create a context with a default value
const ThemeContext = React.createContext('light');function Display() {// Use the context value (the closest provider up the tree)const theme = useContext(ThemeContext);return <div>{theme}</div>;
}// This Component sets the value and includes Display as a child
function App() {return (<ThemeContext.Provider value='dark'><Display /></ThemeContext.Provider>);
}export default App;

在这个例子中,我们在 App 组件中定义了 context 的值为 'dark',然后在 Display 组件中直接读取到 'dark'。

自定义 Hooks

自定义 Hook 是一种复用代码的有效方式,能让我们将组件逻辑提取到可重用的函数中。自定义 Hook 是一个以 “use” 开头的函数,这个函数可以调用其他的 Hook。

比如,我们可以创建一个自定义 Hook 来处理表单的输入:

import { useState } from 'react';function useInput(initialValue) {const [value, setValue] = useState(initialValue);function handleChange(e) {setValue(e.target.value);}return [value, handleChange];
}

我们的 useInput 同时返回了当前的值和一个处理改变的函数,其可以直接在表单输入中使用。例如:

function Signup() {const [name, handleName] = useInput('');const [email, handleEmail] = useInput('');const handleSubmit = (e) => {e.preventDefault();console.log(name, email);}return (<form onSubmit={handleSubmit}><input type="text" value={name} onChange={handleName} placeholder="Name" /><input type="text" value={email} onChange={handleEmail} placeholder="Email" /><button type="submit">Submit</button></form>);
}export default Signup;

我们的 Signup 组件使用 useInput 自定义 Hook 来处理 name 和 email 字段。提交表单时将打印出这两个字段的值。

总的来说,React Hooks 引入了一种优雅的方式来管理状态和副作用,既可以简化代码,又可以增强可读性。除了上述所述的 Hook 外,还有许多其他的 Hook,例如 useReduceruseMemo 和 useRef 等等,每个都具有自己的用途和唯一性。

http://www.lryc.cn/news/361984.html

相关文章:

  • 9.7 Go语言入门(映射 Map)
  • 过期视频怎么恢复?如何从手机、电脑和其他设备中恢复?
  • LeetCode刷题第2题
  • mysql执行拼接的sql语句
  • 使用 pm2 或 screen 等工具来管理和后台运行你的 Node.js 应用
  • leetcode4 寻找两个正序数组的中位数
  • 水库大坝安全监测系统建设方案
  • 单片机的内存映射和重映射
  • 详解和实现数据表格中的行数据合并功能
  • 深度学习-05-反向传播理论知识
  • 黑马程序员——Spring框架——day04——SpringMVC基础
  • SpaceX间接「颠覆」了手机?星链如何直连手机通信?
  • 初识C++ · 模拟实现stack和Queue
  • MFC工控项目实例之一主菜单制作
  • JVMの堆、栈内存存储
  • 二叉树—堆(C语言实现)
  • 儿童有声挂图的芯片AD156—云信通讯
  • AI推介-多模态视觉语言模型VLMs论文速览(arXiv方向):2024.04.25-2024.05.01
  • gdb调试常见指令
  • 二进制安装mysql8.1
  • 前端工程化工具系列(六)—— VS Code(v1.89.1):强大的代码编辑器
  • 重学java 59.Properties属性集集合嵌套集合下总结
  • Kafka系列之高频面试题
  • SIP通话分析
  • 【SVG 生成系列论文(九)】如何通过文本生成 svg logo?IconShop 模型推理代码详解
  • 有哪些兼职软件一天能赚几十元?盘点十个能长期做下去的挣钱软件
  • ubuntu 22.04配置静态ip
  • C++ 使用 nlohmann/json 库
  • 【Java面试】六、Spring框架相关
  • 【GIC400】——PLIC,NVIC 和 GIC 中断对比