React组件初始状态基于Props，为何Props更新后状态未同步？

嘿，这问题其实挺常见的，我来给你拆解清楚～

问题根源 #

你用类组件的class fields语法初始化state：

state = { stateValue: this.props.VALUE }

不管是这种写法，还是旧的getInitialState方法，只会在组件第一次挂载的时候执行一次。当父组件更新props时，组件虽然会重新render，但这个初始赋值代码不会再跑一遍，所以state里的stateValue就停留在了第一次挂载时的props值，不会自动跟着新props变化。

你猜的异步特性其实和这个问题无关——异步是setState的更新机制，但这里根本没触发state的更新操作，自然不会同步。

解决方案 #

要实现props更新时同步state，有两种常用的类组件生命周期方法可以用：

1. 使用componentDidUpdate（适合简单场景）

这个生命周期会在组件props/state更新、完成重新渲染后触发，我们可以在这里判断props是否变化，手动更新state：

class AttachStateToProps extends React.Component {
  state = { stateValue: this.props.VALUE }

  componentDidUpdate(prevProps) {
    // 一定要加条件判断！避免无限循环
    if (prevProps.VALUE !== this.props.VALUE) {
      this.setState({ stateValue: this.props.VALUE })
    }
  }

  render() {
    console.log('Value of Prop - ', this.props.VALUE)
    console.log('Value of State - ', this.state.stateValue)
    return null
  }
}

2. 使用getDerivedStateFromProps（官方推荐的规范写法）

这是React专门为「props同步到state」场景设计的静态生命周期，它会在组件挂载和每次更新前触发，返回需要更新的state对象（或null表示不更新）：

class AttachStateToProps extends React.Component {
  state = { stateValue: this.props.VALUE }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 判断新props和旧state是否不同，返回新state
    if (nextProps.VALUE !== prevState.stateValue) {
      return { stateValue: nextProps.VALUE }
    }
    return null
  }

  render() {
    console.log('Value of Prop - ', this.props.VALUE)
    console.log('Value of State - ', this.state.stateValue)
    return null
  }
}

额外提醒 #

如果你的场景里，stateValue只是单纯用来展示props的值，其实完全没必要存在state里——直接在render里用this.props.VALUE就好，能减少不必要的状态同步逻辑～

内容的提问来源于stack exchange，提问作者Fatah