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

 1 import React from 'react';
 2 import Son from './Son'
 3 //父组件
 4 class Father extends React.Component{
 5           constructor(){super();
 6 this.state={
 7 message:''
 8          }
 9   }
10 //声明一个函数，用户接收子组件的传值
11      getSonMess(msg){
12 consloe.log('子组件传过来的值 '+msg)
13   }
14 render(){
15 return(
16    <React.Fragment>
17       <Son mess='hello Son' sonMess={this.getSonMess}>    
18 </React.Fragment>            
19     );
20      }
21        }
22 export default Father;

3.2、子组件Son.js

 1 import React from 'react';
 2 
 3 //子组件
 4 class Son extends React.Component{
 5 
 6     render(){
 7         return (
 8             <React.Fragment>
 9                 
10                 {this.props.mess}，{this.props.sonMess(123)}
11 
12             </React.Fragment>
13         );
14     }
15 
16 }
17 
18 export default Son;

4、兄弟组件传值

　　4.1、组件Father.js

 1 import React from 'react';
 2 import Son from './Son';
 3 import Son2 from './Son2';
 4 //父组件
 5 class Father extends React.Component{
 6 
 7     constructor(){
 8         super();
 9         this.state = {
10             message:''
11         }
12     }
13 
14     //用于接收Son.js组件的数据函数
15     sonDatas(msg){
16         this.setState({
17             message:msg
18         });
19         console.log("在Father.js中展示Son.js生成的数据："+msg);
20     }
21 
22     render(){
23         return (
24             <React.Fragment>
25                
26                <h1>在Father组件中显示：</h1>
27                <Son sondata={this.sonDatas.bind(this)}></Son>
28                <Son2 mess={this.state.message}></Son2>
29             </React.Fragment>
30         );
31     }
32 
33 }
34 
35 export default Father;

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

 1 import React from 'react';
 2 
 3 //子组件
 4 class Son extends React.Component{
 5 
 6     //按钮点击事件函数
 7     sonClick(){
 8         this.props.sondata('这是从Son.js中生成的数据。。。');
 9     }
10 
11     render(){
12         return (
13             <React.Fragment>
14             
15                 <button onClick={this.sonClick.bind(this)}>Son组件中的按钮获取数据</button>
16                     
17             </React.Fragment>
18         );
19     }
20 
21 }
22 
23 export default Son;

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

 1 import React from 'react';
 2 
 3 //子组件
 4 class Son2 extends React.Component{
 5 
 6     render(){
 7         return (
 8             <React.Fragment>
 9             
10                 <h1>
11                     在Son2.js中展示Son.js中生成的数据，这个是Father.js传过来的，数据是：
12                     {this.props.mess}
13                 </h1>
14 
15             </React.Fragment>
16         );
17     }
18 
19 }
20 
21 export default Son2;