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

Question

我有一个由其他几个组件(例如文本字段)组成的组件，当对文本字段进行输入时，所有其他组件都会重新呈现。我想防止重新渲染，只重新渲染实际更改的组件。我已经看到“useCallback”是执行此操作的正确方法，并且我已经看到了如何使用它。但是，我在让“useCallBack”在我的情况下正常工作时遇到了一些麻烦。即使我以如下简单的方式设置它，输入文本字段的每个新字符都会导致按钮再次呈现。我没有看到我的错误。
See working example in sandbox.

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。

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中没有State改变，所以Button不会被重新渲染，不需要useMemo等。
你会发现 React 工作得非常好，你将组件划分得越多，它不仅解决了重新渲染的问题，而且可能使以后重用组件变得更容易。
IOW:让状态尽可能靠近组件，性能随之而来。
当然，您的示例很简单，在真正的应用程序中，您将需要处理 HOC 等，但这是另一个问题.. :)