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

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

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

我已经看到了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>
  );
}

我很高兴得到任何澄清。

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

对于您的示例，最简单的解决方案就是创建另一个组件，并用它存储状态。

eg.

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 等，但这是另一个问题..:)