React的组件协同使用实现方式

目录

• 嵌套
• 父子组件通信
• 兄弟组件通信
• 抽离
• Mixin
• React的LinkedStateMixin
• Reference：

开发人员不用太过于关注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

到此这篇关于React的组件协同使用的文章就介绍到这了,更多相关React组件协同内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！