state------>虚拟dom------>dom

这个过程是自动的，不需要触发其他事件来调用它。

state中文理解：页面状态的的一个值，可以存储很多东西。

 

学习state的使用：

1.state先初始化，在React中，每一个类跟所有的面向对象的函数一样，都有一个构造函数叫constructor。

2.将state的初始化放在constructor()里面。

export default class BodyIndex extends React.Component{    //将state的初始化放在constructor()里面    constructor(){        super();//调用基类的所有初始化方法（这个是固定模式）        //下面是对state固定的语法        //初始化state后，初始化赋值        //重要：state只作用于当前的class，绝不影响其他组件class(例如这个state是作用在主体部分，它就不会影响头部和底部)        this.state = {username : "azedada"} //可以传json等很多格式（这个是初始化赋值）    }    render(){        return(                
     
                    
      
这里是主体内容部分
                    {/*state在页面显示*/}                     
      
{
   this.state.username}
                
     
            )    }}

重要：state只作用于当前的class，绝不影响其他组件class(例如这个state是作用在主体部分，它就不会影响头部和底部)。

3.state发生改变，会立马引起刷新，但是这个刷新只会更改需要更改的部分，不会引起页面全部刷新，所以用react写出来的页面效率非常高。

　　　　接下来用定时器函数来做一个简单的理解：

　

export default class BodyIndex extends React.Component{    //将state的初始化放在constructor()里面    constructor(){        super();        this.state = {username : "azedada"}    }    render(){        //定时器，4秒后进行刷新        setTimeout(()=>{            //更改state的时候            this.setState({username : "hello"})        },4000)        return(                
     
                    
      
这里是主体容部分
                    {
    /*state在页面显示*/}                     
      
{
   this.state.username}
                
     
            )    }    }

运行程序之后，就会发现 页面中 azedada 会在4秒中后变为 hello，这个过程只进行当前的刷新，没有页面的刷新。效率非常高。