React两种state初始化方式有什么区别？该如何选型？

本质差异：几乎为语法糖，仅存在极细微执行顺序区别 #

方式二的类属性声明是ES2022正式纳入标准的公共类字段语法，经Babel等编译工具转译后，本质和方式一的constructor内赋值逻辑几乎一致，执行时机固定在super(props)调用完成后、constructor内部其他代码执行前。
如果同时使用两种方式声明state，constructor内的this.state赋值会覆盖类属性的声明，因为constructor内部代码执行时机更晚。普通业务场景下二者的运行效果完全没有区别。

优劣势对比 #

• 方式二（类属性直接声明）优势
  • 语法更简洁，无需手动编写constructor、super调用的样板代码，冗余度低
  • state定义位置集中在组件顶部，可读性更强，接手项目的开发者可以快速定位到所有状态定义
  • 无需手动给super传props，不会出现constructor内访问this.props为undefined的低级错误
• 方式二（类属性直接声明）局限性
  • 属于较新的JS语法，极端老旧的无Babel编译配置的项目无法直接运行
  • 无法在初始化state前执行自定义逻辑，state初始值只能写固定值或者直接依赖外部可访问的变量
• 方式一（constructor内初始化）优势
  • 原生ES6语法支持，不需要额外编译配置，兼容性拉满
  • 灵活性更高，初始化state前可以执行任意自定义逻辑，比如props校验、参数计算，还可以同时完成事件绑定、实例属性初始化等其他操作，示例如下：

    constructor(props) {
      super(props)
      // 先做自定义计算逻辑
      const initBar = props.userType === 'admin' ? 10 : 0
      // 再初始化state
      this.state = { bar: initBar }
      // 同步完成事件绑定
      this.handleChange = this.handleChange.bind(this)
    }
    

• 方式一（constructor内初始化）劣势
  • 样板代码多，多了很多固定格式的冗余代码
  • 新手容易忘记给super传props，导致constructor内访问this.props异常的问题

场景选择建议 #

• 90%以上的常规业务场景优先选择方式二，代码更简洁易维护，是目前社区的主流写法
• 出现以下场景时选择方式一：
  • 项目无ES2022语法编译支持，需要兼容原生ES6环境
  • state初始值需要依赖前置逻辑计算，或者需要在初始化state的同时完成其他组件初始化操作

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