React类组件是一种使用ES6类语法定义的React组件。它是早期版本中用于构建React应用的主要方式，但现在更加建议使用函数组件进行开发。但是简单尝试类组件来实现一个简单案例也无可厚非，增进自己对于React框架的理解。
1.首先，在HTML中引入了React和React DOM的开发版本的CDN链接。这些链接使你能够在浏览器中使用React库。
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
2.接下来，引入了Babel的CDN链接，它会在浏览器中将JSX代码转换为可执行的JavaScript代码。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
3.在标签中，你创建了一个具有id="root"的
，这是React应用的根元素。
<div id="root"></div>
4.在JavaScript部分
class App extends React.Component {
// 组建数据
constructor() {
super()
this.state = {
message: "Hello World",
name: "weihy"
}
this.btnClick = this.btnClick.bind(this) //非常重要
}
btnClick() {
console.log('btnClick', this)
this.setState({
message: "Hello React"
})
}
// 渲染内容 render
render() {
return (
<div>
<h2>{this.state.message}</h2>
<button onClick={this.btnClick}>修改文本</button>
</div>
)
}
}
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<App/>)
- 首先定义了一个名为App的React类组件。在构造函数中，你使用super()调用父类的构造函数，然后通过this.state初始化了组件的状态，包含了message和name两个属性。通过使用bind方法，将this绑定到btnClick方法，确保在该方法中正确引用组件实例。log出的this信息如下：可以看到this正确绑定到了App实例。
this.btnClick = this.btnClick.bind(this)非常重要，由于该标签利用babel进行语法转换，因此默认开启了严格模式，如果不对this进行处理的话，那么this将默认指向undefined。调用undefined的方法，自然会报错。
- 在btnClick方法中，你使用console.log输出当前函数的this值，并使用this.setState方法更新组件的状态，将message修改为"Hello React"。
- 接下来，定义了render方法，负责渲染组件的内容。在render方法中，你使用JSX语法返回一个包含文本和按钮的元素，并使用this.state.message来访问组件的状态。通过在按钮上绑定onClick事件处理函数this.btnClick，实现点击按钮时调用btnClick方法。
- 在代码的末尾，通过ReactDOM.createRoot方法创建了一个根节点，并使用root.render方法将组件渲染到根节点上。
