在 React.js 中防止子项重新渲染

Question

如何防止在 React 中重新渲染子组件？ 每次保存在 useState 中的 ID 在父级更新时，子级都会重新渲染并失去选择。

这里是设置的一些示例代码：

// Parent component
import React, { useState } from "react";
import ChildComponent from "./ChildComponent";

function ParentComponent() {
  const [selectedProjectId, setSelectedProjectId] = useState("");

  const handleProjectIdChange = (projectId) => {
    setSelectedProjectId(projectId); //<--- this rerenders the ChildComponent which is NOT wanted
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent
        selectedProjectId={selectedProjectId}
        onProjectIdChange={handleProjectIdChange}
      />
      <p>Selected project ID: {selectedProjectId}</p>
    </div>
  );
}

export default ParentComponent;

// Child component
import React, { useState } from "react";

function ChildComponent({ selectedProjectId, onProjectIdChange }) {
  const [projectOptions, setProjectOptions] = useState([
    { id: "1", name: "Project 1" },
    { id: "2", name: "Project 2" },
    { id: "3", name: "Project 3" },
  ]);

  const handleProjectChange = (event) => {
    const projectId = event.target.value;
    onProjectIdChange(projectId);
  };

  return (
    <div>
      <h2>Child Component</h2>
      <select value={selectedProjectId} onChange={handleProjectChange}>
        <option value="">Select a project</option>
        {projectOptions.map((option) => (
          <option key={option.id} value={option.id}>
            {option.name}
          </option>
        ))}
      </select>
    </div>
  );
}

export default ChildComponent;

我尝试了 react.memo、useCallbacks 和其他方法，但没有任何效果。我想防止 useState 在每次更新 ID 时更新子组件。

Answer 1

由于您的子组件的 props 发生变化，子组件将无论如何重新渲染，因此解决方案是防止子组件的 props 在父组件重新渲染时发生变化。

第一，您可以从子组件中删除道具selectedProjectId。选择选项不需要根据状态更改进行更新。然后在子组件中添加memo

子组件

function ChildComponent({ onProjectIdChange }) { 
  .....
  return (
    .....
    <select onChange={handleProjectChange}>

....
export default React.memo(ChildComponent);

第二，在 ParentComponent 中使用 useCallback 来防止 handleProjectIdChange 在每次重新渲染时改变。

父组件

....
const handleProjectIdChange = useCallback(
  (projectId) => {
    setSelectedProjectId(projectId);
  },
  [setSelectedProjectId]
);
....
return (
  ....
  <ChildComponent
    onProjectIdChange={handleProjectIdChange}
  />
  ....
);