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组件通信的讲解。如果看懂了，说明你聪明；看不懂，说明我讲的不好。加油，同学们！未来是属于你们的
