打造高性能react应用

提升react应用性能三种方法

react分为函数组件和类组件，下面对两种组件的优化方式分别做一下解释

类组件

1. 使用 shouldComponentUpdate 规避冗余的更新逻辑

shouldComponentUpdate 是 React 类组件的一个生命周期，其参数是新的props和state，这里存着优化的点就是shouldComponentUpdate函数应返回false和true，当返回true时则重新渲染该组件，否则则不渲染

shouldComponentUpdate(nextProps, nextState){
    // 当组件的text参数未发生改变时，则不重新渲染组件
    if (nextProps.text === this.props.text) {
        return false;
    }
    // 其他情况则重新渲染组件
    return true;
}

2. PureComponent

PureComponent是react内置的一个类，可通过继承它，浅比较props，避免冗余的更新。此方式的原理同上方一样，底层代码就是通过shouldComponentUpdate判断是否更新。因为是浅比较，判断不够精准，所以还是谨慎使用。

class ChildB extends React.PureComponent {
  render() {
    console.log("ChildB 的render方法执行了");
    return (
      

        子组件B的内容：
        {this.props.text}
      
    );
  }
}

函数组件

1. React.memo 与 useMemo

React.memo 会帮我们“记住”函数组件的渲染结果，在组件前后两次 props 对比结果一致的情况下，它会直接复用最近一次渲染的结果。

import React from "react";
// 定义一个函数组件
function FunctionDemo(props) {
  return xxx
}
// areEqual 函数是 memo 的第二个入参，我们之前放在 shouldComponentUpdate 里面的逻辑就可以转移至此处
function areEqual(prevProps, nextProps) {
    // 当组件的text参数未发生改变时，则不重新渲染组件
    if (prevProps.text === nextProps.text) {
        return false;
    }
    // 其他情况则重新渲染组件
    return true;
}
// 使用 React.memo 来包装函数组件
export default React.memo(FunctionDemo, areEqual);

useMemo是react hooks的其中一个钩子函数，它可以控制是否执行同一段逻辑，使用方法如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

我们可以把目标逻辑作为第一个参数传入，把逻辑的依赖项数组作为第二个参数传入。这样只有当依赖项数组中的某个依赖发生变化时，useMemo 才会重新执行第一个入参中的目标逻辑。