我们可以用一个实际案例去开启本节:
页面有一个标签,内容为 今天天气很炎热,当点击标签时切换为凉爽
在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