React中如何防止子组件重渲染？避免父组件状态更新触发子组件刷新

针对你遇到的父组件selectedProjectId更新时子组件重渲染的问题，分两种场景给出解决方法：

场景1：保持父子组件状态同步（受控组件） #

这种模式下，子组件的选中状态由父组件的selectedProjectId控制，当父组件更新这个值时，子组件需要重渲染来同步选中状态（这是受控组件的正常行为）。但我们可以优化避免父组件其他状态变化时子组件的不必要重渲染：

修改父组件 #

用useCallback缓存回调函数，确保父组件渲染时函数引用不变：

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

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

  // 用useCallback缓存函数，依赖项为空（setSelectedProjectId是React稳定的内置函数）
  const handleProjectIdChange = useCallback((projectId) => {
    setSelectedProjectId(projectId);
  }, []);

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

export default ParentComponent;

修改子组件 #

用React.memo包裹组件，浅比较props，只有当props真正变化时才重渲染：

import React, { useState, memo } from "react";

// 用memo包裹组件
const ChildComponent = memo(({ 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;

场景2：子组件独立管理选中状态（非受控组件） #

如果完全不想让父组件的selectedProjectId更新触发子组件重渲染，可以将选中状态移到子组件内部，父组件仅接收子组件的选中通知：

修改父组件 #

移除传给子组件的selectedProjectId props：

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

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

  const handleProjectIdChange = useCallback((projectId) => {
    setSelectedProjectId(projectId);
  }, []);

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

export default ParentComponent;

修改子组件 #

新增本地状态管理选中值，不再依赖父组件传入的selectedProjectId：

import React, { useState, memo } from "react";

const ChildComponent = memo(({ onProjectIdChange }) => {
  const [projectOptions, setProjectOptions] = useState([
    { id: "1", name: "Project 1" },
    { id: "2", name: "Project 2" },
    { id: "3", name: "Project 3" },
  ]);
  // 子组件本地管理选中状态
  const [localSelectedId, setLocalSelectedId] = useState("");

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

  return (
    <div>
      <h2>Child Component</h2>
      <select value={localSelectedId} 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;

为什么之前的尝试无效？ #

• 未用useCallback缓存回调函数：父组件每次渲染都会创建新的handleProjectIdChange，导致子组件的memo检测到props变化，触发重渲染。
• 如果是受控组件模式，selectedProjectId本身就是子组件的props，它变化时子组件必须重渲染来同步状态，这是无法避免的（除非改成非受控模式）。

内容的提问来源于stack exchange，提问作者Mehdi Nabhani