React+XML组件开发疑问：为何不能直接修改this.state及构造函数调用setState？

嘿，结合你用XML解析生成React组件、频繁复用组件接收不同props的场景，我来帮你把这两个生命周期问题讲明白～

为什么不能在componentWillReceiveProps中直接修改this.state？ #

首先得明确React的核心设计逻辑：状态的更新必须通过setState()方法触发，直接修改this.state是完全不被推荐的，原因有这几点：

1. 不会触发组件重渲染：React只有在检测到setState()调用时，才会启动重新渲染流程。如果你的Video组件在componentWillReceiveProps里直接改this.state = { src: newProps.src }，React根本不知道状态变了，会导致UI还停留在旧的视频源，和新props完全不匹配——这在你复用组件、props频繁切换的场景下会直接出bug。
2. 破坏单向数据流：React的数据流是从父组件到子组件的props单向传递，组件内部状态应该基于props通过可控的方式更新。直接修改state会让状态来源变得混乱，后续调试时你根本搞不清状态是从props来的还是被直接修改的，尤其是复用同一个组件接收不同props时，排查问题会非常头疼。
3. 生命周期逻辑不可预测：componentWillReceiveProps本身是用来监听props变化的钩子，直接修改state会打乱React的生命周期执行顺序，可能导致多次不必要的渲染或者渲染时机错误。

正确的做法是在这个钩子（或者更推荐的getDerivedStateFromProps，因为componentWillReceiveProps已经被标记为过时）里调用setState()来更新状态，比如：

componentWillReceiveProps(nextProps) {
  if (nextProps.src !== this.props.src) {
    this.setState({ currentSrc: nextProps.src });
  }
}

为什么不能在构造函数中调用setState？ #

构造函数的作用是初始化组件的初始状态和绑定事件，此时组件还没有挂载到DOM树上，React的渲染流程还没开始。setState()的本质是触发组件的重新渲染，但在构造函数执行阶段，组件连第一次渲染都还没完成，调用setState()不仅不会生效，反而会浪费资源或者导致潜在的逻辑错误。

在你的Video组件里，正确的初始化方式应该是直接给this.state赋值，比如：

constructor(props) {
  super(props);
  // 直接从props初始化状态，而不是调用setState
  this.state = { currentSrc: props.src };
}

另外补充一句：如果你的组件不需要把props存在state里，其实可以直接使用props，不用维护对应的state——这样能减少状态同步的问题，尤其适合你这种同一个组件频繁接收不同props的场景。

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