memo、useCallback、useMemo 傻傻分不清

前言

memo、useCallback、useMemo 是否是不少时候都傻傻分不清楚？

看完这篇文章，快速理解它们各自的使用场景，以一个实际开发场景为例：在使用 React 进行开发的时候，优化渲染是一项常备技能。最多见的是父组件渲染的时候，连带的子组件也会从新执行。

例如：

// in App.js
import React, { useState, useMemo, memo } from "react";
import ChildComponent from "./ChildComponent";

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

  const handleClick = () => {
    setCount(count + 1);
  };
  
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{count}</h2>
      <button onClick={handleClick}>click</button>
      <ChildComponent />
    </div>
  );

// in ChildComponent.js
const ChildComponent = (props) => {
  console.log("ChildComponent Running");
  return <div>{`这里是 ChildComponent`}</div>;
};

export default ChildComponent;
复制代码

每次点击后，父元素中的 state 都会发生变化，可是子元素并不依赖于父元素的 state，可是子元素一样会从新执行一遍。

React.PureComponent

若是是使用 class 来实现的组件，可使用 React.PureComponent 来定义组件。

class Greeting extends React.PureComponent {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
复制代码

React.PureComponent 与 React.Component 区别在于：PureComponent 实现了 shouldComponentUpdate 方法，能够对 props 和 state 进行浅比较，从而优化组件渲染。

React.Memo

使用 React.memo 将组件包裹。React.memo 包裹后的组件将在 props 不变的状况下，省略组件渲染的操做直接复用最近一次的渲染结果。React.memo 默认对复杂对象作浅层比较，也能够自定义比较函数做为第二个参数传递给 React.memo。

const ChildComponentMemo = memo(ChildComponent, (prevProps, nextProps) => {
	// return true or false;
});
复制代码

useCallback

可是 React.memo 有缺陷。若是传入的是一个引用数据类型，那么在修改与子组件无关的 state 时， ChildComponet 依然会从新执行。

// in ChildComponent.js
const ChildComponent = (props) => {
  console.log("ChildComponent Running");
  return (
    <div>
      {`这里是 ChildComponent`}
      <button onClick={props.handleAddCat}>add cat</button>
    </div>
  );
};

// in APP.js
export default function App() {
  const [dogCount, setDogCount] = useState(0);
  const [catCount, setCatCount] = useState(0);

  const handleAddDog = () => {
    setDogCount(dogCount + 1);
  };

  // 这个函数要传给子组件
  const handleAddCat = () => {
    setCatCount(catCount + 1);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>dog:{dogCount}</h2>
      <h2>cat:{catCount}</h2>
      <button onClick={handleAddDog}>click</button>
      <ChildComponentMemo handleAddCat={handleAddCat}/>
    </div>
  );
}
复制代码

这是由于 click 后 state 发生变化，那么父组件（App.js）会从新执行，致使引用类型会被从新建立（引用地址发生改变），子组件（ChildComponent.js）会认为 props 发生改变，从而从新执行。

这时候须要使用 useCallback 来为引用类型地址作一个缓存：

// in APP.js
export default function App() {
  const [dogCount, setDogCount] = useState(0);
  const [catCount, setCatCount] = useState(0);

  const handleAddDog = () => {
    setDogCount(dogCount + 1);
  };

  // dogCount 改变后，handleAddCat 的地址不会发生改变
  // ChildComponent 也不会从新执行
  const handleAddCat = useCallback(() => {
    setCatCount(catCount + 1);
  }, [catCount]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>dog:{dogCount}</h2>
      <h2>cat:{catCount}</h2>
      <button onClick={handleAddDog}>click</button>
      <ChildComponentMemo handleAddCat={handleAddCat}/>
    </div>
  );
}
复制代码

useMemo

不少人会问 useMemo 和 useCallback 有什么区别？

一句话总结：useCallback 缓存的是函数，useMemo 缓存的是函数执行后的值。

即 useCallback(fn, [deps]) 等价于 useMemo(() => fn, [deps])

// in App.js
function App() {
  const [dogCount, setDogCount] = useState(0);
  const [catCount, setCatCount] = useState(0);
  
  const handleAddDog = () => {
    setDogCount(dogCount + 1);
  };
  
	const computeValue = (catCount) => {
    // 假设这里有大量计算
    console.log('computeValue Running');
    
    return catCount + 1;
  }

  // 当 dogCount 发生变化，这里会从新执行 computeValue 函数
  const value = computeValue(catCount);
  console.log('value: ', value);
}
复制代码

当点击 click 增长 dogCount 数量时，computeCount 依然会执行，可是它的计算与 dogCount 毫无关系，其执行的结果是同样的。

这时候能够用 useMemo 将计算值缓存起来：

// in App.js
function App() {
  const [dogCount, setDogCount] = useState(0);
  const [catCount, setCatCount] = useState(0);
  
  const handleAddDog = () => {
    setDogCount(dogCount + 1);
  };
  
	const computeValue = (catCount) => {
    // 假设这里有大量计算
    console.log('computeValue Running');
    
    return catCount + 1;
  }

  // 使用 useMemo 后，只有当 catCount 变化时，才会从新计算获得 value
  // 若是 deps 为空，那么只有在第一次渲染时执行
  const value = useMemo(() => computeValue(catCount), [catCount])
}
复制代码