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

Question

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

这是我的样本https://plnkr.co/edit/6nKaKrgNIF7LSetN 正如您所看到的，当我更改 Parent 中的标题或 Child1 中的描述时，Child2 不会重新渲染，但是当我更改 Child2 中的状态时，整个列表都会重新渲染，并且状态更新会产生一些副作用。

父组件。它包含标题和 . 对于 Child1 onChange，我收到了我想要更新其状态的 prop 和它的 value。我使用 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;
                        }
                    );
                }
                , []
                )
            }

        />
    </>
}

然后在 Child1 中用 React.memo 包裹。它还将 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 的状态。更新Parent的状态将触发重新渲染。 Child1 重新渲染，因为它的

data

道具正在改变（改变道具也会触发重新渲染）。

尝试在 Parent 和 Child1 的 useCallback 函数中的依赖项数组中传递

title

，看看是否有效。这应该使 onChange 函数看起来正在“改变”，从而触发组件树的重新渲染。