react复习之组件state

「这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战」

定义:

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合), 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

state简写方式

//1.创建组件
class Weather extends React.Component{
//初始化状态
    state = {isHot:false,wind:'微风'}
    render(){
        const {isHot,wind} = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
}

//自定义方法————要用赋值语句的形式+箭头函数
changeWeather = ()=>{
    const isHot = this.state.isHot
    this.setState({isHot:!isHot})
  }
}
//2.渲染组件到页面		
ReactDOM.render(<Weather/>,document.getElementById('test'))

注意:

1. 组件中render方法中的this为组件实例对象

2. 组件自定义的方法中this为undefined，如何解决？

(1)强制绑定this: 通过函数对象的bind()

(2)箭头函数

3. 状态数据，不能直接修改或更新

更改state

更改state时不要直接修改 state,使用setState更改

setState我们一般用来改变状态，在里面可以直接传一个要改变的对象，也可以传一个回调函数，注意，此时如果传入的是对象的话，React只是做了一层浅拷贝，而不是深拷贝，所以此时如果对象中有其他对象进行了改变React无法知道进行渲染。这个方法本质上是传入了一个新的值，将原先的值进行了覆盖，如果这个值跟原先的值一样，那么React就不会进行渲染

更新方式

根据执行setState的位置不同，可以分为异步更新和同步更新

同步更新：

即每执行一次setState，调用一次render()更新界面。

异步更新：

使用不同的setState书写方式，React是的处理方式也是不同的

异步更新时只调用一次render()更新界面，即界面更新合并了

setState({}): 在同一方法中不管使用多少次，都合并更新一次状态，也就是状态更新也合并了

setState(fn): 在同一方法中使用多少次更新多少次状态，状态更新没有合并