React TypeScript子组件向父传值时避免重渲染问题求助

你的核心问题是父组件传递给子组件的回调函数每次渲染都会重新创建，导致React.memo判定props变化，触发子组件重渲染，进而重置内部状态（Dropdown选中值、树形展开节点）。以下是具体解决办法：

1. 用useCallback稳定回调函数引用 #

父组件中定义回调时，用useCallback包裹，确保依赖不变的情况下，函数引用始终一致。这样React.memo就能正确识别props未变化，避免子组件不必要的重渲染。

示例代码：

// 父组件
import { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [parentState, setParentState] = useState<string>('');

  // 用useCallback包裹回调，依赖数组只加必要的状态/变量
  const handleChildValueChange = useCallback((value: string) => {
    setParentState(value);
  }, []); // React保证setter引用稳定，所以这里依赖为空

  return (
    <div>
      <ChildComponent onValueChange={handleChildValueChange} />
    </div>
  );
};

// 子组件
import { memo, useState } from 'react';

interface ChildProps {
  onValueChange: (value: string) => void;
}

const ChildComponent = memo(({ onValueChange }: ChildProps) => {
  // 子组件内部维护状态：Dropdown选中值、树形展开节点
  const [selectedValue, setSelectedValue] = useState<string>('');
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);

  const handleChange = (value: string) => {
    setSelectedValue(value);
    onValueChange(value); // 向父组件传值
  };

  return (
    <div>
      <select value={selectedValue} onChange={(e) => handleChange(e.target.value)}>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
      </select>
    </div>
  );
});

export default ChildComponent;

注意：useCallback的依赖数组要准确，如果你在回调里用到了其他父组件的状态/变量，必须加到依赖数组里，避免闭包导致的旧值问题。

2. 确保React.memo的浅比较生效 #

如果子组件除了回调还接收其他props（比如对象、数组），这些引用类型每次父组件渲染都会重新创建，也会触发React.memo的重渲染。这时需要用useMemo缓存这些props：

示例：

// 父组件
const options = useMemo(() => [
  { label: '选项1', value: 'option1' },
  { label: '选项2', value: 'option2' },
], []);

return <ChildComponent options={options} onValueChange={handleChildValueChange} />;

3. 子组件内部状态独立管理 #

如果Dropdown选中值、树形展开状态不需要父组件控制，完全可以放在子组件内部维护，只把最终需要父组件处理的结果通过回调传过去，避免因为父组件状态变化导致的连锁重渲染。

4. 用useRef保存回调引用（特殊场景） #

如果回调依赖的状态频繁变化，加在useCallback的依赖数组里会导致函数引用频繁更新，可以用useRef来保存回调的最新引用：

// 父组件
const callbackRef = useRef<(value: string) => void>(() => {});

useEffect(() => {
  callbackRef.current = (value: string) => {
    setParentState(value);
    // 这里可以用到最新的父组件状态
  };
}, [parentState]); // 依赖变化时更新回调

// 传递给子组件的是一个稳定的函数，内部调用ref.current
const handleChildValueChange = useCallback((value: string) => {
  callbackRef.current(value);
}, []);

这样不管依赖怎么变，传递给子组件的handleChildValueChange引用始终不变，子组件不会因为回调变化而重渲染。

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