React组件重复渲染致DOM销毁问题求解（react-chatbot-kit场景）

问题核心在于：每次渲染时customComponents.header被创建为新的箭头函数，React会将其识别为全新组件，进而销毁原有子树DOM与状态。要解决这个问题，关键是保持header组件函数的引用稳定，以下是两种可行方案：

方案一：组件函数定义在父组件外部（无内部依赖时） #

如果自定义组件Component2不需要依赖Component1的内部状态或props，直接将header组件函数定义在父组件外部，确保引用始终不变：

const Component2 = (props) => {
    return (
        <div>
            {props.data}
        </div>
    );
}

// 固定引用的header组件函数，定义在父组件外部
const headerComponent = (props) => <Component2 {...props} />;

const Component1 = (props) => {
    const onSubmitHandler = useCallback(() => {
        const config = {
            customComponents: {
                header: headerComponent
            }
        }

        // 执行提交逻辑
    }, []);
}

方案二：用useCallback缓存组件函数（有内部依赖时） #

如果Component2需要使用Component1的内部状态或props，使用useCallback缓存header函数，仅在依赖项变化时重新创建：

const Component2 = (props) => {
    return (
        <div>
            {props.data}
        </div>
    );
}

const Component1 = (props) => {
    // 示例：父组件内部状态
    const [extraData, setExtraData] = useState('');

    // 缓存header函数，依赖项为需要传递给子组件的状态/props
    const headerComponent = useCallback((props) => {
        // 合并父组件状态与传入的props
        return <Component2 {...props} extraData={extraData} />;
    }, [extraData]);

    const onSubmitHandler = useCallback(() => {
        const config = {
            customComponents: {
                header: headerComponent
            }
        }

        // 执行提交逻辑
    }, [headerComponent]);
}

原理说明 #

React通过引用比较判断组件是否为同一个实例。只要header组件函数的引用保持稳定，react-chatbot-kit就会识别为同一个组件，仅更新组件内部的props变化，而不会销毁重建整个DOM子树与状态。

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