React06-state理解state 再Vue中我们组件内部数据通过data来进行定义。一旦你定义data，vue启

一、理解state

再Vue中我们组件内部数据通过data来进行定义。一旦你定义data，vue启动的过程中，将data里面的进行加载。检测数据更新。data里面数据发生变化，页面会自动更新。

再react中组件内部的状态，通过state来定义。状态指的就是组件内数据

组件内部状态。

学习state了解数据操作

如何定义数据
如何使用数据
如何修改数据

二、数据的操作

定义数据

再构造器里里面state

import React, { Component } from 'react'
export default class StateComp extends Component {    
    // 组件内部要定义状态，需要用state来定义    
    constructor() {       
        //只要涉及到集成，我们需要再构造器里第一句话，super()      
        super();       
        //  给当前这个类新增了一个属性，state      
        this.state = {        
            username:"xiaowang",      
            user:{},          
            array:[]     
        }   
    }  
    render() {     
        return (       
            <div>StateComp</div>     
        )  
    }
}

第二种定义方式

import React, { Component } from 'react'
export default class StateComp extends Component { 
    state = {  
        username:"xiaofeifei",  
        user:{id:1} 
    }   
    render() {    
        return (   
            <div>StateComp</div>   
        ) 
    }
}

获取数据

我们可以直接再页面使用this.state来获取

{this.state.username}

一般推荐你们再render函数里面将你要获取的数据解构

state = {       
    username:"xiaofeifei",     
    user:{id:1}  
}   
render() {  
    const {username,user} = this.state    
    return (       
        <div>       
            <p>{this.state.username}</p>   
            <p>{user.id}</p>    
        </div>       
    )   
}

修改数据

再react组件中要修改数据，不能直接修改state这个对象。需要调用setState这个函数来修改

import React, { Component } from 'react'
export default class StateComp extends Component {   
    state = {    
        username:"xiaofeifei",     
        user:{id:1}   
    }   
    changeUsername = ()=>{  
        this.state.username="xiaozhang"  
        this.setState({    
            username:"xiaowang"    
        })   
    }  
    render() {    
        const {username,user} = this.state  
        return (      
            <div>         
                <p>{username}</p>   
                <p>{user.id}</p>      
                <button onClick={this.changeUsername}>修改username</button>    
            </div>      
        )  
    }
}

调用setState传递一个对象，这个对象传递进去后，会和原来对象进行一个合并操作。

react底层检测你是否执行setState，重新调用render方法完成页面渲染

三、数据修改特性（重要）

setState是异步执行
```
 changeUsername = ()=>{      
     this.setState({         
         username:"xiaowang"    
     })       
     console.log(this.state.username);   
 }
```
我们再执行setState的时候，异步执行。后面打印的username还是之前state的数据。

为了性能考虑，将修改的过程做成异步，如果你进行大量的数量。如果操作数据不是异步，页面有可能会出现卡死，假死的情况。

异步执行完成后得到更新后结果

 this.setState({   
     username:"xiaozhang" 
 },()=>{    
     console.log(this.state.username);  
     // 用最新的数据，执行业务 
 })

官方提供另外一种语法（了解）

  this.setState(()=>{    
      return {        
          username:"xiaozhang" 
      } 
  },()=>{  
      console.log(this.state.username);  
      // 用最新的数据，执行业务  
      })

传递的是两个函数，第一个函数一定要返回一个对象。

第二个函数回调函数，当你执行完成修改调用

setState并不是总是异步
```
 setTimeout(()=>{   
     this.setState({     
         username:"xiaowang"  
     })   
     console.log(this.state.username); 
 },1000)
```
当react发现你再异步回调函数里面执行setState的时候，将setState变成同步执行。本身外面已经是异步，里面再使用异步去修改，遇到效率问题。
重复操作数据合并
```
 this.setState({            
     username:"xiaowang"  
 }) 
 this.setState({  
     username:"xiaowang"
 }) 
 this.setState({    
     username:"xiaowang"
 })
```
调用setState每次都是执行相同的操作，底层会默认将这些操作合并起来。只会执行一次。

执行setState，并不会立即去更新数据。首先会将你们这个任务放到队列。如果发现队列里面有相同的任务，将这个任务踢出队列。合并操作。
```
 this.setState({   
     username:"xiaowang" 
 }) 
 this.setState({    
     username:"xiaowang" 
 }) 
 this.setState({    
     user:{        
         id:2   
     }
 })
```
我们的render方法也只会执行一次。底层默认将你要修改的对象，合并成一个对象，只需要执行数据修改。