案例要求:通过点击文字 “今天天气很炎热”转变成“今天天气很寒冷”,再点击又转变
萌新作者在线卑微记录自己学习React的历程
代码及笔记 来自 尚硅谷学习视频
先来看看使用构造器的方法来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>state</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom.用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" >
// 1.创建组件
class Weather extends React.Component{
//构造器调用了几次 -- 1次
constructor(props){
super(props)
//初始化状态(必须要调用super,不然会报错)
this.state = {isHot:false}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用了几次 -- 1+n次 1是初始化的那次 n是状态更新的次数
render(){
//读取状态
const {isHot} = this.state
return <h1 onClick = {this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
}
//changeWeather 调用几次 -- 点几次调几次
changeWeather(){
//console.log('this');
//changeWeather放在哪里?————Weather的原型对象上,供实例使用
//由于changeWeather是作为onclick的回调,所以不是通过实例调用,是直接调用
//类中的方法默认开启了局部的严格模式,所以changeWeather中的this为undefined
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意:状态(state)不可直接更改,下面这行就是直接更改
//this.state.isHot = !isHot //这是错误的写法
//严重注意:状态必须通过setState进行更新,且更新是一种合并,不是替换
this.setState({isHot:!isHot})
}
}
// 2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
我们发现,为了成功让点击事件调用changeWeather,不得不时刻关注它的this指向,最后还是要通过bind的方法将this保存下来,十分的麻烦
而当我们不使用构造器,并充分利用箭头函数的特性时,就可以将代码简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>state</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom.用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel" >
// 创建组件
class Weather extends React.Component{
//初始化状态
state = {isHot:false}
render(){
const {isHot} = this.state
return <h1 onClick = {this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
}
//自定义方法 -- 要用赋值语句的形式+箭头函数
changeWeather = ()=>{
const isHot = this.state.isHot
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>