react基础 - 组件实例的三大核心属性-state

注意：在使用类创建组件才会有组件实例对象，从而才会有核心属性的概念~

 state

1. 组件被称为"状态机"(组件里存着状态，状态里存数据), 页面的显示是根据组件的state属性的数据来显示（重新渲染组件），值是一个对象，可以包含多个key-value的组合
2. 初始化指定:

//借助构造器初始化状态 
constructor() {
      super()
      this.state = {
        stateName1 : stateValue1,
        stateName2 : stateValue2
      }
    }

3. 读取显示: 
    this.state.stateName1
4. 更新状态-->更新界面 : 内置API : setState传入一个对象
    this.setState({stateName1 : newValue})

---

视频课中的一个demo

原生js的事件绑定三种方式：

在react中，把原生的onclick,onblur，封装为了 onClick ,onBlur，（为了更好的兼容性），且监听者必须是函数，，因此写法为：onClick={demo}

 那么思考一下，如何在类中的自定义方法中拿到类的实例对象？拿到了实例才能拿到state，从而才能修改isHot的值----

 bind可以做两件事 1.帮你生成一个新函数，不调用不执行   2.改变这个函数的this指向

此时将构造器中的this绑定到this.changeWeather上，，并把这个新函数放在实例身上，命名为changeWeather，，此时实例身上就多了一个changeWeather方法，，，再进行点击操作的时候，触发的方法就是实例自身的changeWeather方法，而非原型上的

总结一下思路---拿原型上的方法去生成新的方法并挂载到实例自身，调用的时候用的是自身的。

    //完整写法

    
    


      
      
      
      

    

    //简写！！！！开发中写法
  
    


    
    
    

    

强烈注意：

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
   1. 强制绑定this: 通过函数对象的bind()
   2. 箭头函数
3. 状态数据，不能直接修改或更新​​​​​​​​​​​​​​