我们可以用一个实际案例去开启本节：
页面有一个标签，内容为 今天天气很炎热，当点击标签时切换为凉爽
在Vue中我们直接使用@click=‘isHot ? "炎热"’ : "凉爽"实现切换，isHot要在data里面去定义。但在React中我们如何去实现呢？
直接上代码，然后解析吧
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component {
constructor(props) {
super(props)
this.state = {
isHot: true
}
// 必须要修改this指向
this.change = this.changeWeather.bind(this)
}
render() {
return (
<h1 onClick={this.change}>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1>
)
}
changeWeather() {
this.setState(prevState => ({
flag: !prevState.isHot
}))
console.log(this.state.isHot)
}
}
ReactDOM.render(<Weather />, document.querySelector('#app'))
</script>
</body>
- 首先在
Weather类里定义构造器（constructor），继承父类的属性以及创建自己的新属性 - 声明
state，就是组件要用到的数据。名称一定要为state，这是React的规定 - 定义
render函数，创建元素以及绑定事件-
React绑定事件必须使用中括号，并且要使用this，不然会找不到方法
-
- 定义
changeWeather函数，在里面修改isHot的值，注意不能直接修改state里面的值，要使用setState方法。原因见文档- 如果此时在
onClick中绑定的是changeWeather方法，那么changeWeather中的this是undefined。原因是：只有实例对象调用原型上的方法时，this才指向实例对象。所有咱们需要更改一下this执行。用bind，因为它可以返回一个函数。官网示例
- 如果此时在
-
setState也可以直接用对象的形式赋值，并且可以只写当前改变的对象，因为setState的更新会合并。
由以上例子可以看出，React还是非常接近原生JS的，必须得有一定的JS基础才能掌握好React