如何防止没有变化的组件重新渲染？

Question

我有一个由几个其他组件组成的组件，例如文本字段，当对文本字段进行输入时，所有其他组件都会重新呈现。

我想阻止重新渲染，只重新渲染实际更改的组件。

我已经看到 useCallback 是正确的方法，我已经看到了如何使用它。但是，我在让 useCallBack 为我的案例正常工作时遇到了一些麻烦。

即使我以如下简单的方式设置它，在文本字段中输入的每个新字符都会导致按钮再次呈现。

我没有看到我的错误。

请参阅沙箱中的工作示例。

 const Button = () => {
  console.log("Button Rendered!");
  window.alert("Button Rendered");
  return <button onClick="">Press me</button>;
};

export default function App() {
  const [textInput, setTextInput] = useState("Hallo");

  const onChangeInput = useCallback(
    (e) => {
      setTextInput(e.target.value);
    },
    [textInput]
  );

  return (
    <div>
      <input
        type="text"
        onChange={onChangeInput}
        value={textInput}
      />
      <Button />
    </div>
  );
}

我很高兴任何 calrification。

原文由 dan_boy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我个人会避免 React.memo / React.useRef / React.useCallback 。

您的示例最简单的解决方案是创建另一个组件，并以此存储状态。

例如。

 const Button = () => {
  console.log("Button Rendered!");
  window.alert("Button Rendered");
  return <button onClick="">Press me</button>;
};

const TextInput = () => {
  const [textInput, setTextInput] = useState("Hallo");
  const onChangeInput = useCallback(
    (e) => {
      setTextInput(e.target.value);
    },
    [textInput]
  );
  return (
      <input
        type="text"
        onChange={onChangeInput}
        value={textInput}
      />
  );
}

export default function App() {
  return (
    <div>
      <TextInput/>
      <Button />
    </div>
  );
}

在上面，如果你改变 Text，App 中没有状态变化，所以 Button 不会被重新渲染，不需要 useMemo 等。

你会发现 React 工作得很好，你将组件划分得越多，它不仅解决了重新渲染的问题，而且可能使以后重用组件变得更加容易。

IOW：保持状态尽可能接近组件，性能将随之而来。

当然你的例子很简单，在一个真正的应用程序中你将有 HOC 等来处理，但这是另一个问题.. :)

原文由 Keith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

useCallback 不阻止重新渲染。 React.memo 是阻止渲染的原因。它对以前的 props 和新的 props 进行浅比较，如果它们相同，它会跳过渲染：

 const Button = React.memo(() => {
  console.log("Button Rendered!");
  window.alert("Button Rendered");
  return <button onClick="">Press me</button>;
});

useCallback 在这里扮演的唯一角色是有时你想将一个函数作为 prop 传递给一个记忆组件。为了使记忆有效，props 需要保持不变，而 useCallback 可以帮助 props 保持不变。

原文由 Nicholas Tower 发布，翻译遵循 CC BY-SA 4.0 许可协议