携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
5.组件的更新过程
函数组件使用useState hook后的执行过程
-
组件第一次渲染
- 从头开始执行该组件中的代码逻辑
- 调用useState(0)，将传入的参数作为状态初始值，即：0
- 渲染组件，此时，获取到的状态count值为：0
-
组件第二次渲染
- 点击按钮调用setCount(count + 1)修改状态，因为状态发生改变，所以该组件会重新渲染
- 组件重新渲染时，会再次执行该组件中的代码逻辑
- 再次调用useState(0),此时React内部回拿到最新的状态值而非初始值，比如案例中最新状态值为1
- 再次渲染组件，获取的状态count值为1
6.组件的使用规则
1.useState函数可以执行多次，每次执行相互独立，每调用一次为函数组件提供一个状态
2.useState注意事项：
- 只能出现在函数组件中
- 不能嵌套在if / for /其他函数中(react按照hooks的调用顺序识别每一个hook)
- 在react内部通过顺序对应的，所以useState不能加判断循环，位置会调换
7.useEffect
什么是副作用？
一个函数处除了主作用，其他的作用就是副作用，对于React组件来说，主作用是根据数据渲染UI，除此之外都是副作用
常见的副作用：
- 数据请求Ajax发送
- 手动修改DOM
- localStorage操作
useEffect函数的作用就是为react函数组件提供副作用的处理
使用步骤：
1.导入useEffect函数
2.调用useEffect函数，并传入回调函数
3.在回调函数中编写副作用处理(dom操作)
8.依赖项控制执行的时机
8.1 不添加依赖项
组件首次渲染执行一次，以及不管是那个状态更改引起组件更新时都会重新执行
1.组件初始渲染
2.组件更新 (不管是哪个状态引起的更新)
useEffect(( ) => {
console.log('副作用执行了')
})
8.2 添加空数组
组件只在首次渲染时执行一次
useEffect( ( ) => {
console.log('副作用执行了');
},[ ] )
8.3 添加特定的依赖项
副作用函数在首次渲染时执行，在依赖项发生变化时重新执行
注意事项：只要useEffect回调函数中用到的函数状态就应该出现在依赖项数组中声明，否则会出现bug
某种意义上 hook的出现 就是想不用生命周期概念也可以写业务代码
