Skip to content

react的几个hooks详解

react里7个常用hooks:usestate、useeffect、usecontext、usereducer、usecallback、usememo、useref的理解

1、useState

作用:为函数组件添加状态(state),并提供更新状态的方法。
注意:只能在函数组件或自定义 Hook 中调用,状态更新是异步的,

javascript
const [state, setState] = useState(initialState);
// state:当前状态值
// setState:更新状态的函数
// initialState:初始状态值
// setState(prevState => prevState + 1); // 若新状态依赖于旧状态,应使用函数形式。

2、useEffect

相当于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
初次渲染组件执行组件渲染前的相关数据获取(包括API请求)

依赖项传值:1、空数组 [],仅在组件挂载和卸载时执行一次;2、特定值,当这些值发生变化时执行该useEffect;3、不传值,每次渲染后都会执行
返回的函数会在组件卸载时或下次副作用执行前调用

javascript
useEffect(() => {
  // 副作用操作代码
  
  // 可选的清理函数
  return () => {
    // 清理操作
  };
}, [依赖项数组]);

3、useContext

4、useReducer

5、useCallback/useMemo

6、useRef

参考链接

😱 你还不会 React 常用 Hooks?绝对会后悔,别等了!🚀🚀🚀react的几个hooks详解

最后更新于:

Designed & Powerd by liujun