React组件介绍与使用（父传子、子传父、兄弟传）

1、创建组件的方法

    1.1、函数式无状态组件

　　 1.1.1、语法

1 function myComponent(props) {
2      return
3         <div>Hello {props.name}</div>
4 }

　　 1.1.2、特点

　　　　　　● 它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作。

　　　　　　● 组件不能访问this对象

　　　　　　● 不能访问生命周期方法

　　 1.1.3、建议

　　　　　　如果可能，尽量使用无状态组件

2、（组件的）状态（state）和属性（props）之间有何不同

       2.1、State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

 2.2、Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身 的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

3、父子组件传值

　  3.1、父组件Father.js

 import React from 'react';
 import Son from './Son'
 //父组件
 class Father extends React.Component{
           constructor(){super();
 this.state={
 message:''
          }
   }
 //声明一个函数，用户接收子组件的传值
      getSonMess(msg){
 consloe.log('子组件传过来的值 '+msg)
   }
 render(){
 return(
    <React.Fragment>
       <Son mess='hello Son' sonMess={this.getSonMess}>
 </React.Fragment>
     );
      }
        }
 export default Father;

        3.2、子组件Son.js

 import React from 'react';

 //子组件
 class Son extends React.Component{

     render(){
         return (
             <React.Fragment>

                 {this.props.mess}，{this.props.sonMess()}

             </React.Fragment>
         );
     }

 }

 export default Son;

4、兄弟组件传值

　　4.1、组件Father.js

 import React from 'react';
 import Son from './Son';
 import Son2 from './Son2';
 //父组件
 class Father extends React.Component{

     constructor(){
         super();
         this.state = {
             message:''
         }
     }

     //用于接收Son.js组件的数据函数
     sonDatas(msg){
         this.setState({
             message:msg
         });
         console.log("在Father.js中展示Son.js生成的数据："+msg);
     }

     render(){
         return (
             <React.Fragment>

                <h1>在Father组件中显示：</h1>
                <Son sondata={this.sonDatas.bind(this)}></Son>
                <Son2 mess={this.state.message}></Son2>
             </React.Fragment>
         );
     }

 }

 export default Father;

     4.2、第一个“兄弟”， 组件 Son.js

 import React from 'react';

 //子组件
 class Son extends React.Component{

     //按钮点击事件函数
     sonClick(){
         this.props.sondata('这是从Son.js中生成的数据。。。');
     }

     render(){
         return (
             <React.Fragment>

                 <button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>

             </React.Fragment>
         );
     }

 }

 export default Son;

4.3、第二个“兄弟”，组件Son2.js

 import React from 'react';

 //子组件
 class Son2 extends React.Component{

     render(){
         return (
             <React.Fragment>

                 <h1>
                     在Son2.js中展示Son.js中生成的数据，这个是Father.js传过来的，数据是：
                     {this.props.mess}
                 </h1>

             </React.Fragment>
         );
     }

 }

 export default Son2;