react的hooks相当于在函数组件中注入了一些能力使其拥有和之前class一样的能力甚至更high
stateHook
引入statehook
![](https://img.haomeiwen.com/i22517122/4230f17331f6cc63.png)
定义state和处理函数
![](https://img.haomeiwen.com/i22517122/09d3eac58626e64d.png)
读取state
![](https://img.haomeiwen.com/i22517122/473bde9aef3fe6a8.png)
更新state
![](https://img.haomeiwen.com/i22517122/d510f4b865e0cc55.png)
useEffect(在渲染或销毁后更新回调,多次定义依次调用)
引入useEffect
![](https://img.haomeiwen.com/i22517122/dd2fdbba654ed784.png)
根据写法,react将自动帮我们识别回调时机
![](https://img.haomeiwen.com/i22517122/9564ccdeb1effb11.png)
当某个或多个值在渲染后不希望其更新,则只指定需要react监听的值去跳过其他值的变化回调
![](https://img.haomeiwen.com/i22517122/bad7efd146d46be2.png)
useContext
引入useContext
![](https://img.haomeiwen.com/i22517122/6425a3e1bcd28102.png)
创建context
![](https://img.haomeiwen.com/i22517122/583d7d3edb16c716.png)
向子组件提供context
![](https://img.haomeiwen.com/i22517122/64c9130274fa8ca3.png)
子孙组件使用
![](https://img.haomeiwen.com/i22517122/b8c02d8eba0f6c39.png)
useRef
引入useRef
![](https://img.haomeiwen.com/i22517122/6e0afa2ba03bbfe2.png)
创建ref
![](https://img.haomeiwen.com/i22517122/78b6a78ce6a4079d.png)
注册ref
![](https://img.haomeiwen.com/i22517122/a4938aa708a6fa05.png)
使用ref
![](https://img.haomeiwen.com/i22517122/7d50f676dda9f0f5.png)
网友评论