一、理解
- state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
- 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
二、 强烈注意
- 组件中render方法中的this为组件实例对象
- 组件自定义的方法中this为undefined，如何解决？
a) 强制绑定this: 通过函数对象的bind()
b) 箭头函数
3. 状态数据，不能直接修改或更新
三、内部原理
1. render调用次数：1 n次（1是初始化的那次 n是状态更新的次数）
2. 类中的方法默认开启了局部的严格模式，阻止 this指向window
四、案例
标准写法：
代码语言：javascript复制<script type="text/babel">
//1.创建组件
class Weather extends React.Component{
//构造器调用几次？ ———— 1次
constructor(props){
console.log('constructor');
super(props)
//初始化状态
this.state = {isHot:false,wind:'微风'}
//解决changeWeather中this指向问题
this.changeWeather = this.changeWeather.bind(this)
}
//render调用几次？ ———— 1 n次 1是初始化的那次 n是状态更新的次数
render(){
console.log('render');
//读取状态
const {isHot,wind} = this.state
return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}
//changeWeather调用几次？ ———— 点几次调几次
changeWeather(){
//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log('changeWeather');
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
console.log(this);
//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>简写（推荐）：
代码语言：javascript复制 1 <script type="text/babel">
2 //1.创建组件
3 class Weather extends React.Component{
4 //初始化状态
5 state = {isHot:false,wind:'微风'}
6
7 render(){
8 const {isHot,wind} = this.state
9 return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
10 }
11
12 //自定义方法————要用赋值语句的形式 箭头函数
13 changeWeather = ()=>{
14 const isHot = this.state.isHot
15 this.setState({isHot:!isHot})
16 }
17 }
18 //2.渲染组件到页面
19 ReactDOM.render(<Weather/>,document.getElementById('test'))
20
21 </script>
