面试题：React 中不可变性与 Props 结合时对性能优化的影响

不可变性原则在 React 项目性能优化中的作用

减少不必要的重渲染：
- 在 React 中，当组件的 props 或 state 发生变化时，默认会触发重渲染。如果 props 数据是可变的，React 很难判断数据是否真的改变，可能会导致不必要的重渲染。例如，假设有一个 User 组件接收 userInfo 对象作为 props，如果 userInfo 是可变的，即使对象内部的属性没有变化，只是对象的引用没有改变，React 可能仍会认为 props 改变了而触发重渲染。
- 遵循不可变性原则，每次 props 数据变化时都创建新的对象或数组等数据结构。这样 React 可以通过简单地比较新旧 props 的引用，快速判断 props 是否真的发生了变化。例如，使用 Object.assign({}, oldUserInfo, {name: 'newName'}) 或 {...oldUserInfo, name: 'newName'} 创建新的 userInfo 对象，当新对象的引用与旧对象不同时，React 才会认为 props 有变化，从而避免了不必要的重渲染。
内存管理与性能：
- 不可变数据结构使得内存管理更加高效。因为不可变数据不会被修改，它们可以被安全地共享。例如，多个组件可能使用同一个不可变对象作为 props，如果其中一个组件需要修改部分数据，会创建一个新的对象，而不会影响其他使用该数据的组件，这样减少了内存的开销，提高了性能。

shouldComponentUpdate 或 React.memo 与不可变性和 Props 的关系及性能提升

shouldComponentUpdate：
- shouldComponentUpdate 是 React 类组件中的生命周期方法，它接收 nextProps 和 nextState 作为参数。开发人员可以在这个方法中手动编写逻辑来判断组件是否需要更新。
- 结合不可变性原则，当 props 遵循不可变性时，在 shouldComponentUpdate 中可以简单地通过比较新旧 props 的引用（对于对象和数组等复杂数据结构）来判断是否需要更新。例如：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.someProp!== nextProps.someProp;
  }
  render() {
    return <div>{this.props.someProp}</div>;
  }
}

如果 someProp 是不可变的，这种简单的引用比较就能准确判断 props 是否变化，避免不必要的重渲染。

React.memo：
- React.memo 是 React 提供的高阶组件，用于函数式组件的性能优化。它会浅比较组件的 props，如果 props 没有变化（通过浅比较），则不会触发重渲染。
- 同样依赖于不可变性原则，因为浅比较对于不可变数据结构能更有效地判断 props 是否改变。例如：

const MyFunctionalComponent = React.memo((props) => {
  return <div>{props.someProp}</div>;
});

如果 props.someProp 是不可变的，React.memo 的浅比较就能快速判断 props 是否改变，从而提升性能。如果 props 是可变的，浅比较可能无法准确判断数据是否真的改变，导致不必要的重渲染。

星途面试题库

面试题：React 中不可变性与 Props 结合时对性能优化的影响

知识考点

面试题答案

不可变性原则在 React 项目性能优化中的作用

shouldComponentUpdate 或 React.memo 与不可变性和 Props 的关系及性能提升