React Hook 内置 API 指南非常详细

最新推荐文章于 2024-08-07 08:45:40 发布

侠盗007

最新推荐文章于 2024-08-07 08:45:40 发布

阅读量3.6k

点赞数

分类专栏：技术

本文链接：https://blog.csdn.net/qq_36586702/article/details/84893841

版权

本文详尽地介绍了React Hook的内置API，包括useState、useEffect和useContext的基本用法和注意事项。useState用于管理状态更新，useEffect处理副作用，useContext则用于获取和使用上下文值。文章通过实例解释了每个Hook的功能和最佳实践，是学习React Hook的实用指南。

摘要由CSDN通过智能技术生成

React Hook 内置 API 指南非常详细，不太会用这个编辑器

一、API 列表
二、基本 Hook
1、useState
1、通过 function 更新 state
2、注意：
3、延迟初始化
2、useEffect
1、清理 effect
2、effect 的时间
3、有条件的触发 effect
3、useContext
二、附加 Hook
1、useReducer
1、延迟初始化
2、useCallback
注意:
3、useMemo
注意:
4、useRef
5、useImperativeMethods
6、useLayoutEffect
TIP

功能快捷键

一、API 列表
React 内置的 Hook 如下：

基础 Hook：

useState
useEffect
useContext
其他 Hook：

useReducer
useCallback
useMemo
useRef
useImperativeMehtods
useLayoutEffect
二、基本 Hook
1、useState
const [state, setState] = useState(initialState);
useState 返回一个状态值变量，以及一个更新这个状态的方法。

在初始渲染期间，返回的 state 与作为第一个参数 initialState 传递的值相同。

setState 函数用于更新 state，它接受一个新的状态值，并将组件的 re-render 排入队列中。

setState(newState);
在后面的 re-render 期间，useState 返回的第一个值将始终是应用更新之后的最新 state。

1、通过 function 更新 state
如果使用先前 state 计算新的 state，则可以将一个函数传递个 setState。该函数将接收之前的值，并返回更新的值。下面是一个使用两种形式的 setState 的计数器组件的示例：

function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(0)}>Reset
<button onClick={() => setCount(prevCount => prevCount + 1)}>+
<button onClick={() => setCount(prevCount => prevCount - 1)}>-
</>
);
}
“+” 和 “-” 按钮使用 function 形式，因为更新的值基于先前的值，但 “重置” 按钮使用普通的形式，因为它总是将计数设置回0。

2、注意：
和类组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以通过将函数 updater 表单与对象扩展语法组合来复制此行为：

setState(prevState => {
// 也可以使用 Object.assign
return {…prevState, …updatedValues};
});
另一个选项是使用 useReducer，它更适合管理包含多个子值的 state 对象。

3、延迟初始化