面试题：React 中如何通过不可变性原则来管理 Props 数据变化

Question

在 React 应用中，假设我们有一个父组件向子组件传递了一个包含数组的 Prop。请阐述如何通过不可变性原则来处理这个数组 Prop 的更新，以确保 React 能够正确检测到变化并更新视图。请给出具体的代码示例，展示不可变数据的创建和传递过程。

Answer 1

1. 不可变性原则概述：
   • 在 React 中，不可变性原则要求我们不要直接修改原始数据，而是创建新的数据副本并修改副本。这样 React 能够通过引用比较（===）检测到数据变化，从而正确更新视图。
2. 处理包含数组的 Prop 更新：
   • 假设父组件向子组件传递一个数组 items 作为 Prop。
   • 父组件代码如下：

import React, { useState } from'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
    const [items, setItems] = useState(['item1', 'item2', 'item3']);

    const handleUpdate = () => {
        // 创建新数组副本，添加新元素
        const newItems = [...items, 'new item'];
        setItems(newItems);
    };

    return (
        <div>
            <ChildComponent items={items} />
            <button onClick={handleUpdate}>Update Items</button>
        </div>
    );
};

export default ParentComponent;

• 子组件代码如下：

import React from'react';

const ChildComponent = ({ items }) => {
    return (
        <ul>
            {items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
};

export default ChildComponent;

在上述代码中：

• 父组件使用 useState 来管理 items 数组状态。
• 当点击按钮触发 handleUpdate 函数时，通过展开运算符 ... 创建了 items 的新副本，并添加了新元素，然后使用 setItems 更新状态。
• 子组件接收 items Prop 并渲染列表。由于新数组和旧数组引用不同，React 能够检测到变化并更新视图。