使用 React.lazy 组件防止数据更改时子项重新加载

Question

我试图拆分我的 React 组件，并允许我以动态方式加载某些部分，所以我以这种方式创建 2 个组件：

    const PluginComponent = ({ pluginComponent }) => {

    const DynamicComponent = React.lazy(() => import(`../components/${pluginComponent}.jsx`));
        const [formData, setFormData] = useState({ 
        input: '',
        output: ''
    });
        const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            [name]: value
        }))
        console.log(formData)
    };
    
    return (
        <div>
            <p>This is the {pluginComponent} plugin component.</p>
            <React.Suspense fallback={<div>Loading...</div>}>
                <DynamicComponent
                    formData={formData}
                    handleInputChange={handleInputChange}

                />
            </React.Suspense>
        </div>
    );
};
export default PluginComponent;

const ExamplePlugin = () => {
    return (
        <>
            <input name="input" defaultValue={formData.input} onChange={handleInputChange} type="text" className="grow" placeholder="name here..." />
        </>
    );
};
export default ExamplePlugin;

我的问题是，如果我将 formData 和handleInputChange 逻辑留在ExamplePlugin 中，一切都正常工作，并且数据更新没有问题，但是当我将逻辑移动到PluginComponent 并作为道具传递给子级时，每个当我更改输入值时，子级会完全重新加载，出现“正在加载”消息，并导致输入失去重新加载的焦点。

有没有办法使用父级存储数据和逻辑，允许子级将其用于输入，并防止子级在每次更改时完全重新加载？

Answer 1

如果是为了防止孩子在每次更改时重新加载

useMemo

值得尝试：

const DynamicComponent = useMemo(() => {
    return React.lazy(() => import(`../components/${pluginComponent}.jsx`));
}, [pluginComponent]);