性能优化

React方面：

1、首屏渲染：Webpack的 new HtmlWebpackPlugin 配置loading模版

2、简单的子组件，尽量使用函数方式，不需要继承Component实例化，就没有生命周期函数了，减少内存占用。

减少render次数：
3、子组件使用PureComponent（针对class组件），或者React.memo（针对函数式组件），减少子组件进行没必要的重新渲染。
⚠️hooks只能在函数式组件中使用，React的16.8版本才能使用

//⚠️React.memo(子组件，比较函数)，比较函数，是比较当前props与nextProps，不需要重新渲染返回true，否则返回false。
//React.memo的用法
function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual); //不穿第二个比较函数，则会默认浅比较

复杂组件，自己在showComponentUpdate中写浅比较showComponentUpdate(nextProps, nextState)

shouldComponentUpdate(nextProps, nextState) {

    for (let key in nextProps) {

        if (nextProps[key] !== this.props[key]) {

            return true;

        }
    }
    for (let key in nextState) {

        if (nextState[key] !== this.state[key]) {

            return true;

        }
    }
    return false;
}

useCallBack减少函数的重复声明

//只有依赖项a或者b变化，才会重新返回一个新的函数，否则，useCallback返回缓存的函数
const callback = () => {
  doSomething(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

减少重复计算，重复渲染等：
4、useMemo减少函数的重复执行，假设是一个纯函数，每次输入相同的参数，结果都是一样的，那么就没必要重复执行。只有参数变化，才需要重复执行。

//useMemo的用法，useMemo返回缓存的变量
const callback = () => {
  doSomething(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

5、定时器、Dom监听等在组件销毁前注销

6、减少在render内部定义函数，在事件绑定处定义函数，或者bind绑定this（因为会执行bind，会返回函数），否则每次render都会重新定义函数，消耗内存。

http请求方面：缓存，CDN

Webpack构建打包方面

未完待续....

标签：返回,函数,nextProps,性能,React,key,组件,优化
来源： https://www.cnblogs.com/HappyYawen/p/14154300.html