react hooks之useDebounce useThrottle

Posted 2023-04-06

参考技术A 防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

备注：createRef 每次渲染都会返回一个新的引用，而 useRef 每次都会返回相同的引用。

每次组件重新渲染，都会执行一遍所有的hooks，这样debounce高阶函数里面的timer就不能起到缓存的作用（每次重渲染都被置空）。timer不可靠，debounce的核心就被破坏了。使用useRef的目的就是为了解决这个问题。

useRef实现了React组件的缓存机制。

React hooks之useEffect

参考技术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始终是指向最新的值，而不是属于某次特定渲染的值。