如何避免父组件渲染时重新挂载子组件并重置其状态？

问题根源 #

你用useMemo包裹Child组件的JSX是错误的用法：当formData变化时，useMemo会重新执行并返回一个新的Child元素实例，React会判定这是一个全新的组件，因此卸载旧的Child并挂载新的，直接导致内部状态重置。

正确写法 #

直接在Father的返回JSX中渲染Child，同时用useCallback缓存传递给子组件的回调函数，避免不必要的重渲染：

import { useState, useCallback } from 'react';

const Father = () => {
    const [formData, setFormData] = useState(null);

    // 用useCallback缓存回调，确保每次传递给Child的是同一个引用
    const handleSetDefaultFormData = useCallback((value) => {
        setFormData(value);
    }, []); // setFormData是useState返回的稳定函数，无需加入依赖

    return (
        <>
            <Child setDefaultFormData={handleSetDefaultFormData} />
        </>
    );
};

export default Father;

额外优化（可选） #

如果Child组件存在不必要的重渲染，可以给Child加上React.memo优化，配合useCallback的props，进一步减少性能消耗：

const Child = React.memo(({ setDefaultFormData }) => {
    // Child组件的内部逻辑
});

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