React hooks之useEffect

Posted 2023-03-14

参考技术A

useEffect（副作用）通过一个参数来实现模拟class组件的componentDidMount、componentWillUnmount还有componentDidUpdate这几个生命周期函数
无阻塞更新：因为他是在组件挂载之后执行操作，比如请求数据，他是在组件挂载完了以后才执行数据请求，这样就算请求失败了，页面也能正常显示，不会报错；
同一个组件可以多次使用useEffect。

相当于是监听页面的变化，只要页面有更新，都会执行。
注意：不能在这个函数体内执行页面更新操作，否则会陷入死循环

表示的是它不监听页面数据的变化，只有在页面初始化和销毁之前会执行；
执行的是类似于class组件的componentDidMount和componentWillUnmount两个生命周期;

监听第二个参数数组内所传的值，当对应的state有更新时触发。
注意：这里的执行顺序其实不是先执行上一次useEffect return的函数，而是先正常执行下一次状态更新然后再执行上一次的effct,然后再执行，下一次的effct。因为大多数情况下，effct不会阻塞页面的更新。

effects会在每次渲染后运行，并且概念上它是组件输出的一部分，可以“看到”属于某次特定渲染的props和state。就是只要组件有更新，useEffect都是作为组件输出的一部分。
在单次渲染的范围内，props和state都保持不变。
这一点上，函数式组件和class组件是不一样的，因为class组件做了处理，this.state始终是指向最新的值，而不是属于某次特定渲染的值。