您现在的位置是:网站首页> 内容页

react系列(三)组件间通信

  • 尊宝官网
  • 2019-06-27
  • 232人已阅读
简介组件间通信React的基本组件元素是一个个组件,组件之间可能存在关联、组合等关系。不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信。根据传递的复杂程度,可以分为三种情况

组件间通信

React的基本组件元素是一个个组件,组件之间可能存在关联、组合等关系。不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信。根据传递的复杂程度,可以分为三种情况:父子间通信,兄弟间通信,同其他外部库通信。

父子间通信

在学习组件的时候,props是输入,组件是输出。在这里的props,就是父向子传递的数据。而子向父传递数据,则是通过父级传递进来的props中的函数引用,间接的唤起父级处理函数,并传入参数。

/* 父组件 */export default class NameInput extends Component { constructor(props) { super(props); this.state = { value: "default" }; this.handleSubChange = this.handleSubChange.bind(this); } handleSubChange(newValue) { this.setState({ value: newValue }); } render() { return ( <div> <div>{this.state.value}</div> <Sub sub="sub1" subClick={this.handleSubChange} /> </div> ); }}

/* 子组件 */export default class NameInput extends Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange() { this.props.subClick("new sub"); } render() { return <div onClick={this.handleChange}>{this.props.sub}</div>; }}

在这个例子里,通过调用props上传递进来的处理函数,达到了子向父传递数据的目的。

兄弟间通信

不使用其他库的话,借助React原生API,有两种方法:

    通过父组件做中转借用父组件以外,也可以使用react的Context API

关于Context API,我们还是先翻文档Context。Context主要是为了处理多个组件可能需要获取同一组数据,例如文档中提到的theme,以及B端系统经常需要获取全局登录态,都可以使用ContextAPI。在Context中,有两个重要的概念,Provider和Consumer。Provider提供一个全局的数据源,订阅了它的数据源的Cusumer,不论节点嵌套多深都可以获取到Provider提供的数据。看一个例子。点我-CodeSandbox在一些轻量级的应用中,基本上可以使用ContextAPI解决多级数据共享的问题。当然,如果要更强大,只能用Redux等库了。关于Redux的使用,会在下一篇详细讲解。

同其他外部库通信

如果一个项目中,既有React,又有jQuery,又有Vue怎么办?怎么解决这种情形下得数据流转?这是阿里的一道面试题,我那时没有怎么写过React,基本上就是zepto和小程序,面试官没有为难我,提了这样的问题。当时我提出了一种想法,发布订阅加适配器模式。下面简单说一下我的想法。如果把这个场景抽象一下,可以看做是三种不同的组件需要相互通信,它们对数据的要求不一样,数据格式不同,但是一旦数据打到各自的组件内,其实数据流就不需要我们关心了。所以可以维护一个公共的数据集市,所有人都从数据集市里取数据,也向数据集市中发数据,数据集市是一个公开的发布者,各组件为订阅者。数据集市承担了适配的工作,对各个组件传进来的数据统一保存,在取数据时,根据组件的类型不同,派发不同形式的组件,这样,基本上就将组件间通信提升至了一个统一的数据集市,避免了组件的之间一对一通信。当然,这和flux的思想也很类似,统一数据源,统一分发,只和数据源交互,避免了多个组件间复杂通讯带来的数据流混乱。不管怎么样,在前端应用越来越复杂的今天,数据流的流向问题是绕不开,不论是单向数据流,还是多Model多数据流,都是适配当前场景下的解决方案,以后可能会有新的解决方案。但是目前,在React体系中,Redux是绕不开的。下一篇,说一下flux和Redux。

文章评论

Top