React学习之路02

React的state：

     1.页面效果

     

2：代码实现：

    

import React from 'react';

export default class BodyIndex extends React. Component {

     constructor(){

         super(); //调用基类的所有初始化方法

         this. state={

             username: 'tony',

             age: '20'

        }; //初始化赋值

    }

     render() {

     setTimeout(() =>{

             //更改state的时候

             this. setState({ username: 'peter', age: 43});

        }, 4000)

         return (

             < div >

                 < h2 >页面的主体内容 </ h2 >

                 < p > {this. state. username } {this. state. age } </ p >

             </ div >

        )

    }

}

总结：

    1.state对于模块属于自身属性

    2.初始化：this.state={usernmae:'tony'}

    3.初始化可以放在构造函数constructor里

    4.state:this.setState({username:'peter'})

    5.state的作用域只属于当前的类，不污染其他模块

React的Props属性

    1.页面效果

     

    2.实现代码：

   

   总结：

    1.props属于外来属性

    2.获取不同页面的值

React的事件与数据的双向绑定：

    1.页面效果：

    

 2.代码实现

  1.首先定义一个组件

    

import React from 'React';

export default class BodyChild extends React. Component{

render(){

return(

< div >

< p >子页面输入： < input type= "text" onChange= {this. props. handleChildValueChange } /></ p >

</ div >

)

}

}

  2.在bobyIndex.js页面定义事件，详细见代码

React的Prop的验证：

      

React的Prop的爷孙页面的传值：

   1.页面效果

     

  2.代码实现

    1.index.js页面

      

     2.bobyindex.js页面

      

   3.bobychild.js页面

   

React的Refs

    1.页面效果

2.代码实现

   

 3：总结

   

React的Mixins-独立组件间共享

   1.页面效果 

     

2.代码实现