React类组件调用语法解惑：为何无需手动实例化类？

首先要明确：JSX不是原生JavaScript，它是一种语法糖，最终会被编译成原生JS代码。

你写的<Car color="red"/>，经过Babel这类编译工具处理后，会转换成：

React.createElement(Car, {color: "red"});

接下来就是关键——React.createElement函数会帮你完成实例化的核心工作：

• 它会检查传入的第一个参数（这里是Car类）是否是React组件类
• 如果是，它会自动创建这个类的实例：new Car(props)
• 然后调用实例的render()方法，拿到返回的虚拟DOM结构
• 最后把虚拟DOM转换成浏览器能识别的真实DOM元素，挂载到页面上

所以你不用手动写new Car()，React在底层已经帮你封装了实例化、渲染的完整流程。

另外补充一个小细节：你当前的Car组件构造函数没有接收props，如果要使用外部传入的color属性，应该修改成这样：

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = {color: props.color || "red"};
  }

 render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}

这样当你传入<Car color="blue"/>时，组件就能正确使用外部传递的颜色值了。

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