react系列--组件通信

index

react系列--组件通信 __veblen

在项目开发过程中，为了降低耦合度，我们会采用组件开发模式，这就衍生出来各组件之间的通信。

组件通信大致分为三种形式：

• 父=====>子
• 子=====>父
• 兄弟之间

更复杂的通信方式如父=====>孙，则建议使用redux，详见react系列--redux

---

1.父子组件通信（父===>子）

说到组件通信，先来介绍下单向数据流：

React是单向数据流，数据主要从父节点传递到子节点（通过props）。 如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。

Props： props是property的缩写，可以理解为HTML标签的attribute。 不可以使用this.props直接修改props，因为props是只读的，props是用于整个组件树中传递数据和配置。在当前组件访问props，使用this.props。

接下来说说state

每个组件都有属于自己的state，state和props的区别在于前者(state)只存在于组件内部，只能从当前组件调用this.setState修改state值（不可以直接修改this.state！）。 一般我们更新子组件都是通过改变state值，更新子组件的props值从而达到更新。

父组件更新组件状态 -----props----->　子组件更新

• 静态数据传递

var Parent = React.createClass({  
         render: function() {  
                  return <div>teacher's name is: <Child name="veb"></Child></div>;  
         }  
});  
var Child = React.createClass({  
         render: function() {  
                  return <span>{this.props.name}</span>;  
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

• 动态数据传递

var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(){
                  this.setState({name:"len"})
         },
         render: function() {  
                  return <div>
                              teacher's name is: <Child name={this.state.name}></Child>
                              <button onClick="{this.change}" ></button>
                    </div>;  
         }  
});  
var Child = React.createClass({  
         render: function() {  
                  return <span>{this.props.name}</span>;  
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

Child组件接收父组件state.name，当点击button的时候通过setState更改state.name的值为len，Child视图对应更新

---

2.父子组件通信（子===>父）

子组件更新父组件状态 -----需要父组件传递回调函数-----> 子组件调用触发

• 修改上述代码如下

var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(){
                  this.setState({name:"len"})
         },
         render: function() {  
                  return <div>
                              teacher's name is:{this.state.name}
                             <Child ev={this.change}></Child>
                    </div>;  
         }  
});  

var Child = React.createClass({  
         render: function() {  
                  return <button onClick={this.props.ev} ></button>;  
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

当点击子组件时，触发从父组件传递过来的回调函数。

• 如果需要往父组件传参怎么办？修改以上代码如下

var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(name){
                  this.setState({name:name})
         },
         render: function() {  
                  return <div>
                              teacher's name is:{this.state.name}
                             <Child ev={this.change}></Child>
                    </div>;  
         }  
});  
var Child = React.createClass({  
         toParent:function(name){
                this.props.ev(name)
         },
         render: function() {  
                  return <button onClick={this.toParent.bind(this,"veblen')}></button>; 
         }  
});  

React.render(  
        <Parent />,  
        document.getElementById('app')  
);

这样，父组件就可以接收到子组件传递过来的参数了

---

兄弟组件

方式一：

按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。其实这种实现方式与子组件更新父组件状态的方式是大同小异的。

方式二：

猛击here

以上就是react组件通信的讲解。如果看懂了，说明你聪明；看不懂，说明我讲的不好。加油，同学们！未来是属于你们的