React构造函数中为何不能用this.state.xxx赋值替代this.state={}？

直接给this.state的属性单独赋值无法让组件正常渲染，而通过this.state = {...}整体赋值却可以，核心原因和异步无关，是React对state初始化的机制要求：

• React组件的state是一个被React内部追踪的特殊对象，在构造函数中，必须通过一次性赋值完整对象的方式完成初始化。直接修改this.state.onlyStocked这类属性，相当于操作了一个未被React正确初始化的普通对象，React不会把这些属性识别为组件的状态，自然也不会基于这些值触发渲染。
• 构造函数是唯一允许直接给this.state赋值的地方，但必须是整体替换，而不是逐个修改属性。这种写法能让React正确绑定这个对象作为组件的初始状态，后续的状态更新（通过setState）才能正常触发组件重渲染。

举个直观对比：
错误写法（无法触发渲染）：

constructor(props) {
    super(props);
    this.state.onlyStocked = false;
    this.state.filteredText = '';
}

正确写法（正常运行）：

constructor(props) {
    super(props);
    this.state = {
        onlyStocked : false,
        filteredText : '',
    }
}

简单说：初始化state就得给this.state直接扔个完整对象，别拆开来改属性，这是React的规则，和异步更新没关系。

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