React中不使用constructor直接初始化组件state是否为推荐方式？

问题 #

我在一些ReactJS课程中看到如下示例：不使用constructor，直接初始化组件state。代码示例：

class App extends React.Component { 
  state = { text: 'hello world' } 
  render() { 
    return <div><h4>{this.state.text}</h4></div> 
  } 
} 
ReactDOM.render(<App/>,document.getElementById('root')) 

配套的页面代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
<div id="root"></div>

请问这种不通过constructor包裹直接初始化组件state的方式是否推荐？

回答 #

嘿，这个问题问得很到位！这种直接在类字段中初始化state的方式完全是推荐使用的，而且是React官方认可的标准写法之一，理由如下：

• 语法合规，简洁直观
  这是ES6+纳入标准的类字段声明语法，相比传统在constructor里写this.state = {...}的方式，它省去了冗余的constructor定义和super()调用（当组件不需要额外初始化逻辑时），代码更清爽，可读性也更强。

• React官方明确支持
  React官方文档早已将这种写法列为类组件初始化state的推荐方案，它和constructor内初始化state的效果完全一致——React会在组件实例化阶段正确识别并处理这个state字段，不存在任何生命周期或性能上的差异。

• 仅在特定场景需要回退到constructor
  当然，不是说constructor就没用了，如果你需要做这些操作，还是得写constructor：

  • 执行复杂的初始化逻辑（比如依赖多个props计算state、订阅外部事件、初始化第三方库实例等）
  • 手动绑定事件处理函数（不过现在也可以用箭头函数类字段handleClick = () => {...}来替代，同样不需要constructor）

• 兼容性无需担心
  你示例里用的React 15.x版本已经支持这种写法了，只要你的项目使用主流构建工具（比如Create React App、Vite、Webpack），或者针对现代浏览器开发，都不需要额外配置；如果是超老旧的项目，只需要添加@babel/plugin-proposal-class-properties插件转译即可。

总的来说，这种直接初始化state的方式是现代React类组件的最优写法之一，代码简洁且没有任何弊端，放心使用就好！

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