使用useEffect的好处：

  • 使用多个effect实现关注点分离。
    class component生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到几个不同方法中。hooks中则将不同用途的代码分离至不同的effect中，代码可读性更高。
  • 需要清除副作用场景时更加优雅。
    比如初次渲染时订阅，组件卸载时取消订阅的场景。CC中往往需要在componentDidMount和componentWillUnmount中拆分这个逻辑。而hooks中写个return就足够了。return一个函数，react会在每次render完毕准备执行effect function前先执行clean up effect function。

react hooks在每次不同的渲染时，其state和props都是独立的，使用到他们的任何值也是独立的。
修改useRef current的值不会触发组件的重新渲染

hook规则

  1. 只在最顶层调用Hook （不要再循环等地方调用Hook）
  2. 只在react 函数组件中调用Hook