如何防止重新渲染未更改的组件？

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>
  );
}

我很高兴任何校准。

Answer 1

useCallback不会阻止重新渲染。React.memo是什么防止渲染。它对之前的 props 和新的 props 做一个浅层比较，如果它们相同，它会跳过渲染：

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

useCallback 在这方面的唯一作用是，有时您希望将函数作为道具传递给记忆化组件。为了让 memoization 起作用，props 需要保持不变，而 useCallback 可以帮助 props 保持不变。

Answer 2

我个人会避免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 中没有 State 改变，所以 Button 不会被重新渲染，不需要 useMemo 等。

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

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

当然，您的示例很简单，在实际应用程序中，您将需要处理 HOC 等，但这是另一个问题.. :)