react 性能优化总结

在日常的代码编程过程中，真的发现react真的一直在rendering,导致页面渲染性能变差。有时自己在写代码过程中没注意到这个方面，毕竟父子组件的嵌套，有时别的页面的props变化，会导致该页面的props变化，导致重复render.所以这边希望能对这个进行优化总结。

1.shouldComponentUpdate

类组件中可以通过该生命周期来进行优化，默认情况下该生命周期返回true,表示在什么情况下都会渲染。可以通过props或其他判断来返回false来阻止组件的重新渲染。

在shouldComponentUpdate中进行深度比较？运行深度比较本身是一个过程比较长，比较重，比较耗时的动作。因此，在 shouldComponent 函数运行结束之后，render 函数才能运行。这样一来性能非但不能提升反而会变得更差。

2.React.PureComponent

也是对于是props 和 state 的浅层比较，所以基本上还是会重复渲染没有什么太大的作用

3.防抖与节流进行优化

 

4.通过memo优化

当组件在相同props时，会渲染出相同结果。所以可以给子组件包裹上memo,阻止他的重复渲染。

比如下面的例子：

export default function Father() {
  let [color, setColor] = useState("red");
  return (
    <>
      <input value={color} onChange={(e) => setColor(e.target.value)} />
      <p style={{ color }}>Hello, world!</p>
      <Child/>
// 此时这个组件就有严重的性能问题，每次input的更新会导致子组件没必要的渲染
// 解决方案： 给子组件包裹上memo,当input内容变化时，不会造成Child的渲染
// ps: memo进行的是浅比较，当传入 <Child key={name: 'name'}/>时，此时的memo就还是会有性能问题，会重复渲染
    </>
  );
}