【React】组件实例的三大属性——state

1.正常的state写法（有constructor）

// 1.创建组件
class Weather extends React.Component {
  constructor(props) {
    super(props)
    // 初始化状态
    this.state = {
      isHot: false,
      wind: '微风'
    }
    // 解决changeWeather中this的指向问题
    this.changeWeather = this.changeWeather.bind(this)
  }

  // changeWeather调用几次？ ———— 点几次就调用几次
  changeWeather() {
    this.setState({
      isHot: !this.state.isHot
    })
  }

  // render调用几次？ ———— 1+n次 1是初始化的那次，n是状态更新的次数
  render() {
    const { isHot, wind } = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}，{wind}</h1>
  }
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'))

注意：
1. onClick后面绑定的方法不能带括号:
onClick={this.changeWeather}- YES；
onClick={this.changeWeather()}- NO!
2. 自定义方法拿不到this？记得constructor中用bind绑定它的this指向：this.changeWeather = this.changeWeather.bind(this)

2.state的简写方式

三步骤：
1. 不用写constructor
2. state直接写
3. 自定义方法用箭头函数

// 1.创建组件
class Weather extends React.Component {
  // 初始化状态
  state = { isHot: false, wind: '微风' }

  // 自定义方法 ———— 要用赋值语句的形式+箭头函数
  changeWeather = () => {
    this.setState({
      isHot: !this.state.isHot
    })
  }

  render() {
    const { isHot, wind } = this.state
    return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}，{wind}</h1>
  }
}
// 2.渲染组件到页面
ReactDOM.render(<Weather />, document.getElementById('test'))