React性能优化

React性能优化步骤

1.寻找项目中的性能损耗严重的子树(使用why-did-you-render等工具查找)
2.在子树的根节点使用性能优化API （memo, useMemo, useCallback）
3.子树中运用变与不变分离的原则

示例1

如下代码所示，我们有父组件中有一个state,每次点击button会更新此state,父组件下有一个比较耗时的子组件，这时每次点击button,这个子组件就会被重新渲染

import { useState } from "react";

const ExpensiveChild = () => {
  let now = performance.now();
  while (performance.now() - now < 100) {}
  console.log("子元素渲染");
  return <div>子元素</div>;
};

export default function App() {
  const [num, updateNum] = useState(0);
  return (
    <div className="App">
      <span>{num}</span>
      <button onClick={() => updateNum(num + 1)}>ADD</button>
      <ExpensiveChild />
    </div>
  );
}

解决方法的话，就是将变与不变分离：
方法1:
这种方法 ExpensiveChild 组件没有渲染的原因是父元素没有渲染，所以这个组件diff对比结果是两次props相等

import { useState } from "react";

const ExpensiveChild = () => {
  let now = performance.now();
  while (performance.now() - now < 100) {}
  console.log("子元素渲染");
  return <div>子元素</div>;
};

function Num () {
  const [num, updateNum] = useState(0);
  return (
    <div>
      <span>{num}</span>
      <button onClick={() => updateNum(num + 1)}>ADD</button>
    </div>
  )
}

export default function App() {  
  return (
    <div className="App">
      <Num />
      <ExpensiveChild />
    </div>
  );
}

方法2:
这种方法为啥没有渲染，解释起来稍微有点困难。从源码的角度来看，主要是命中了 bailoutOnAlreadyFinishedWork 这个方法，这个方法命中的原因就是：a:oldProps === newProps, b:rootFiber.lanes不存在于 renderLanes中,稍微详细的可以看此文章

const ExpensiveChild = () => {
  let now = performance.now();
  while (performance.now() - now < 100) {}
  console.log("子元素渲染");
  return <div>子元素</div>;
};

const Num2 = ({children}) => {
  const [num, updateNum] = useState(0);
  return (
    <div id={num}>
      <span>{num}</span>
      <button onClick={() => updateNum(num + 1)}>ADD</button>
      {children}
    </div>
  )
}
export default function App() {
  
  return (
    <div className="App">
      <Num2><ExpensiveChild /></Num2>
    </div>
  );
}

代码链接：link