React相关框架性能优化

我心飞翔 分类:javascript

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

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或usePersistFn1,因为如果传给子组件的派生状态或函数,每次都是新的引用,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官网.↩

回复

我来回复
  • 暂无回复内容