React15 - React状态同步问题解决

在 React 15 中，这个问题的核心在于 componentWillReceiveProps 生命周期中无条件地将新 props 同步到 state，导致用户修改的本地状态被覆盖。要解决这个问题，需要改变同步策略：只在必要的时候（例如数据源切换）才重置 state，否则保留用户已修改的状态。

下面提供几种可行的方案，你可以根据场景选择。

---

方案一：基于关键字段的条件同步

如果你的 props 中有一个唯一标识（如 dataId），表示当前数据源。当这个标识发生变化时，说明用户切换了数据源，应该重置 state；否则保留用户修改。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 初始化时从 props 同步到 state
    this.state = {
      ...props.initialData, // 假设初始数据
      isDirty: false, // 可选：记录用户是否修改过
    };
  }

  componentWillReceiveProps(nextProps) {
    // 只有当数据源 ID 发生变化时才重置 state
    if (nextProps.dataId !== this.props.dataId) {
      this.setState({
        ...nextProps.initialData,
        isDirty: false,
      });
    }
    // 否则不做任何事，保留用户修改的 state
  }

  handleChange = (key, value) => {
    this.setState({
      [key]: value,
      isDirty: true, // 标记用户已修改
    });
  };

  render() {
    // 渲染逻辑...
  }
}

关键点

• 通过对比 dataId 判断是否真的是新数据。
• 如果仅仅是 session 更新导致父组件重绘，而 dataId 未变，则 setState 不会被调用，用户修改得以保留。

---

方案二：利用 isDirty 标志忽略后续 props 更新

如果你希望一旦用户修改过 state，就完全不再受 props 影响（除非外部强制重置），可以使用一个标志位。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...props.initialData,
      isDirty: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    // 如果用户已经修改过 state，则忽略所有 props 更新
    if (!this.state.isDirty) {
      // 未修改时，可以更新 state
      this.setState({
        ...nextProps.initialData,
        isDirty: false,
      });
    }
    // 否则什么都不做
  }

  handleChange = (key, value) => {
    this.setState({
      [key]: value,
      isDirty: true,
    });
  };
}

适用场景

• 希望用户一旦开始编辑，数据就完全本地化，不再随外部 props 变化。
• 如果需要提供“重置”功能，可以暴露一个方法手动清空 isDirty 并重新同步 props。

---

方案三：完全受控 + 状态提升

如果可能，更好的做法是将 state 的管理提升到父组件，子组件只负责展示和触发修改回调，这样父组件可以自由决定何时更新数据，子组件完全受控，不会有“同步”冲突。

// 父组件
class Parent extends React.Component {
  state = {
    data: props.initialData, // 从外部获取初始数据
  };

  handleDataChange = (newData) => {
    this.setState({ data: newData });
  };

  render() {
    return (
      <MyComponent
        data={this.state.data}
        onDataChange={this.handleDataChange}
      />
    );
  }
}

// 子组件
class MyComponent extends React.Component {
  handleChange = (key, value) => {
    // 直接通过回调更新父组件的 state
    this.props.onDataChange({
      ...this.props.data,
      [key]: value,
    });
  };

  render() {
    // 直接使用 this.props.data 渲染
    // 不需要本地 state 存储数据
  }
}

优点

• 数据流清晰，不存在同步问题。
• 当 session 更新导致父组件重新渲染时，父组件依然保留着用户修改后的数据（因为数据已经提升到父组件的 state 中）。

---

方案四：使用 key 强制重置

如果某些情况下你确实希望重新创建组件来重置状态，可以给组件添加一个 key 属性，当需要重置时改变 key 值。但这不是保留用户修改的方案，而是相反，仅作补充说明。

<MyComponent key={someUniqueId} {...props} />

---

总结

• 推荐方案一或方案二：在 componentWillReceiveProps 中加入条件判断，避免盲目覆盖用户修改的状态。
• 如果可能，考虑方案三：将数据提升到父组件或状态管理库（如 Redux），让子组件变成纯粹的受控组件，彻底避免本地 state 与 props 的同步困扰。
• React 15 中没有 getDerivedStateFromProps，但上述条件判断的方式同样有效，并且是官方推荐的“避免将 props 复制到 state 反模式”的解决办法。

选择哪种方案取决于你的业务需求：是希望保留用户修改直到数据源切换，还是一旦编辑就不再受外部影响。