避免子组件更新父状态时父组件重新渲染，

Question

在我们的React应用程序中，我们有亲子成分。儿童组件调用父方法以更新父状态值。这是示例代码

// parent component

const parent = ({ items }) => {
    const [information, setInformation] = useState([]);
    const updateParentInformation = (childUpdate) => {
         setInformation(information + childUpdates)
    }
    return (
        <div>
            <div>{information}</div>
            ...
            {items.map((item) => {
                return (
                    <ChildComponent item={item} updateParentInformation={updateParentInformation} />
            )})}
        </div>
    )
}

// Child Component，

const ChildComponent = ({ item, updateParentInformation }) => {
    useEffect(() => {
        const cardInformation = calculateCardInformation(item)
        updateParentInformation(cardAmpScripts)
     }, [item])
    return (
        <div>
            .....
        </div>
    )
}

因此Child Component调用父级的updateParentInformation函数以更新父个状态，然后重新呈现父级的组件。我在这里有几个问题

1. 在某些情况下，我们可能有100-150个儿童组件，在这种情况下，我们的父母会重新渲染很多，如何避免这种情况。我们可以避免此代码

    ...。
    让回收updates = 0
    const updateParentInformation =（childUpdate）=＆gt; {
         收到updates ++
         if（接收到== items.length {
             setInformation（信息 + childupdates）
         }
    }
    

如果这是一种可能的方式，

2. ，那么我有问题2如何避免儿童组件调用父母的updateParentInformation。例如，Child 1称为UpdateParentInformation函数，同时Child 2也称为UpdateParentInformation，在这种情况下，我们可能会失去一个孩子的更新。

Answer 1

你不能避免这种情况，因为如果组件的内部状态发生变化，它总是必须重新渲染。因此，在这种情况下，您有两种可能的方法来解决性能问题：

1. 将您的子级包裹在 React.memo() 中，这样每次您的子级之一更新父级组件中的状态时，所有子级都会更新不关心并且不接收更新的状态作为道具，不会重新渲染。
2. 使用全局状态管理器（建议）。如果您有数百个使用通用状态的组件，并且可能通过 props 钻取这些状态，导致大量不必要的重新渲染，那么您肯定会受益于状态管理器，例如 Redux，这样只有使用特定状态切片的组件才会在状态更改时重新渲染。

无论如何，如果在树顶部的组件（父级）中执行繁重的计算，请始终将它们包装在 useMemo() 钩子中，函数和 useCallback( )，这样您就能够解决大部分性能问题。

关于race-condition的问题，react useState可以与这样的回调一起使用，以确保它执行时能够访问到最新的- 该时刻该状态的日期值：

const [state, setState] = useState(0)
setState(currentState => currentState + 1)