React (5 组件三大实例属性之state)

对state的理解

state是组件实例的三大核心之一

1. state是组件对象最重要的属性，值是对象（可以包含多个key-value的组合）
2. 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

强烈注意：
1、组件中render方法中的this为组件实例对象
2、组件自定义的方法中this为undefined，如何解决？
a、强制绑定this通过函数对象的bind（）
b、箭头函数
c、class的实例方法
3、状态数据不能直接修改。

初始化state

通过一个切换来了解State

import React from 'react';
export default class State extends React.Component{
     
  constructor(props){
     
    super(props)
    //创建state
    this.state={
     
      isHot:true
    }
    //通过bind（）结果this指向undefined的问题
    //this.Upstate=this.Upstate.bind(this)
  }
  Upstate(){
     
    console.log(this.state.isHot);
    let a=this.state.isHot
    //更改state中的值必须使用setState（）更改。
    this.setState({
     isHot:!a})
  }
  render(){
     
    return (
    //方法二通过箭头函数解决this指向undefined的问题
      <div onClick={
     ()=>this.Upstate()}>
        <h1>今天很{
     this.state.isHot? '热' : '凉快'}</h1>
      </div>
    )
  }
}

一、创建state
方式一：

this.state={
     }

方式二：

state={
     }

二、this指向问题

箭头函数的方法

bind的方法

 constructor(props){
     
    super(props)
    
    this.state={
     
      isHot:true
    }
    this.Upstate=this.Upstate.bind(this)
  }