React父子组件为何触发无限渲染循环？

无限循环的根源 #

1. 父组件initialValues引用不稳定：每次父组件渲染时，initialValues={[4,5]}都会创建一个全新的数组实例，导致子组件接收的initialValues props引用发生变化，触发监听该props的useEffect。
2. 子组件重复更新状态：子组件中监听initialValues的useEffect会把initialValues的元素追加到values中，更新values后触发另一个useEffect调用onChange，父组件执行setChildState触发重渲染，再次生成新的initialValues数组，形成闭环循环。
3. 无限制的父组件同步：只要values变化就通知父组件，进一步放大了循环的触发频率。

解决步骤 #

1. 稳住initialValues的引用 #

父组件里不要直接写initialValues={[4,5]}，要么把它定义成组件外的常量，要么用useMemo缓存，确保每次父组件渲染时，initialValues的引用不变：

方案1：定义为外部常量

const INITIAL_VALUES = [4, 5];

function Parent() {
    const [childState, setChildState] = useState([]);

    const handleMasterChange = (values) => {
      setChildState(values);
    };

    return (
      <Child initialValues={INITIAL_VALUES} onChange={handleMasterChange} />
    );
}

方案2：用useMemo缓存

function Parent() {
    const [childState, setChildState] = useState([]);
    // 空依赖数组确保只初始化一次
    const initialValues = useMemo(() => [4, 5], []);

    const handleMasterChange = (values) => {
      setChildState(values);
    };

    return (
      <Child initialValues={initialValues} onChange={handleMasterChange} />
    );
}

2. 修复子组件的状态更新逻辑 #

原来的逻辑会重复把initialValues的元素追加到values里，改成以initialValues为基础，结合用户新增的内容生成完整的values，避免重复添加：

function Child({initialValues, onChange}) {
    const [count, setCount] = useState(0);
    // 初始值直接用initialValues
    const [values, setValues] = useState([...initialValues]);

    const handleChange = () => {
      const nextCount = count + 1;
      // 基于initialValues和当前计数生成新的values，避免依赖旧状态
      const newValues = [...initialValues, ...Array.from({length: nextCount}, (_, i) => i + 1)];
      setValues(newValues);
      setCount(nextCount);
    };

    useEffect(() => {
      onChange(values);
    }, [values]);

    // 当initialValues变化时，重新生成完整的values
    useEffect(() => {
      const newValues = [...initialValues, ...Array.from({length: count}, (_, i) => i + 1)];
      setValues(newValues);
    }, [initialValues, count]);


    return (
      <View>
        {values.map(v => <Text key={v}>{v}</Text>)}
        <Button onPress={handleChange}>Add</Button>
      </View>
    );
}

3. 可选：减少不必要的父组件同步 #

如果不需要每次values变化都立即通知父组件，可以加个判断，比如用useRef记录上次通知的值，避免重复触发：

function Child({initialValues, onChange}) {
    // ... 其他代码不变
    const prevValuesRef = useRef([]);

    useEffect(() => {
      // 浅比较不行的话可以用JSON.stringify，或者根据实际场景做深比较
      if (JSON.stringify(values) !== JSON.stringify(prevValuesRef.current)) {
        onChange(values);
        prevValuesRef.current = values;
      }
    }, [values]);
    // ... 其他代码不变
}

这样修改后，既能保留父组件传递初始值、子组件状态同步回父组件的功能，又彻底解决了无限循环的问题。

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