React类属性与ES6类属性的差异及语法疑问

嘿，这个问题问得特别到位！其实React类本身并没有区别于ES6类的特殊语法，你看到的差异完全是工具链带来的~

核心原因：类字段语法的提案与转译 #

ES6（ES2015）的类规范里，确实不支持直接在类体中写tagLine = "Super Hero"这种类属性——这种写法属于类字段语法，一开始只是ECMAScript的一个提案，并没有被纳入ES6标准。

而React项目在早期（比如React 16.2的时代）通常会搭配Babel来做代码转译，并且默认开启了@babel/plugin-proposal-class-properties插件。这个插件的作用就是把还没进入标准的类字段语法，转译成ES6兼容的代码：

比如你写的React组件代码：

class Header extends React.Component {
  tagLine = "Super Hero";
  render() {
    return <div>{this.tagLine}</div>;
  }
}

经过Babel转译后，会被转换成标准ES6的写法：

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.tagLine = "Super Hero";
  }
  render() {
    return React.createElement("div", null, this.tagLine);
  }
}

现在的变化 #

后来类字段语法在ES2022中正式成为了标准，所以现在只要你的运行环境（比如现代浏览器、Node.js 16+）支持ES2022及以上版本，不管是普通ES6类还是React组件类，都可以直接写tagLine = "Super Hero"这种类属性了。

总结一下：React没有特殊语法，只是早期借助Babel插件提前支持了当时还未标准化的类字段写法，才造成了这种“差异”的错觉~

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