反应 useCallback 与 onClick 不起作用。重新渲染子组件

Question

即使在使用 useCallback 后，TimeChild 仍会在下图中重新渲染

Answer 1

当 Time 设置状态时，Time 将重新渲染。然后，除非您采取措施阻止它，否则它的所有子项也会重新渲染。如果要阻止子组件重新渲染，则子组件需要使用 React.memo。

const TimeChild = React.memo(() => {
  // ...
});

如果你这样做，那么当 TimeChild 渲染时，它会首先在它的每个旧 props 和它的每个新 props 之间做一个 === 比较。如果它们都相同，TimeChild 将跳过渲染。

useCallback 在这方面扮演的唯一角色是 TimeChild 接收一个函数作为道具。如果是，那么你需要确保它每次都接收到 same 函数，否则 React.Memo 将永远无法跳过渲染，因为它的 props 不断变化。但是在您的示例中，根本没有任何道具被传递给 TimeChild，因此 useCallback 不是必需的。

Answer 2

您可以这样使用“useCallback”：

    import React, { useCallback, useState } from "react";
    
    const App = () => {
      const [count, setCount] = useState(0);
    
      const callBckValue = useCallback(() => {
        setCount((count) => count + 1);
      }, []);
    
      return (
        <div>
          <h2>{count}</h2>
          <button type="button" onClick={callBckValue}>
            Click Me
          </button>
        </div>
      );
    };
    
    export default App;

Answer 3

首先，您需要注意，只有在特殊情况下，才可以阻止子组件重新渲染。如果您的情况不是那么特殊，那可能不是一个好主意。

其次，如果你确定一定要使用React.memo，用法很像类组件中的componentShouldUpdate