Hooks进阶

React.memo、useMemo、useCallback 的区别

• React.memo 是对传入的 props 进行前比较，只有 props 中的值变化了，才会更新被包裹的子组件，当然，它还可以接收第二个参数，用于自定义比较的过程。

  // 自定义比较过程：prevProps上一次的props，nextProps本次的props
  const isEqual = (prevProps, nextProps) => {
      if (prevProps.number !== nextProps.number) {
          return false;
      }
      return true;
  }
  export default React.memo((props = {}) => {
      return (<p>number is : {props.number}</p>);
  }, isEqual)
  

• 从细粒度上来说，React.memo 是组件级别的；而 useMemo 的细粒度更小，它缓存的是值，只有当第二个参数数组的元素发生变化时，才会重新计算函数，返回一个新的值，当然，这个值也可能是一个新的组件；

  export default (props = {}) => {
      return useMemo(() => {
          return (<p>number is : {props.number}</p>)
      // 监听 props 中的某个属性，只有这个属性发生变化时，才重新执行函数，缓存一个新的值
      }, [props.number])
  }
  

• useMemo 缓存的是一个函数，它常常与 React.memo 配合使用。这是因为，当父组件重新渲染时，绑定在子组件上的函数会重新创建，这就意味着子组件的 props 发生了变化，React.memo 也跟着渲染包裹的子组件。

  // App.jsx
  export default function App() {
      const [count, setCount] = useState(0);
  
      const handleClickButton = useCallback(() => {
          setCount(count + 1);
      }, [count]);
  
      return (<Button onClickButton={handleClickButton}>Button</Button>);
  }
  
  // Button.jsx
  const Button = ({ onClickButton, children }) => {
      return (
          <>
              <button onClick={onClickButton}>{children}</button>
          </>
      );
  };
  export default React.memo(Button)