其他优化

• 防抖：一般用于表单搜索，点击事件等场景，为了防止短时间内多次触发事件。

• 节流：一般为了降低函数执行的频率，比如滚动条滚动。

• 按需引入：使用 UI 框架（例如：Ant Design）时，按需引入相关组件。

• React 动画相关

  • 可使用 classnames npm 库动态添加类名，实现动画切换。该方式既不需要频繁 setState ，也不需要改变 DOM 。
  • 操纵原生 DOM 。通过获取原生 DOM ，然后单独操作 DOM 实现动画功能，可以避免了 setState 改变带来 React Fiber 深度调和渲染的影响。
  • 当使用 setState 实时改变 DOM 元素状态的是，尽量采用 CSS3 ， CSS3 开启硬件加速，使 GPU (Graphics Processing Unit) 发挥功能，从而提升性能。

• 及时清除定时器/延时器/监听器。在对应的生命周期，进行清除，不然可能会造成内部泄露的情况。

• 合理使用 state 。对于视图更新不依赖于当前 state 时

  • 在类组件中，可以挂载到当前实例 this，避免通过 state 管理。
  • 在函数组件中，可以通过 useRef 缓存数据。useRef 可以创建出一个 ref 原始对象，只要组件没有销毁，ref 对象就一直存在，可以把一些不依赖于视图更新的数据储存到 ref 对象中。

• 不要在 hooks 的参数中，执行函数或者 new 实例。

  • 函数每次 rerender 都会执行 hooks ，在执行 hooks 函数的同时，也会执行函数的参数（如，代码片段中的 fn() 和 new Fn()），每一次 rerender 都会执行 fn 或者是 new 一个实例。

    const hook1 = useRef(fn())
    const hook2 = useRef(new Fn())
    

  • 函数组件在初始化和更新流程中，会使用不同的 hooks 对象。大部分的 hooks 参数都作为初始化的参数，在更新阶段压根没有用到，那么传入的参数也就没有了意义。