React相关框架性能优化

上篇说了要写一篇关于性能优化的文章，它来了

hooks组件代替class类组件

说到性能提示，大家不会又想到那些shouldComponentUpdate和PureComponent了吧；
对于2021年居然面试还问class的生命周期也是不敢苟同，前端学的东西多又杂，个人认为用class类写组件已经被淘汰了，详见上一篇文章： hooks组件与class组件对比.

避免重复渲染

• React.memo：使得 React 在更新组件之前进行 props 的比对，若 props 不变则不对组件更新，减少不必要的重渲染。

const Demo: React.FC<IDemoProps> = React.memo(
  (props: IDemoProps) => {
  		return  <div />
  }  
);

export default Demo;

• useMemo：利用 useMemo 可以缓存计算结果的特点，如果 useMemo 返回的是组件的虚拟 DOM，则将在 useMemo 依赖不变时，跳过组件的 Render 阶段。该方式与 React.memo 类似，但与 React.memo 相比有以下优势：

• 更方便。React.memo 需要对组件进行一次包装，生成新的组件。而 useMemo 只需在存在性能瓶颈的地方使用，不用修改组件
• 更灵活。useMemo 不用考虑组件的所有 Props，而只需考虑当前场景中用到的值，也可使用 useDeepCompareMemo[24] 对用到的值进行深比较
• 如果父组件往子组件传方法，则需要配合useCallback或usePersistFn¹，因为如果传给子组件的派生状态或函数，每次都是新的引用，React.memo 优化就会失效。所以需要使用 useMemo 和 useCallback 来生成稳定值

export default function App() {
  const getFc = usePersistFn((value) => {

  });
  const fc = (value) => {

  };
  const Child= useMemo(() => {
    return <Child name="使用 useMemo 作为 children" fc={getFc} />
  }, [getFc,name])

  return (
    <div className="App">
      <Child name="直接作为 children" fc={fc} />
      {Child}
    </div>
  )
}

发布者订阅者跳过中间组件 Render 过程

采用发布订阅模式避免多层级的 props 传递嵌套太深，页面级采用 useContext 配合 useReducer,全局采用 redux，mobx 或脚手架自带全局状态管理；如果只是读取props，那么只用creatContext配合useContext就可以，推荐一篇文章: 链接.

常量提到全局定义，防止随组件渲染而重新创建，方法亦类似

一般都在utils目录下的enum.ts里面存放枚举值和不变常量值；

debounce、throttle 优化频繁触发的回调

ahooks里有相关方法，推荐ahooks，里面有很多超好用的方法，并且配合Rax可以跨端

愿你也能如隐官陈十一，不忘初心，心向阳光

---

1. ahooks里的方法， ahooks官网. ↩︎