React 核心属性 -- state

一、state的理解

组件中的状态（state）里面存放数据，数据发生改变就会驱动页面，也就是state里面主要存放数据，state是属于组件实例上的，而并非组件类上的。

组件自定义的方法中this的指向为undefined的解决方法？

第一种解决方法： 强制绑定this，通过bind()方法改变方法中的this 指向，bind()会生成新的函数，性能上的效率不高，this指向具体实例。

第二种解决方法：使用箭头函数，箭头函数的this指向所在的作用域。

例：onClick={()=>{this.方法名()}}

注意：用箭头函数来改变this指向问题调用方法返回方法时，方法必须带括号。

方法中变量的改变等不能触发render方法，解决方法？

• fouceUpdate方法来触发render的更新（在不触发render时使用） 

  class MyComponent extends React.Component{
              constructor(props){
                  super(props);
                  this.state={
                      isHot:false,
                      wind:'微风'
                  }
                  this.changeWeather=this.changeWeather.bind(this);
              }
              changeWeather(){
                  console.log('changeWeather',this);
                  this.state.isHot=!this.state.isHot;
                  this.forceUpdate();
              }
  
              render(){
                  let {isHot,wind}=this.state
  
                  return(
                      <h1 onClick={this.changeWeather}>今天天气{isHot?'炎热':'凉爽'},{wind}</h1>
                  ) 
              }
          }
          const vDom = <MyComponent/>
          ReactDOM.render(vDom,document.getElementById('test'))
      

  

• 通过setState来给变量重新赋值来触发render的更新

  <div id='test'></div>
      <script type="text/babel">
          class MyComponent extends React.Component{
              constructor(props){
                  super(props);
                  this.state={
                      isHot:false,
                      wind:'微风'
                  }
                  this.changeWeather=this.changeWeather.bind(this);
              }            
              changeWeather(){
                  console.log('changeWeather',this);
                  const isHot=this.state.isHot;
                  this.setState({isHot:!isHot});
              }       
              render(){
                  let {isHot,wind}=this.state
  
                  return(
                      <h1 onClick={this.changeWeather}>今天天气{isHot?'炎热':'凉爽'},{wind}</h1>
                  ) 
              }
          }
          const vDom = <MyComponent/>
          ReactDOM.render(vDom,document.getElementById('test'))
      </script>

  class中this的指向问题

1. 直接调用方法：this的值为undefined，this为全局，应该指向window，但是经过babel之后，由于严格模式下，不允许this指向window，所以，this指向undefined。
2. 直接调用方法并且方法带括号：方法会直接执行，可能会出现内存溢出，方法直接执行，触发setState，更新了setState并触发了render,再次触发方法，成为死循环，导致内存溢出。
3. 箭头函数包裹方法:this指向所在得作用域，返回得方法要带括号，否则不会执行。
4. 普通函数：this指向为window,正常指向window,babel指向undefined。
5. bind重新绑定： bind每次会生成新的函数，导致性能变差。
6. bind在构造函数中一次绑定：在构造函数中生成一个方法，并在绑定中的方法重新赋值。
7. 用箭头函数声名方法：render中会自动调用方法，并将方法挂到实例中去，this自动指向实例。