用 onClick 反应 useCallback 不起作用。渲染子组件答案

【问题标题】：React useCallback with onClick not working. Rerenders child component用 onClick 反应 useCallback 不起作用。渲染子组件
【发布时间】：2021-03-01 20:30:38
【问题描述】：

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

【问题讨论】：

这听起来对我来说是正确的。标准的反应行为是，如果父组件（时间）呈现，它的子组件（div、按钮、h2 和 TimeChild）也会呈现。你的意思是在 TimeChild 上使用 React.memo 吗？
@NicholasTower 谢谢。我想停止重新渲染子组件，即 TimeChild，因此我使用了 useCallback。我也需要使用 React 备忘录吗？

标签： reactjs react-hooks

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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;

【讨论】：

我明白这一点，但是如果您看到我的屏幕截图，我想防止重新渲染 TimeChild 组件

【解决方案3】：

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

其次，如果你确定必须这样做，使用React.memo，用法很像类组件中的componentShouldUpdate

【讨论】：