AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React躬行记（9）——组件通信

2022-04-26 115
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 　根据组件之间的嵌套关系（即层级关系）可分为4种通信方式：父子、兄弟、跨级和无级。


一、父子通信

　　在React中，数据是自顶向下单向流动的，而父组件通过props向子组件传递需要的信息是组件之间最常见的通信方式，如下代码所示，父组件Parent向子组件Child传递了一个name属性，其值为一段字符串“strick”。

class Parent extends React.Component {
  render() {
    return <Child name="strick">子组件</Child>;
  }
}
class Child extends React.Component {
  render() {
    return <input name={this.props.name} type="text" />;
  }
}


　　当需要子组件向父组件传递信息时，也能通过组件的props实现，只是要多传一个回调函数，如下所示。


class Parent extends React.Component {
  callback(value) {
    console.log(value);        //输出从子组件传递过来的值
  }
  render() {
    return <Child callback={this.callback} />;
  }
}
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "" };
  }
  handle(e) {
    this.props.callback(e.target.value);        //调用父组件的回调函数
    this.setState({ name: e.target.value });    //更新文本框中的值
  }
  render() {
    return <input value={this.state.name} type="text" onChange={this.handle.bind(this)} />;
  }
}


　　父组件Parent会传给子组件Child一个callback()方法，子组件中的文本框注册了一个onChange事件，在事件处理程序handle()中将回调父组件的callback()方法，并把文本框的值传递过去，以此达到反向通信的效果。


二、兄弟通信

　　当两个组件拥有共同的父组件时，就称它们为兄弟组件，注意，它们可以不在一个层级上，如图6所示，C与D或E都是兄弟关系。

2.png

图6  组件树

　　兄弟之间不能直接通信，需要借助状态提升的方式间接实现信息的传递，即把组件之间要共享的状态提升至最近的父组件中，由父组件来统一管理。而任意一个兄弟组件可通过从父组件传来的回调函数更新共享状态，新的共享状态再通过父组件的props回传给子组件，从而完成一次兄弟之间的通信。在下面的例子中，会有两个文本框（如图7所示），当向其中一个输入数字时，邻近的文本框会随之改变，要么加一，要么减一。


图7  两个文本框

3.gif

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { type: "p", digit: 0 };
    this.plus = this.plus.bind(this);
    this.minus = this.minus.bind(this);
  }
  plus(digit) {
    this.setState({ type: "p", digit });
  }
  minus(digit) {
    this.setState({ type: "m", digit });
  }
  render() {
    let { type, digit } = this.state;
    let pdigit = type == "p" ? digit : (digit+1);
    let mdigit = type == "m" ? digit : (digit-1);
    return (
      <>
        <Child type="p" digit={pdigit} onDigitChange={this.plus} />
        <Child type="m" digit={mdigit} onDigitChange={this.minus} />
      </>
    );
  }
}
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handle = this.handle.bind(this);
  }
  handle(e) {
    this.props.onDigitChange(+e.target.value);
  }
  render() {
    return (
      <input value={this.props.digit} type="text" onChange={this.handle} />
    );
  }
}


　　上面代码实现了一次完整的兄弟之间的通信，具体过程如下所列。

（1）首先在父组件Parent中定义两个兄弟组件Child，其中type属性为“p”的子组件用于递增，绑定了plus()方法；type属性为“m”的子组件用于递减，绑定了minus()方法。

（2）然后在子组件Child中接收传递过来的digit属性和onDigitChange()方法，前者会作为文本框的值，后者会在事件处理程序onChange()中被调用。

（3）如果在递增文本框中修改数值，那么就将新值传给plus()方法。递减文本框的处理过程与之类似，只是将plus()方法替换成minus()方法。

（4）最后更新父组件中的两个状态：type和digit，完成信息的传递。


三、跨级通信

　　在一棵组件树中，当多个组件需要跨级通信时，所处的层级越深，那么需要过渡的中间层就越多，完成一次通信将变得非常繁琐，而在数据传递过程中那些作为桥梁的组件，其代码也将变得冗余且臃肿。

　　在React中，还可用Context实现跨级通信。Context能存放组件树中需要全局共享的数据，也就是说，一个组件可以借助Context跨越层级直接将数据传递给它的后代组件。如图8所示，左边的数据会通过组件的props逐级显式地传递，右边的数据会通过Context让所有组件都可访问。

4.png

图8  props和context

　　随着React v16.3的发布，引入了一种全新的Context，修正了旧版本中较为棘手的问题，接下来的篇幅将着重分析这两个版本的Context。

1）旧的Context

　　在旧版本的Context中，首先要在顶层组件内添加getChildContext()方法和静态属性childContextTypes，前者用于生成一个context对象（即初始化Context需要携带的数据），后者通过prop-types库限制该对象的属性的数据类型，两者缺一不可。在下面的示例中，Grandpa是顶层组件，Son是中间组件，要传递的是一个包含name属性的对象。


//顶层组件
class Grandpa extends React.Component {
  getChildContext() {
    return { name: "strick" };
  }
  render() {
    return <Son />;
  }
}
Grandpa.childContextTypes = {
  name: PropTypes.string
};
//中间组件
class Son extends React.Component {
  render() {
    return <Grandson />;
  }
}

　　然后给后代组件（例如下面的Grandson）添加静态属性contextTypes，限制要接收的属性的数据类型，最后就能通过读取this.context得到由顶层组件提供的数据。


class Grandson extends React.Component {
  render() {
    return <p>{this.context.name}</p>;
  }
}
Grandson.contextTypes = {
  name: PropTypes.string
};


　　从上面的示例中可以看出，跨级通信的准备工作并不简单，需要在两处做不同的配置。React官方建议慎用旧版的Context，因为它相当于JavaScript中的全局变量，容易造成数据流混乱、重名覆盖等各种副作用，并且在未来的React版本中有可能被废弃。

　　虽然在功能上Context实现了跨级通信，但本质上数据还是像props一样逐级传递的，因此如果某个中间组件的shouldComponentUpdate()方法返回false的话，就会阻止下层的组件更新Context中的数据。接下来会演示这个致命的缺陷，沿用上一个示例，对两个组件做些调整。在Grandpa组件中，先让Context保存组件的name状态，再新增一个按钮，并为其注册一个能更新组件状态的点击事件；在Son组件中，添加shouldComponentUpdate()方法，它的返回值是false。在把Grandpa组件挂载到DOM中后，点击按钮就能发现Context的更新传播终止于Son组件。


class Grandpa extends React.Component {
  constructor(props) {
    super(props);
    this.state = { name: "strick" };
    this.click = this.click.bind(this);
  }
  getChildContext() {
    return { name: this.state.name };
  }
  click() {
    this.setState({ name: "freedom" });
  }
  render() {
    return (
      <>
        <Son />
        <button onClick={this.click}>提交</button>
      </>
    );
  }
}
class Son extends React.Component {
  shouldComponentUpdate() {
    return false;
  }
  render() {
    return <Grandson />;
  }
}


2）新的Context

　　这个版本的Context不仅采用了更符合React风格的声明式写法，还可以直接将数据传递给后代组件而不用逐级传递，一举冲破了shouldComponentUpdate()方法的限制。下面仍然使用上一节的三个组件，完成一次新的跨级通信。


C

const NameContext = React.createContext({name: "strick"});
class Grandpa extends React.Component {
  render() {
    return (
        <NameContext.Provider value={{name: "freedom"}}>
          <Son />
        </NameContext.Provider>
    );
  }
}
class Son extends React.Component {
  render() {
    return <Grandson />;
  }
}
class Grandson extends React.Component {
  render() {
    return (
        <NameContext.Consumer>{context => <p>{context.name}</p>}</NameContext.Consumer>
    );
  }
}


　　通过上述代码可知，新的Context由三部分组成：

（1）React.createContext()方法，接收一个可选的defaultValue参数，返回一个Context对象（例如NameContext），包含两个属性：Provider和Consumer，它们是一对相呼应的组件。

（2）Provider，来源组件，它的value属性就是要传送的数据，Provider可关联多个来自于同一个Context对象的Consumer，像NameContext.Provider只能与NameContext.Consumer配合使用。

（3）Consumer，目标组件，出现在Provider之后，可接收一个返回React元素的函数，如果Consumer能找到对应的Provider，那么函数的参数就是Provider的value属性，否则就读取defaultValue的值。

　　注意，Provider组件会通过Object.is()对其value属性的新旧值做比较，以此确定是否更新作为它后代的Consumer组件。


四、无级通信

　　当两个没有嵌套关系（即无级）的组件需要通信时，可以借助消息队列实现。下面是一个用观察者模式实现的简易消息队列库，其处理过程类似于事件系统，如果将消息看成事件，那么订阅消息就是绑定事件，而发布消息就是触发事件。


class EventEmitter {
  constructor() {
    this.events = {};
  }
  sub(event, listener) {        //订阅消息
    if (!this.events[event]) {
      this.events[event] = { listeners: [] };
    }
    this.events[event].listeners.push(listener);
  }
  pub(name, ...params) {        //发布消息
    for (const listener of this.events[name].listeners) {
      listener.apply(this, params);
    }
  }
}


　　EventEmitter只包含了三个方法，它们的功能如下所列：

（1）构造函数，初始化了一个用于缓存各类消息的容器。

（2）sub()方法，将回调函数用消息名称分类保存。

（3）pub()方法，依次执行了指定名称下的消息集合。

　　下面用一个示例演示无级通信，在Sub组件的构造函数中，会订阅一次消息，消息名称为"TextBox"，回调函数会接收一个参数，并将其输出到控制台。


let emitter = new EventEmitter();
class Sub extends React.Component {
  constructor(props) {
    super(props);
    emitter.sub("TextBox", value => console.log(value));
  }
  render() {
    return <p>订阅消息</p>;
  }
}


　　在下面的Pub组件中，为文本框注册了onChange事件，在事件处理程序handle()中发布名为"TextBox"的消息集合，并将文本框中的值作为参数传递到回调函数中。


class Pub extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }
  handle(e) {
    const value = e.target.value;
    emitter.pub("TextBox", value);
    this.setState({ value });
  }
  render() {
    return <input value={this.state.value} onChange={this.handle.bind(this)} />;
  }
}


　　Sub组件和Pub组件会像下面这样，以兄弟的关系挂载到DOM中。当修改文本框中的内容时，就会触发消息的发布，从而完成了一次它们之间的通信。

ReactDOM.render(
  <>
    <Sub />
    <Pub />
  </>,
  document.getElementById("container")
);

　　当业务逻辑复杂到一定程度时，普通的消息队列可能就捉襟见肘了，此时可以考虑引入Mobx、Redux等专门的状态管理工具来实现组件之间的通信。

文章标签：
JavaScript
前端开发
容器
消息中间件
缓存
关键词：
React Native组件通信
React Native通信
react.js组件
react.js通信
react.js组件通信
咖啡机（K.F.J）
目录
相关文章
恬0917
|
7月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库，嵌套路由
React 的antd-mobile 组件库，嵌套路由
恬0917
132 0
尹正杰
|
3月前
|
消息中间件 前端开发
React技术栈-组件间通信的2种方式
本文介绍了React技术栈中组件间通信的两种方式：通过props传递数据和使用消息发布（publish）-订阅（subscribe）机制，并通过实例代码展示了如何使用PubSubJS库实现跨组件通信。
尹正杰
62 11
React技术栈-组件间通信的2种方式
kaixin321-44007
|
6月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
kaixin321-44007
55 4
无妄的罪
|
7月前
|
存储 前端开发 中间件
React组件间的通信
React组件间的通信
无妄的罪
59 1
天玄TX
|
7月前
|
前端开发
React组件通信：如何优雅地实现组件间的数据传递
React组件通信：如何优雅地实现组件间的数据传递
天玄TX
206 0
恬0917
|
7月前
|
前端开发 JavaScript API
React组件生命周期
React组件生命周期
恬0917
131 1
快乐阿超
|
7月前
|
前端开发 应用服务中间件 数据库
react服务端组件
react服务端组件
快乐阿超
56 0
雪碧有白泡泡
|
7月前
|
前端开发 JavaScript
快速上手React：从概述到组件与事件处理
快速上手React：从概述到组件与事件处理
雪碧有白泡泡
105 0
恬0917
|
7月前
|
资源调度 前端开发 JavaScript
React组件
React组件
恬0917
66 0
土木林森
|
1月前
|
前端开发 JavaScript 开发者
颠覆传统：React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库，以其虚拟DOM机制和组件化设计，成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容，帮助开发者更好地理解和使用React。
土木林森
78 9