引入
part009通过将原型对象上的changeWeather函数bind了Weather实例,修改this指向并赋值给Weather实例中的changeWeather函数,让changeWeather事件成功修改了state中isHot的值。然鹅“炎热”并没有变成“凉爽”,这章来解决state修改,页面即时渲染的问题
ok为了修改state,我们复习了类class、this指向、原型链、事件绑定,结果state修改,React竟然他喵的不买账,好家伙让我们来看看React本身对状态改变是怎么要求的。
复盘
React创建组件的常用方式是创建类式组件,并且继承自React.Component类,继承了state、props等,那么同样继承了React自定义的一些方法,我们可以顺着原型链看看React中通过什么方法来实现状态更新。
好家伙setState这小东西一听就像是用来修改状态啊
快试试setState
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 准备好容器 -->
<div id="test"></div>
<!-- 引入依赖 ,引入的时候,必须就按照这个步骤-->
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!--这里使用了babel用来解析jsx语法-->
<script type="text/babel">
// 1.创建组件
class Weather extends React.Component{
constructor(props){
super(props)
this.state={
isHot:true
}
this.changeWeather = this.changeWeather.bind(this)
}
render(){
console.log(this)
const {isHot} = this.state
return (
<h1 id="span" onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
)
}
changeWeather(){
console.log(this)
const {isHot} = this.state
// 注意:状态state不可直接修改 必须通过setState进行更新 且更新是一种合并不是替换
this.setState({isHot:!isHot})
}
}
// 2.渲染,如果有多个渲染同一个容器,后面的会将前面的覆盖掉
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
牛啊牛啊
state简写
长吁一口气终于解决了 然鹅这种写法总觉得不友好 构造器+属性声明+this指向 一整个的冗余啊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
// 1.创建组件
class Weather extends React.Component{
// constructor(props){
// super(props)
// this.state={
// isHot:true
// }
// this.changeWeather = this.changeWeather.bind(this)
// }
state={
isHot:true
}
render(){
const {isHot} = this.state
return (
<h1 id="span" onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
)
}
// changeWeather(){
// const {isHot} = this.state
// this.setState({isHot:!isHot})
// }
// 自定义方法 要用赋值语句的形式+箭头函数
// 类中可以直接写赋值语句 取代写在构造器里
// 箭头函数里不存在this 会找函数体的外层 可不就是Weather实例 取代bind做this绑定
changeWeather=()=>{
const {isHot} = this.state
this.setState({isHot:!isHot})
}
}
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>
赋值语句+箭头函数取代构造器声明+this指向+自定义函数,这下构造器就可以pass了,赋值语句yyds
总结
- state是组件对象最重要的属性,值是对象可以包含多个key-value的组合
- 组件被称为‘状态机器’,通过更新组件的state来更新对应的页面显示(重新渲染组件)
- 组件中render方法中的this为组件的实力对象
- 组件自定义方法中的this值为undefined,如何解决:
a. 强制绑定this:通过函数对象的bind()
b. 箭头函数+赋值语句 - 状态数据不能直接修改或更新