react hook useCallback

参考

https://juejin.im/post/5ec2465a5188256d841a552a

 

父组件传入数据和回调

两个Board组件分别显示信息

age组件接收修改age的回调, 并执行

score组件接收修改score的回调, 并执行

点击age, 修改age , 此时可以看到所有组件都被重新渲染了

 

如果你的函数组件在给定相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

分别点击age和score, 会发现没有变化的数据, 组件也不会重新渲染

 

import React, { useState, useEffect, useCallback } from "react";
const Board = React.memo(({ name, value }) => {
  console.log("Board", name, value);
  return (
    <div>
      {name}:{value}
    </div>
  );
});
const Age = React.memo(({ onAgeClick }) => {
  console.log("Age render");
  return (
    <div>
      {/* age: {age} */}
      <button onClick={onAgeClick}>add age</button>
    </div>
  );
});

const Score = React.memo(({ onScoreClick }) => {
  console.log("Score render");
  return (
    <div>
      {/* score: {score} */}
      <button onClick={onScoreClick}>score add</button>
    </div>
  );
});

export default () => {
  console.log("Root render");
  const [age, setAge] = useState(18);
  const [score, setScore] = useState(60);

  // 这种情况下, addAge 每次渲染时都是新的函数
  // const addAge = () => setAge(age + 1);
  // const addScore = () => setScore(score + 1);

  const addAge = useCallback(() => setAge(age + 1), [age]);
  const addScore = useCallback(() => setScore(score + 1), [score]);

  return (
    <div>
      <Board name="age" value={age}></Board>
      <Board name="score" value={score}></Board>
      <Age onAgeClick={addAge}></Age>
      <Score onScoreClick={addScore}></Score>
    </div>
  );
};

 

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/4422340