React-04React组件状态（state），构造器初始化state以及数据读取，添加点击事件并更改state状态值

1.React组件状态（state）

        组件可以拥有状态（state），它是组件数据的私有部分，可以用来管理动态数据。状态仅适用于类组件，或者使用 React 的 Hook 时可以在函数组件中使用。

注意

• 组件中render方法中的this为组件实例对象
• 组件自定义方法中的this指向为undefined解决方法
•         强制绑定this,通过函数的bind()
•         赋值+箭头函数（this指向外找）
• 状态数据：不能直接修改或更新，使用setState修改状态值

2. 构造器初始化state以及数据读取

利用构造器初始化state，以及state中数据的读取，具体例子如下

3.state初始化数据 添加点击事件onClick 更新数据

重点

3.1构造器中绑定事件处理函数，bind更改this指向问题

 this.change = this.changeWeather.bind(this)

 3.2render中标签添加点击事件

render () {
      // 读取状态与添加点击状态 this=>Weather组件实例对象
      return 
今日的天气：{this.state.temperature}°C，{this.state.weather}，天气{this.state.isHot?'很热':'很冷'}
       }

 3.3setState方法修改state状态中的值

  changeWeather() {
                // 获取初始的值
                const dataList = this.state              
                // 解决方法：1. 手动绑定this 2. 使用箭头函数
                // this.setState({temperature: 36, weather: '多云', isHot: false})
                // 或者使用箭头函数
                this.setState((prevState) => ({
                    temperature: 36,
                    weather: '多云',
                    isHot: !dataList.isHot
                }))
            }

3.4整体代码构造函数标准代码模式

3.5 state常用编码模式非构造函数模式