使用 React.memo 和 useCallback 时 State 未正确更新

Question

我的问题很常见，但要弄清楚我的示例有什么问题并不容易。 我有嵌套组件 Parent->Child1->Child2。 State 和 setState 在 props 中传递给子组件。 我想避免在更新父组件时重新渲染子组件，并且我想避免在仅更改一项时重新渲染整个列表。

这是我的示例https://plnkr.co/edit/6nKaKrgNIF7LSetN正如您所看到的，当我更改 Parent 中的标题或 Child1 中的描述时，Child2 不会重新呈现，但是当我在 Child2 中更改 state 时，整个列表是重新渲染加上 state 更新有一些副作用。

父组件。 它包含标题和。 对于 Child1 onChange，我收到了我想在 state 中更新的道具和它的价值。 我使用 useCallback 钩子来避免子组件中的额外重新渲染，你会在那里看到 React.memo

const Parent = ({ initialData }) => {
    const [data, setData] = React.useState(initialData);
    console.log('render Parent');
    return <>
         <h2>Parent</h2>

        <input
            placeholder="title"
            value={data.title}
            onChange={
                React.useCallback((e) => {
                     setData(prev => ({ ...prev, title: e.target.value }))
                }, [])
            }
        />
        <br />
        <Child1
            data={data}
            onChange={
                React.useCallback((prop, value) => {
                    setData(
                        prev => {
                            prev[prop] = value;
                            const newState = { ...prev };
                            return newState;
                        }
                    );
                }
                , []
                )
            }

        />
    </>
}

然后在用 React.memo 包裹的 Child1 中。 它还在列表中呈现 Child2。

        const Child1 = React.memo(
            ({ data, onChange }) => {
                console.log('render Child1');
                return <>
                    <h3>Child1</h3>

                    <input
                        placeholder="description"
                        value={data.description}
                        onChange={(e) => { onChange('description', e.target.value) }}

                    />
                    <br />
                    <br />
                    <br />
                    {data.list.map((element, index) => {
                        return <Child2
                            key={index} // don't do this in real
                            index={index}
                            data={element}
                            onChange={
                                React.useCallback(
                                    (prop, value) => {
                                        const newList = data.list.map((e, i) => {
                                            let newItem = { ...e };
                                            if (i == index) {
                                                newItem[prop] = value;
                                            }
                                            return newItem;
                                        });
                                        onChange('list', newList);
                                    }
                                    ,
                                    []
                                )
                            }
                        />
                    })}

                </>

            }
        )

Child2 在列表中呈现

        const Child2 = React.memo(({ index, data, onChange }) => {
            console.log('render Child2', index);
            return (

                <>
                    <h4>Child2</h4>

                    Country: <br />
                    <input
                        placeholder="country"
                        value={data.country}
                        onChange={(e) => onChange('country', e.target.value)}
                    />
                    <br />
                    <br />
                    Region: <br />
                    <input
                        placeholder="region"
                        value={data.region}
                        onChange={(e) => onChange('region', e.target.value)}
                    />
                    <br />
                    <br />
                    City: <br />
                    <input
                        placeholder="city"
                        value={data.city}
                        onChange={(e) => onChange('city', e.target.value)}
                    />

                    <hr />

                </>

            )
        }

        )

Answer 1

Child2 中的onChange正在从 Parent 调用setData ，这会更新 Parent 的 state。 更新 Parent 的 state 将触发重新渲染。 Child1 重新渲染是因为它的data prop 正在改变（改变 props 也会触发重新渲染）。

尝试在 Parent 和 Child1 的 useCallback 函数中传递您的依赖项 arrays 中的title ，看看是否有效。 这应该使 onChange function 看起来正在“改变”，这应该会触发组件树的重新渲染。