React Native中两种类组件State声明方式的差异是什么？

嘿，我来给你拆解这两种React Native类组件里声明state的写法差异，本质上是ES6+类字段语法和传统构造函数写法的区别，具体差异如下：

1. 语法简洁度与底层逻辑 #

• 写法一（类字段语法）是ES6之后推出的语法糖，帮你省略了constructor和super(props)的冗余写法，直接在类的顶层声明state实例属性，代码更简洁直观，读起来也更顺畅。
• 写法二是ES6类的标准写法，必须通过constructor构造函数完成初始化，而且必须先调用super(props)才能访问this——否则会抛出ReferenceError，因为父类构造函数还没执行，子类的this还未被初始化。

2. 初始化state时访问props的差异 #

• 在写法一中，你可以直接在state初始化里访问this.props：

  state = { fListData: this.props.initialData || [] }
  

  这是因为类字段的初始化时机是在super(props)调用之后（底层自动帮你处理了这一步），所以this.props已经处于可用状态。
• 在写法二中，必须确保先调用super(props)，之后才能通过this.props初始化state；当然你也可以直接用传入的props参数，效果完全一致：

  constructor(props) {
    super(props); // 必须先调用，否则this.props不可用
    this.state = { fListData: props.initialData || [] }
  }
  

3. 兼容性与编译依赖 #

• 写法一的类字段语法属于ES2022的标准特性，在旧版的React Native打包环境（比如配置较老的Babel）中，可能需要额外开启@babel/plugin-proposal-class-properties插件才能正常编译。
• 写法二是ES6的基础标准语法，所有支持ES6类的环境都能直接运行，兼容性拉满，不需要额外的编译配置。

总结 #

两种写法最终实现的效果完全一致——都是给组件实例初始化state对象。写法一更简洁现代，写法二更贴近ES6类的原生逻辑、兼容性更广。你可以根据项目的Babel配置和团队代码规范来选择合适的写法。

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