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 () => {
// 清理操作
};
}, [依赖项数组]);