Hook API用法解析——React.memo和useCallback和useMemo

React.memo和useCallback和useMemo

1.React.memo

使用场景：React.memo就类似React.PureComponent，专门用于纯函数组件，起作用是对内部对象进行浅比较，判断是否重新渲染。

import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>addCount</button>
      <Child />
    </div>
  );
}
const Child = (props) => {
  console.log('进入了组件child');
  return <div>这里是child</div>;
};
export default Example;

当父组件值改变导致重新渲染时，即使子组件没有任何改变，也会被重新渲染，这不是我们所期望的，我们希望子组件的props没有改变时，子组件就不需要渲染

用React.memo解决，修改Child如下

...
const Child = React.memo((props) => {
  console.log('进入了组件child');
  return <div>这里是child</div>;
});
...

React.memo(MyComponent, areEqual),它第二个参数是个判断函数

(prevProps, nextProps) => {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，组件就不会渲染
  否则返回 false，组件渲染
  */
}

与shouldComponentUpdate(nextProps, nextState)的判断相反

2. useCallback

使用场景：useCallback用来缓存方法，类似react组件构造函数里面定义的：this.onChange = this.onChange.bind(this)，返回一个缓存的函数,仅会在依赖项变更时，才会更新

上面例子还存在一个问题，如果Child组件传入一个函数作为参数，由于函数为引用类型，使得每次传入Child组件都是一个新的函数实例，如下

import React, { useState, useCallback } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  const handleChange = () => {
    console.log(`handleChange`);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>addCount</button>
      <Child handleChange={handleChange} />
    </div>
  );
}
const Child = React.memo((props) => {
  console.log('进入了组件child');
  return <div>这里是child</div>;
});
export default Example;

此时，改变父组件的count值，会导致重新渲染生成新的handleChange实例，导致传入的props变化，子组件重新渲染

用useCallback解决，修改handleChange方法如下：

// 第二个参数为空数组，也可以指定依赖于某一状态值，即该状态值变化时才重新改变handleChange方法
// 有没有后面的依赖项数组很重要，否则还是会重新渲染
const handleChange = useCallback(() => {
  console.log(`handleChange`);
},[])// 或[list]

3. useMemo

使用场景：useMemo函数用于缓存需计算操作的状态值，类似Vue的计算属性。第一个参数为计算函数，且必须return返回一个结果，返回一个缓存的值，第二个参数是一个数组[]，useMemo执行依赖于次数组的状态值。它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

传入 useMemo 的函数会在渲染期间执行。
请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

import React, { useState, useMemo } from 'react';
function Example() {
  const [number, setNumber] = useState(0);
  const [count, setCount] = useState(0);
  // 父组件更新时，这里的变量和函数每次都会重新创建，那么子组件接受到的属性每次都会认为是新的
  // 所以子组件也会随之更新，这时候可以用到 useMemo
  // 有没有后面的依赖项数组很重要，否则还是会重新渲染
  // 如果后面的依赖项数组没有值的话，即使父组件的 number 值改变了，子组件也不会去更新
  //const data = useMemo(()=>({number}),[]);
  const data = useMemo(() => ({ number }), [number]);

  const addClick = () => {
    setNumber(number + 1);
  };

  return (
    <div>
      <p>Number:{number} </p>
      <p>Count:{count}</p>
      <button onClick={addClick}>addNumber</button>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        addCount
      </button>
      <Child data={data} />
    </div>
  );
}
const Child = React.memo((props) => {
  console.log('进入了组件child');
  return <div>这里是child</div>;
});
export default Example;

4. 不要过度依赖 useMemo

• useMemo 本身也有开销。useMemo 会「记住」一些值，同时在后续 render 时，将依赖数组中的值取出来和上一次记录的值进行比较，如果不相等才会重新执行回调函数，否则直接返回「记住」的值。这个过程本身就会消耗一定的内存和计算资源。因此，过度使用 useMemo 可能会影响程序的性能。

• 在使用 useMemo 前，应该先思考三个问题：

  • 传递给 useMemo 的函数开销大不大？ 有些计算开销很大，我们就需要「记住」它的返回值，避免每次 render 都去重新计算。如果你执行的操作开销不大，那么就不需要记住返回值。否则，使用 useMemo 本身的开销就可能超过重新计算这个值的开销。因此，对于一些简单的 JS 运算来说，我们不需要使用 useMemo 来「记住」它的返回值。
  • 返回的值是原始值吗？ 如果计算出来的是基本类型的值（string、 boolean 、null、undefined、number、symbol），那么每次比较都是相等的，下游组件就不会重新渲染；如果计算出来的是复杂类型的值（object、array），哪怕值不变，但是地址会发生变化，导致下游组件重新渲染。所以我们也需要「记住」这个值。
  • 在编写自定义 Hook 时，返回值一定要保持引用的一致性。 因为你无法确定外部要如何使用它的返回值。如果返回值被用做其他 Hook 的依赖，并且每次 re-render 时引用不一致（当值相等的情况），就可能会产生 bug。所以如果自定义 Hook 中暴露出来的值是 object、array、函数等，都应该使用 useMemo 。以确保当值相同时，引用不发生变化。

参考文档

一文轻松掌握react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext…)
React函数组件性能优化之useEffect、useMemo、useCallback、React.memo
React Hooks 详解 【近 1W 字】+ 项目实战