面试题：React组件props的不可变性与最佳实践

Question

为什么React中props是不可变的？在实际开发中，如果需要根据props的变化更新组件的状态，应该如何做才能遵循最佳实践，避免性能问题和意外的副作用？

Answer 1

1. 为什么React中props是不可变的

• 单向数据流：React采用单向数据流模式，父组件通过props向子组件传递数据。如果props可变，就打破了这种单向性，使得数据流动变得复杂且难以追踪。例如，一个组件树中多个子组件依赖同一个props值，若props能随意改变，就难以确定数据的来源和变化路径。
• 可预测性：不可变的props使得组件的行为更可预测。给定相同的props，组件总会渲染出相同的结果。若props可变，在相同输入下，组件可能会有不同输出，导致调试和维护成本增加。
• 虚拟DOM对比：React利用虚拟DOM来高效更新真实DOM。不可变的props使React能更容易地对比前后两次渲染的差异，从而只更新必要的部分。如果props可变，React就难以判断哪些变化是真正需要更新DOM的，可能会导致不必要的DOM更新，降低性能。

2. 根据props变化更新组件状态的最佳实践

• 使用getDerivedStateFromProps（适用于类组件）：这是一个静态方法，会在组件挂载和更新时被调用。它接收props和state作为参数，根据props的变化返回新的state。例如：

import React, { Component } from 'react';

class MyComponent extends Component {
  state = {
    value: ''
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.newValue!== prevState.value) {
      return {
        value: nextProps.newValue
      };
    }
    return null;
  }

  render() {
    return <div>{this.state.value}</div>;
  }
}

• 使用useEffect（适用于函数组件）：useEffect可以在组件挂载和更新后执行副作用操作。可以通过在依赖数组中传入相关props，来监听props的变化并更新状态。例如：

import React, { useState, useEffect } from'react';

const MyFunctionComponent = (props) => {
  const [value, setValue] = useState('');

  useEffect(() => {
    setValue(props.newValue);
  }, [props.newValue]);

  return <div>{value}</div>;
};

• 避免不必要的更新：在上述方法中，通过条件判断（如getDerivedStateFromProps中的比较、useEffect依赖数组的设置），确保只有在props真正发生相关变化时才更新状态，避免不必要的重新渲染，从而防止性能问题和意外副作用。例如，如果组件中某个props频繁变化但对组件状态没有影响，就不应将其放入useEffect的依赖数组中。