1.为什么要用hooks
- 提高组件的复用简易程度
- 相比较高阶组件和渲染属性没有复杂的层级嵌套
- 不用担心this指向的问题
- 代替类组件中的生命周期,增加代码可读性
2.常用的hook
(一) useState
作用:useState是react自带的一个hook函数,它的作用就是用来声明状态变量。
参数:useState这个函数接收的参数是我们的状态初始值(initial state),它返回了一个数组,这个数组的第[0]项是当前当前的状态值,第[1]项是可以改变状态值的方法函数。
语法:
const [count, setCount] = useState(0);
使用:读取状态 {count} ,更改状态setCount(count + 1 )
(二) useEffect
作用:能够代替componentDidMount,componentDidUpdate和componentWillUnmount这三个生命周期。
- 不带参数:第一次和每次更新都会执行(componentDidUpdate)
useEffect(()=>{ console.log('首次,每次更新'); })
- 带参数:制定参数变化时调用
useEffect(()=>{
console.log('依赖data的变化');
},[data])
- 传入空数组:只运行一次的 effect(仅在组件挂载和卸载时执行componentDidMount)
useEffect(()=>{
console.log('首次进入调用');
},[])
- 返回函数:卸载的时候执行返回函数(componentWillUnmount)
useEffect(()=>{
return ()=>{
console.log('卸载之后');
}
},[])