react 组件渲染的优化 （useCallback/useMemo）

转战react的第一篇文章

对于react的类组件

类组件中，只要调用setState就会触发render
主要是利用shouldComponentUpdate生命周期钩子、PureComponent纯组件，来减少组件或子组件的render次数，实现渲染次数优化；另外一个是React.lazy结合Suspense实现组件懒加载，可用在路由上，实现渲染速度的优化

// 基于react-router的路由懒加载
// 注意包裹Suspense组件
// 官方表示会在react-router的后面版本加入Suspense属性
import React, { lazy, Suspense } from 'react';
import { hashHistory, Redirect, Route, Router} from 'react-router';

const Count = lazy(() => import('./pages/count'));
const Grade = lazy(() => import('./pages/grade'));

export default (
  
    Loading...

}> );

对于函数式组件

函数式组件只有当状态值有更新时，才会render
没有生命周期，也不能继承PureComponent这种基类

优化方案1：

使用React v16.6版本中的React.memo()高阶组件，控制函数组件的重新渲染的，原理是对比props的更新，类似于class组件中的PureComponent，不过props也是浅比较，对于数组、对象等类型的props就一定会触发重渲染。memo提供第二个参数用于自定义对比函数，且为接受一个两次props作为参数的函数。

// 拿一个官方的例子
function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);
// 需要注意的是areEqual返回true才是禁止子组件更新，这一点是跟shouldComponentUpdate恰巧相反的

优化方案2:

当父组件传递的props为函数时，子组件就一定会重渲染，那么memo也就不好使了。另一方面，函数组件的每次 render 都会重新执行函数，意味着会重新执行内部的变量、函数等的创建。我们应该尽量减少不必要变量、函数的创建、减少复杂计算操作，结合react v16.8 Hooks进一步优化。关于hooks，建议先看官文

1. useCallback的使用，把函数及其依赖项作为参数传入 useCallback，它将返回该回调函数的 记忆版本，只有在依赖项有变化的时候才会更新，减少不必要的回调函数创建。

import React, { memo, useState, useCallback } from "react";

const Child = memo(props => {
  console.log("child");
  return 
child
;
});

export default function App() {
  const [count, setCount] = useState(0);

  const addHandlerWithHooks = useCallback(() => {
    console.log("addHandlerWithHooks");
  }, []);

  const addHandler = () => {
    console.log("addHandler");
  };

  return (
    <>
      {count}
       setCount(count + 1)}>button
      
    
  );
}
// 往Child传递addHandler时，setCount时App重渲染，即使Child的props没有更新
// 但是却创建新的addHandler，导致Child组件的不必要渲染

// 往Child传递addHandlerWithHooks时，setCount重渲染不会生成新的addHandlerWithHooks，避免Child组件的不必要渲染

2. useMemo的使用：跟useCallback作用类似，只不过是对计算结果缓存，可以避免不必要的重复计算，这一点跟 Vue 里面的计算属性computed有异曲同工的作用

// useMemo 的使用场景主要是用来缓存计算量比较大的函数结果
const config = [...];
 const dateWithConfig = useMemo(() => {
    return config.map(...);
    // 一通操作
  }, [config]);

但是当使用useMemo、useCallback时依赖一个经常变动的值，就没有什么优化的意义了；不过像依赖input、select这种元素的值的，可以通过React.createRef()依赖元素的ref，减少依赖的变更。

⚠️另外：
1.子组件如果是一个数组或者迭代器的话，必须绑定唯一的 key 属性，用于标识当前项的唯一性，也是用于做 Virtual DOM diff的。key 相同的情况下，React只会渲染第一个相同 Key 的项，也可以提高性能。
2.合理的拆分组件其实也是可以做性能优化的