React将代码进行组件化,使得开发人员不用太过于关注UI层面的实现细节,考虑最多的也就是组件与组件之间的数据通信了。那么,在React开发中,有哪些场景的组件协同?又如何去实现组件的协同使用呢?
组件的协同本质上是对组件的一种组织、管理方式。
目的是使得系统 逻辑清晰、代码模块化、封装细节、代码可复用。
组件的协同分为两种方式:嵌套、抽离、发布订阅模式。
嵌套
组件嵌套的本质就是父子关系,即为父组件和子组件之间的通信。
总的来说有两种场景:
- 父子组件通信
- 兄弟组件通信
父子组件通信
首先我们先来看看最常用的一个手段,通过props属性。以父子组件为例,父组件只需要将数据以props的方式传递给子组件,子组件可以直接通过this.props来获取,比如:
// 父组件 Parent
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
message: '传给子组件的消息'
}
}
// 消息回调
onMessage(messageFromChildren) {
console.log(messageFromChildren);
}
render() {
const { message } = this.state;
return (
<div>
<Children message={ message } onMessage={ this.onMessage.bind(this) } />
</div>
);
}
}
// 子组件 Children
export default class Children extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
this.props.onMessage('来自子组件的消息');
}
render() {
const { message } = this.props;
return (
<div>
<p>{ message }</p>
<button onClick={ this.handleClick.bind(this) }>click</button>
</div>
);
}
}
当然,如果Children子组件需要传递数据给到父组件,可以使用回调方式,父组件将方法的引用通过props传递给到子组件,如上代码中的handleClick里调用了onMessage。当父组件的state更新时,Children组件会重新渲染,使用最新的message数据。
bind的作用就是给函数增加默认的参数,第一个传参将替代方法里面的this
兄弟组件通信
兄弟组件不能直接相互通信,需要通过父组件来中转一下,进行状态提升。兄弟组件将需要共享的数据提升至共同的直接父组件中,然后就跟普通的父子组件通信一样了。比如:
// 父组件 Parent
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
messageFromA: '',
messageFromB: ''
}
}
onMessage(messageFromChildren, from) {
console.log(messageFromChildren);
this.setState({
[from == 'A' ? 'messageFromA' : 'messageFromB']: messageFromChildren
});
}
render() {
const { messageFromA, messageFromB} = this.state;
return (
<div>
<ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
<ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
</div>
);
}
}
// 子组件ChildrenA
export default class ChildrenA extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
this.props.onMessage('来自A子组件的消息', 'A');
}
render() {
const { message } = this.props;
return (
<div className="p-a b-a">
<p>{ message }</p>
<button onClick={this.handleClick.bind(this)}>clickA</button>
</div>
);
}
}
// 子组件 ChildrenB
export default class ChildrenB extends React.Component {
constructor(props) {
super(props);
}
handleClick() {
this.props.onMessage('来自B子组件的消息', 'B');
}
render() {
const { message } = this.props;
return (
<div className="p-a b-a">
<p>{ message }</p>
<button onClick={this.handleClick.bind(this)}>clickB</button>
</div>
);
}
}
当点击clickA的时候,子组件B接收到了子组件A的消息,反之亦然。
通过props的组件通信比较简单,但也有其自身的缺陷,当组件层级大于3层时,这种方式就不适合了,首先是深层级的传递对到维护来说简直就是噩梦,需要一层一层的看才能知道数据的来源及流向。其次的话,假如不止A、B子组件,还有C子组件的,A、B组件引发的父组件state更新会触发C子组件的更新,但事实上,C子组件并没有接收任何数据,容易造成资源浪费。
// Parent组件
render() {
const { messageFromA, messageFromB} = this.state;
return (
<div>
<ChildrenA message={ messageFromB } onMessage={ this.onMessage.bind(this) } />
<ChildrenB message={ messageFromA } onMessage={ this.onMessage.bind(this) } />
<ChildrenC />
</div>
);
}
// 子组件 ChildrenC
export default class ChildrenC extends React.Component {
constructor(props) {
super(props);
}
componentDidUpdate() {
console.log('ChildrenC updated');
}
render() {
return (
<div>ChildrenC</div>
);
}
}
抽离
Mixin
这里要介绍的抽离主要是指Mixin。
假设有多个组件使用相同的getDefaultProps方法,我们就可以定义如下Mixin:
var DefaultNameMixin = {
getDefaultProps: function () {
return {name: "Tom"};
}
};
Mixin相当于组件的一个扩展,它的本质就是一组方法的集合,使用这个 mixin 的组件能够自由的使用这些方法(就像在组件中定义的一样)。使用Mixin的目的就是横向抽离出组件的相似代码。
与Mixin思路相似的概念还有:AOP、插件等
例子中,DefaultNameMixin中包含getDefaultProps方法。除了直接定义外,Mixin还可以嵌套使用,也就是可以在定义Mixin时使用另一个Mixin:
var DefaultCommonMixin = {
mixins:[DefaultNameMixin], //use Mixin
getDefaultProps: function () {
return {food: "rice"};
}
};
例子中,在DefaultCommonMixin的定义中嵌套使用了DefaultNameMixin,因此DefaultCommonMixin包含了DefaultNameMixin中定义的getDefaultProps方法,此时DefaultCommonMixin中有两个方法。使用Mixin时,只需将Mixin加入到mixins属性对应的数组中,Mixin的使用语法为mixins:[Mixin1,Mixin2……]。
使用Mixin时,只需将Mixin加入到mixins属性对应的数组中,Mixin的使用语法为mixins:[Mixin1,Mixin2……]。
var Component = React.createClass({
mixins:[DefaultCommonMixin], //use Mixin
render:function(){
return <h1>{this.props.name} like {this.props.food}</h1>;
}
});
ReactDOM.render(
<Component/>,
document.getElementById("example")
);
一个组件可以使用多个Mixin,同时,Mixin也可使用在多个组件中。
使用Mixin时,需要注意不要在多个地方设置相同的Prop和State。同时,在不同的Mixin中定义相同的方法,或者Mixin和组件中包含了相同的方法时,也会抛出异常,但是这种情况对componentDidMount等生命周期方法不适用(render方法除外,多次定义render方法也会抛出异常)。
如果在一个组件的多个地方定义了相同的生命周期方法,这些方法的执行顺序为:Mixin中的方法会优先执行(根据mixins中的顺序从左到右的顺序),然后执行组件中定义的方法。
Mixin的优点:
代码复用:抽离出通用代码,减少开发成本,提高开发效率
即插即用:可以直接使用许多现有的Mixin来编写自己的组件
适应性强:改动一次代码,影响多个组件
Mixin的缺点:
编写难度高:Mixin可能被用在各种环境中,兼容多种环境就需要更多的逻辑和代码,通用的代价是提高复杂度。
降低代码可读性:组件的优势在于将逻辑和界面直接结合在一起,Mixin本质上会分散逻辑,理解起来难度更大。
React的LinkedStateMixin
'use strict';
// 构建对象{value,requestChange},value为初始值,requestChange为方法,须手动调用
// 在本模块中,value为state[key]的初始值,requestChange用于更新state[key]
var ReactLink = require('./ReactLink');
// 设定属性key后,返回函数,该函数接受value,内部调用组件component.setState方法,更新state[key]=value
var ReactStateSetters = require('./ReactStateSetters');
/**
* 针对react手动调用setState方法的单向数据流,提供双向绑定
* 使用linkState(key).requestChange(value)传值后自动调用setState方法,更新state
*
* 示例
* var LinkedStateMixin = require('react-addons-linked-state-mixin');
* var WithoutLink = React.createClass({
* mixins: [LinkedStateMixin],
* getInitialState: function() {
* return {message: 'Hello!'};
* },
* render: function() {
* var valueLink = this.linkState('message');
* var handleChange = function(e) {
* valueLink.requestChange(e.target.value);
* };
* return <input type="text" value={valueLink.value} onChange={handleChange} />;
* }
* });
*/
var LinkedStateMixin = {
// ReactStateSetters.createStateKeySetter方法用于构建linkState(key)返回对象的requestChange方法
// 实现传值后自动调用setState方法,更新state
linkState: function (key) {
return new ReactLink(this.state[key], ReactStateSetters.createStateKeySetter(this, key));
}
};
module.exports = LinkedStateMixin;
使用上述的Mixin:
import LinkedStateMixin from 'react-addons-linked-state-mixin'
mixins: [React.addons.LinkedStateMixin],
LinkedStateMixin
仅仅是一个onChange/setState()
模式的简单包装和约定。它不会从根本上改变数据在你的React
应用中如何流动,也就是说其实LinkedStateMixin
本质还是单向流,只是通过onChange
将数据更改传递给React
,然后内部数据改变就自动调用setState
来进行更新。
使用示例:
var WithLink = React.createClass({
mixins: [LinkedStateMixin],
getInitialState: function() {
return {message: 'Hello!'};
},
render: function() {
return <input type="text" valueLink={this.linkState('message')} />;
}
});
LinkedStateMixin
给你的React
组件添加一个叫做linkState()
的方法。linkState()
返回一个包含React state
当前的值和用来改变它的回调函数的valueLink
对象。
valueLink
对象可以在树中作为props
被向上传递或者向下传递,所以它在组件层和状态层建立起双向绑定是非常简单的。
注意:
对于checkbox
的value
属性,有一个特殊的行为,如果checkbox
被选中(默认是on
),value
属性值将会在表单提交的时候发送出去。当checkbox
被选中或者取消选中的时候,value
属性是不会更新的。对于checkbox
,你应该使用checkLink
而不是valueLink
。
<checkbox type="checkbox" checkedLink={this.linkState('booleanValue')} />
Reference:
1. http://schifred.iteye.com/blog/2361478
2. http://blog.csdn.net/qq_18661257/article/details/68951561