面试题：React 中如何确保数据不变性以助力性能优化

Question

在 React 项目中，假设你有一个包含用户信息的数组对象，你需要在不改变原数组的情况下，为某个用户添加新的联系方式，请写出实现代码，并简要说明这样做对性能优化有什么作用。

Answer 1

实现代码

假设 users 是包含用户信息的数组对象，userId 是要添加联系方式的用户的唯一标识，newContact 是新的联系方式。

import React from 'react';

const users = [
  { id: 1, name: 'Alice', contacts: [] },
  { id: 2, name: 'Bob', contacts: [] }
];

const userId = 1;
const newContact = '[e-mail]';

const newUsers = users.map(user => {
  if (user.id === userId) {
    return {
     ...user,
      contacts: [...user.contacts, newContact]
    };
  }
  return user;
});

console.log(newUsers);

性能优化作用

1. 不可变数据结构：通过不改变原数组，而是创建新的数组和对象，利用了 React 的不可变数据特性。React 可以更高效地进行差异比较（diffing），这是 React 虚拟 DOM 算法的核心。如果数据是可变的，React 很难判断数据是否真正发生了变化，可能会导致不必要的重新渲染。
2. 纯函数使用：map 方法是一个纯函数，它不会产生副作用且对于相同的输入始终返回相同的输出。这使得代码更易于理解、测试和维护，同时也有助于 React 的性能优化，因为 React 可以依赖纯函数的特性进行优化。
3. 局部更新：在实际应用中，如果这个数组对象是 React 组件的状态，这种方式能够确保只有涉及到的部分数据发生变化，从而触发局部更新，而不是整个组件的重新渲染，提高了渲染性能。