React中向子组件传递数据时如何正确管理父组件中的状态？

Question

我正在构建一个 React 应用程序，其中有一个保存状态的父组件和几个需要接收和更新此状态的子组件。我使用 props 传递状态和回调函数来更新子组件的状态。但是，我遇到的问题是状态更新没有立即反映在子组件中，或者状态变得不一致。

function ParentComponent() {
    const [data, setData] = useState([]);

    const updateData = (newData) => {
        setData(newData);
    };

    return (
        <div>
            <ChildComponent data={data} updateData={updateData} />
            <AnotherChildComponent data={data} />
        </div>
    );
}

function ChildComponent({ data, updateData }) {
    const handleClick = () => {
        const updatedData = [...data, 'New Item'];
        updateData(updatedData);
    };

    return (
        <div>
            <button onClick={handleClick}>Add Item</button>
        </div>
    );
}

function AnotherChildComponent({ data }) {
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

在 React 中管理父组件和子组件之间的状态的最佳实践是什么？ 如何确保所有子组件立即收到更新后的状态？ 这种方法是否存在任何性能问题？我该如何优化它？

Answer 1

以下是您可以考虑的最佳实践：

通过 useState 使用功能更新

使用setState中的call函数。这可确保您使用的是最新状态。

确保状态不变性

更新状态时始终确保状态不可变。在您的示例中，您已经在添加项目时使用展开运算符 (...) 创建一个新数组，这很好。

使用 useCallback 、 useMemo 避免不必要的重新渲染

传递新的 props 引用可能会导致不必要的重新渲染。在您的情况下，每次调用 updateData 函数时，它都会创建一个新数组，这很好，因为您希望更新状态。 但是，请确保子组件在使用时不会执行昂贵的操作。效果钩子或其他生命周期方法，除非状态或道具真正改变。

记忆

如果您发现由于频繁重新渲染而导致的性能问题，请考虑使用 React.memo 来记忆子组件。这可以防止它们重新渲染，除非它们的 props 发生变化。

import React, { useState, useCallback } from 'react';

function ParentComponent() {
    const [data, setData] = useState([]);

    const updateData = useCallback((newData) => {
        setData((prevData) => [...prevData, newData]);
    }, []);

    return (
        <div>
            <ChildComponent data={data} updateData={updateData} />
            <AnotherChildComponent data={data} />
        </div>
    );
}

const ChildComponent = React.memo(({ data, updateData }) => {
    const handleClick = () => {
        updateData('New Item');
    };

    return (
        <div>
            <button onClick={handleClick}>Add Item</button>
        </div>
    );
});

const AnotherChildComponent = React.memo(({ data }) => {
    return (
        <ul>
            {data.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
});

export default ParentComponent;

Answer 2

修改 updateData 函数以仅接收添加的项目并在 setData 中使用 prevState

const updateData = (newItem) => {setData((prevState) => [...prevState, newItem]);};

在子组件中仅传递您要添加的新项目