Class组件

ES6 的加入让 JavaScript 直接支持使用 class 来定义一个类，react 创建组件的方式就是使用的类的继承，ES6 class 是目前官方推荐的使用方式，它使用了 ES6 标准语法来构建，看以下代码：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render () {
        return (
            <h1>欢迎进入React的世界</h1>
        )
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

es6 class 组件其实就是一个构造器,每次使用组件都相当于在实例化组件，像这样：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render () {
        return (
            <h1>欢迎进入{this.props.name}的世界</h1>
        )
    }
}

const app = new App({
    name: 'react'
}).render()

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(app)