state

1.简单组件，复杂组件

     简单组件：无状态，函数组件

     复杂组件：有状态，类组件

状态里存储的数据，状态中的数据发生改变，驱动页面

组件实例对象中有个state，状态在组件类所缔造的实例上

 

为组件state写上元素，可以在实例对象中获得state

读出来

 如何为标签加上点击事件。

  原生点击事件的绑定：

  <button id="btn1">1</button>
    <button id="btn2">2</button>
    <button onclick="demo()">3</button>
    <script type="text/javascript">
       const btn1=document.getElementById('btn1');
       btn1.addEventListener('click',()=>{
          alert('1被点击了')
       })
       const btn2=document.getElementById('btn2');
       btn2.onclick=()=>{
           alert('2被点击了')
       }
     function demo(){
        alert('3被点击了')
     }
    </script>

React上的点击：

    前两种方式均可以使用，但是推荐第三种

 

 但这样写，会有问题，一开始就会出现提示框。

onClick={demo()}是赋值语句，将demo的返回值给onClick来回调

但，onClick={demo}，就是将demo函数给onClick进行回调

把()去掉才能实现

 this指向问题：

     

   此时this指向Window

   如果写成严格模式

     、

此时this指向undefined

此时在光标闪烁的地方，根本碰不到Weather的组件实例对象， Weather实例对象根本不是我们new出来的，我们只写了组件的标签，react帮我们new的

但在构造器里可以碰到组件实例对象，在render中也可以获得组件实例对象

要想办法将函数放到组件定义里面

 

 但直接这样放会出错，

 只有实例才能调到 demo,这样直接调用，根本找不到demo函数

    

 但现在，demo中this是undefined

 只有通过组件实例对象调用demo时，demo中的this就是Weather实例  

    类方法中this指向，

      

 此时this是Person实例对像，因为此时是实例对象在调用函数。

speak函数在原型对象上，供实例使用

const x=p1.spreak;根本没有调用speak方法 此时x() 是直接调用，直接调用返回undefined

类中所有方法，在局部都开好了严格模式 

由于demo是作为onClick回调，所以不是通过实例调用的，是直接调用的 ，且类中方法默认开启了局部严格模式，所以demo中this指向丢失

 做了一句更改，this.change=this.demo.bind(this)

     标黄的this指向的组件的实例对象，

     this.demo 去找demo，虽然实例上没有，但在原型对象上有，即找到了原型对象的demo函数

   bind: 作用：生成新的函数，改掉this指向。 会怎么改this呢，需要看传的是什么。

  此时传的是this（且在构造器中）,即组件实例对象

   this.demo.bind(this) 生成一个函数，this指向组件的实例对象

     .bind会生成一个新函数，需要重新调用

  此时，this.change, 将这个函数放到了实例上，且为这个函数重新命名了一个新名字，change

  即，拿到了原型上的函数，生成了新的函数，挂载到了实例上

 

                           onClick={this.change}

此时change 位于组件的实例对象自身上。

设置状态：

   1.思路：获得原来的状态，然后改变

      

 此时确实在代码上改了，但是react不承认这种更改

react不支持直接更改state值

  

用this.state....就是直接更改，错误写法

严重注意，state修改必须通过setState（API接口）来修改

setstate : this.SetState({isHot:!isHot})

 状态的改变是替换还是合并？

   1.构造器在整个渲染中就执行了1次

  2.render 函数，调用1+n次，1是第一次渲染时，n是状态改变的次数

  3.demo 点几次调用几次

所以只是合并即修改，而不是替换

精简setState

  为什么render()函数中，this指向实例对像？

     因为，ReactDOM.render(<id/>,.....)

   在这用的是标签，react 中new了一个实例，然后通过实例.render调用

在类中自定义写的方法，是供事件回调用的

类中可以直接定义属性，除非从外面的传入的属性

   

箭头函数自身没有this，需要向外层寻找

 

以后，创建类组件时，自定义方法，需要写成赋值语句的形式+箭头函数

 总结：

• state，值是对象（可以包含key:value）
• state状态机，通过更新组件state来更新对应页面的显示
• 组件中自定义方法 this为undefined

           如何解决：

             a:构造器中强制绑定this,通过bind来解决

             b:写成箭头函数  

• 组件中render方法this为组件实例对象
• 组件中的状态不能直接改变