React的組件協(xié)同使用實(shí)現(xiàn)方式

更新時(shí)間：2021年09月18日 09:19:56 作者：Hosee

這篇文章主要介紹了React的組件協(xié)同使用,文中給大家提到在React開(kāi)發(fā)中，有哪些場(chǎng)景的組件協(xié)同？又如何去實(shí)現(xiàn)組件的協(xié)同使用呢？本文都給大家提到，感興趣的朋友跟隨小編一起看看吧

開(kāi)發(fā)人員不用太過(guò)于關(guān)注UI層面的實(shí)現(xiàn)細(xì)節(jié)，考慮最多的也就是組件與組件之間的數(shù)據(jù)通信了。那么，在React開(kāi)發(fā)中，有哪些場(chǎng)景的組件協(xié)同？又如何去實(shí)現(xiàn)組件的協(xié)同使用呢？

組件的協(xié)同本質(zhì)上是對(duì)組件的一種組織、管理方式。

目的是使得系統(tǒng) 邏輯清晰、代碼模塊化、封裝細(xì)節(jié)、代碼可復(fù)用。

組件的協(xié)同分為兩種方式：嵌套、抽離、發(fā)布訂閱模式。

嵌套

組件嵌套的本質(zhì)就是父子關(guān)系，即為父組件和子組件之間的通信。

總的來(lái)說(shuō)有兩種場(chǎng)景：

父子組件通信
兄弟組件通信

父子組件通信

首先我們先來(lái)看看最常用的一個(gè)手段，通過(guò)props屬性。以父子組件為例，父組件只需要將數(shù)據(jù)以props的方式傳遞給子組件，子組件可以直接通過(guò)this.props來(lái)獲取，比如：

// 父組件 Parent
export default class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: '傳給子組件的消息'
    }
  }

  // 消息回調(diào)
  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('來(lái)自子組件的消息');
  }

  render() {
    const { message } = this.props;
    return (
      <div>
        <p>{ message }</p>
        <button onClick={ this.handleClick.bind(this) }>click</button>
      </div>
    );
  }
}

當(dāng)然，如果Children子組件需要傳遞數(shù)據(jù)給到父組件，可以使用回調(diào)方式，父組件將方法的引用通過(guò)props傳遞給到子組件，如上代碼中的handleClick里調(diào)用了onMessage。當(dāng)父組件的state更新時(shí)，Children組件會(huì)重新渲染，使用最新的message數(shù)據(jù)。

bind的作用就是給函數(shù)增加默認(rèn)的參數(shù)，第一個(gè)傳參將替代方法里面的this

兄弟組件通信

兄弟組件不能直接相互通信，需要通過(guò)父組件來(lái)中轉(zhuǎn)一下，進(jìn)行狀態(tài)提升。兄弟組件將需要共享的數(shù)據(jù)提升至共同的直接父組件中，然后就跟普通的父子組件通信一樣了。比如：

// 父組件 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('來(lái)自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('來(lái)自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>
    );
  }
}

當(dāng)點(diǎn)擊clickA的時(shí)候，子組件B接收到了子組件A的消息，反之亦然。

通過(guò)props的組件通信比較簡(jiǎn)單，但也有其自身的缺陷，當(dāng)組件層級(jí)大于3層時(shí)，這種方式就不適合了，首先是深層級(jí)的傳遞對(duì)到維護(hù)來(lái)說(shuō)簡(jiǎn)直就是噩夢(mèng)，需要一層一層的看才能知道數(shù)據(jù)的來(lái)源及流向。其次的話，假如不止A、B子組件，還有C子組件的，A、B組件引發(fā)的父組件state更新會(huì)觸發(fā)C子組件的更新，但事實(shí)上，C子組件并沒(méi)有接收任何數(shù)據(jù)，容易造成資源浪費(fèi)。

// 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。

假設(shè)有多個(gè)組件使用相同的getDefaultProps方法，我們就可以定義如下Mixin:

var DefaultNameMixin = {
    getDefaultProps: function () {
        return {name: "Tom"};
    }
};

Mixin相當(dāng)于組件的一個(gè)擴(kuò)展，它的本質(zhì)就是一組方法的集合，使用這個(gè) mixin 的組件能夠自由的使用這些方法（就像在組件中定義的一樣）。使用Mixin的目的就是橫向抽離出組件的相似代碼。

與Mixin思路相似的概念還有：AOP、插件等

例子中，DefaultNameMixin中包含getDefaultProps方法。除了直接定義外，Mixin還可以嵌套使用，也就是可以在定義Mixin時(shí)使用另一個(gè)Mixin：

var DefaultCommonMixin = {
    mixins:[DefaultNameMixin], //use Mixin
    getDefaultProps: function () {
        return {food: "rice"};
    }
};

例子中，在DefaultCommonMixin的定義中嵌套使用了DefaultNameMixin，因此DefaultCommonMixin包含了DefaultNameMixin中定義的getDefaultProps方法，此時(shí)DefaultCommonMixin中有兩個(gè)方法。使用Mixin時(shí)，只需將Mixin加入到mixins屬性對(duì)應(yīng)的數(shù)組中，Mixin的使用語(yǔ)法為mixins:[Mixin1，Mixin2……]。

使用Mixin時(shí)，只需將Mixin加入到mixins屬性對(duì)應(yīng)的數(shù)組中，Mixin的使用語(yǔ)法為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")
);

一個(gè)組件可以使用多個(gè)Mixin，同時(shí)，Mixin也可使用在多個(gè)組件中。

使用Mixin時(shí)，需要注意不要在多個(gè)地方設(shè)置相同的Prop和State。同時(shí)，在不同的Mixin中定義相同的方法，或者M(jìn)ixin和組件中包含了相同的方法時(shí)，也會(huì)拋出異常，但是這種情況對(duì)componentDidMount等生命周期方法不適用（render方法除外，多次定義render方法也會(huì)拋出異常）。

如果在一個(gè)組件的多個(gè)地方定義了相同的生命周期方法，這些方法的執(zhí)行順序?yàn)椋篗ixin中的方法會(huì)優(yōu)先執(zhí)行（根據(jù)mixins中的順序從左到右的順序），然后執(zhí)行組件中定義的方法。

Mixin的優(yōu)點(diǎn)：

代碼復(fù)用：抽離出通用代碼，減少開(kāi)發(fā)成本，提高開(kāi)發(fā)效率

即插即用：可以直接使用許多現(xiàn)有的Mixin來(lái)編寫(xiě)自己的組件

適應(yīng)性強(qiáng)：改動(dòng)一次代碼，影響多個(gè)組件

Mixin的缺點(diǎn)：

編寫(xiě)難度高：Mixin可能被用在各種環(huán)境中，兼容多種環(huán)境就需要更多的邏輯和代碼，通用的代價(jià)是提高復(fù)雜度。

降低代碼可讀性：組件的優(yōu)勢(shì)在于將邏輯和界面直接結(jié)合在一起，Mixin本質(zhì)上會(huì)分散邏輯，理解起來(lái)難度更大。

React的LinkedStateMixin

'use strict';  
  
// 構(gòu)建對(duì)象{value,requestChange}，value為初始值，requestChange為方法，須手動(dòng)調(diào)用  
// 在本模塊中，value為state[key]的初始值，requestChange用于更新state[key]  
var ReactLink = require('./ReactLink');  
  
// 設(shè)定屬性key后，返回函數(shù)，該函數(shù)接受value，內(nèi)部調(diào)用組件component.setState方法，更新state[key]=value  
var ReactStateSetters = require('./ReactStateSetters');  
  
/** 
 * 針對(duì)react手動(dòng)調(diào)用setState方法的單向數(shù)據(jù)流，提供雙向綁定 
 * 使用linkState(key).requestChange(value)傳值后自動(dòng)調(diào)用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方法用于構(gòu)建linkState(key)返回對(duì)象的requestChange方法  
  // 實(shí)現(xiàn)傳值后自動(dòng)調(diào)用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僅僅是一個(gè)onChange/setState()模式的簡(jiǎn)單包裝和約定。它不會(huì)從根本上改變數(shù)據(jù)在你的React應(yīng)用中如何流動(dòng)，也就是說(shuō)其實(shí)LinkedStateMixin本質(zhì)還是單向流，只是通過(guò)onChange將數(shù)據(jù)更改傳遞給React，然后內(nèi)部數(shù)據(jù)改變就自動(dòng)調(diào)用setState來(lái)進(jìn)行更新。

使用示例：

var WithLink = React.createClass({
  mixins: [LinkedStateMixin],
  getInitialState: function() {
    return {message: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('message')} />;
  }
});

LinkedStateMixin給你的React組件添加一個(gè)叫做linkState()的方法。linkState()返回一個(gè)包含React state當(dāng)前的值和用來(lái)改變它的回調(diào)函數(shù)的valueLink對(duì)象。

valueLink 對(duì)象可以在樹(shù)中作為props被向上傳遞或者向下傳遞，所以它在組件層和狀態(tài)層建立起雙向綁定是非常簡(jiǎn)單的。

注意：

對(duì)于checkbox的value屬性，有一個(gè)特殊的行為，如果checkbox被選中（默認(rèn)是on），value屬性值將會(huì)在表單提交的時(shí)候發(fā)送出去。當(dāng)checkbox被選中或者取消選中的時(shí)候，value屬性是不會(huì)更新的。對(duì)于checkbox，你應(yīng)該使用checkLink而不是valueLink。