详解React中的组件通信问题

引入

本来我是没想过总结这些东西的，会感觉比较入门。但是之前同学去腾讯面试问到了这个问题(react或vue的组件通信)，我帮他整理，顺便写demo的过程中，会有一些新的体会，多总结还是有利于进步的呀。

父子组件

父 → 子

parent组件传给child组件，符合react的单向数据流理念，自上到下传递props。

// 父组件
class Parent extends Component {
 constructor() {
  super();
  this.state = {
   value: '',
  }
 }

 handleChange = e => {
  this.value = e.target.value;
 }

 handleClick = () => {
  this.setState({
   value: this.value,
  })
 }

 render() {
  return (
   <div>
    我是parent
    <input onChange={this.handleChange} />
    <div className="button" onClick={this.handleClick}>通知</div>
    <div>
     <Child value={this.state.value} />
    </div> 
   </div>
  );
 }
}

// 子组件
class Child extends Component {
 render() {
  const { value } = this.props;
  return (
   <div>
    我是Child，得到传下来的值：{value}
   </div>
  );
 }
}

父组件做的就是定义好 state ，定义好事件函数，input onChange 的时候，去缓存 value 值，然后点击 button 的时候，改变 state , 子组件只负责展示 value 。

子 → 父

child 组件通知 parent 组件， 主要是依靠 parent 传下来的 callback 函数执行，改变 parent 组件的状态，或者把 child 自己的 state 通知 parent 。分两种情况：

state 定义在 parent 组件

// parent

class Parent extends Component {
 constructor() {
  super();
  this.state = {
   value: '',
  }
 }

 setValue = value => {
  this.setState({
   value,
  })
 }

 render() {
  return (
   <div>
    <div>我是parent, Value是：{this.state.value}</div> 
    <Child setValue={this.setValue} />
   </div>
  );
 }
}

class Child extends Component {

 handleChange = e => {
  this.value = e.target.value;
 }

 handleClick = () => {
  const { setValue } = this.props;
  setValue(this.value);
 }

 render() {
  return (
   <div>
    我是Child
    <div className="card">
     state 定义在 parent
     <input onChange={this.handleChange} />
     <div className="button" onClick={this.handleClick}>通知</div>
    </div>
   </div>
  );
 }
}

parent 组件把改变 state 的 setValue 函数传给 child ，child 组件自己处理内部的状态（这里是表单的value值），当 child 组件分发消息的时候， 执行 parent 的 setValue 函数，从而改变了 parent 的 state，state发生变化， parent 组件执行 re-render 。

state 定义在 child 组件

// parent

class Parent extends Component {

 onChange = value => {
  console.log(value, '来自 child 的 value 变化');
 }

 render() {
  return (
   <div>
    <div>我是parent
    <Child onChange={this.onChange} />
   </div>
  );
 }
}

class Child extends Component {

 constructor() {
  super();
  this.state = {
   childValue: ''
  }
 }

 childValChange = e => {
  this.childVal = e.target.value;
 }

 childValDispatch = () => {
  const { onChange } = this.props;
  this.setState({
   childValue: this.childVal,
  }, () => { onChange(this.state.childValue) })
 }

 render() {
  return (
   <div>
    我是Child
    <div className="card">
     state 定义在 child
     <input onChange={this.childValChange} />
     <div className="button" onClick={this.childValDispatch}>通知</div>
    </div>
   </div>
  );
 }
}

有时候 state 是需要定义在 child 组件的，比如弹窗， CheckBox 这种开关性质的，逻辑是重复的，state 定义在组件内部更好维护， 复用性更好。但是 child 的 state 是需要告知我的 parent 组件的， 同样还是执行 parent 传下来的 change 函数。

兄弟组件

有时候可能出现页面中的某两部分通信，比如省市的级联选择，点击 button 改变颜色等等，组件并不是父子级，没有嵌套关系的时候。这种时候通常是依赖共有的顶级 Container 处理或者第三方的状态管理器。其实原理都是相通的，兄弟 A 的 value 发生变化，分发的时候把 value 值告诉一个中间者 C ，C 会自动告知 B，实现 B 的自动render 。

利用共有的Container

// container
class Container extends Component {
 constructor() {
  super();
  this.state = {
   value: '',
  }
 }

 setValue = value => {
  this.setState({
   value,
  })
 }

 render() {
  return (
   <div>
    <A setValue={this.setValue}/>
    <B value={this.state.value} />
   </div>
  );
 }
}

// 兄弟A
class A extends Component {

 handleChange = (e) => {
  this.value = e.target.value;
 }

 handleClick = () => {
  const { setValue } = this.props;
  setValue(this.value);
 }

 render() {
  return (
   <div className="card">
    我是Brother A, <input onChange={this.handleChange} />
    <div className="button" onClick={this.handleClick}>通知</div>
   </div>
  )
 }
}

// 兄弟B
const B = props => (
 <div className="card">
  我是Brother B, value是：
  {props.value}
 </div>
);
export default B;

组件 A 中的表单 value 值，告知了父级 Container 组件（通过 setValue 函数改变 state），组件 B 依赖于 Container 传下来的 state，会做出同步更新。这里的中间者是 Container。

利用Context

上面的方式，如果嵌套少还可以，如果嵌套特别多，比如一级导航栏下的二级导航栏下的某个按钮，要改变页面中 content 区域的 table 里的某个列的值...他们同属于一个 page 。这样传递 props 就会很痛苦，每一层组件都要传递一次。

// 顶级公共组件
class Context extends Component {

 constructor() {
  super();
  this.state = {
   value: '',
  };
 }

 setValue = value => {
  this.setState({
   value,
  })
 }

 getChildContext() { // 必需
  return { 
   value: this.state.value,
   setValue: this.setValue,
  };
 }
 render() {
  return (
   <div>
    <AParent />
    <BParent />
   </div>
  );
 }
}
// 必需
Context.childContextTypes = {
 value: PropTypes.string,
 setValue: PropTypes.func,
};

// A 的 parent
class AParent extends Component {
 render() {
  return (
   <div className="card">
    <A />
   </div>
  );
 }
}
// A
class A extends Component {

 handleChange = (e) => {
  this.value = e.target.value;
 }

 handleClick = () => {
  const { setValue } = this.context;
  setValue(this.value);
 }

 render() {
  return (
   <div>
    我是parentA 下的 A, <input onChange={this.handleChange} />
    <div className="button" onClick={this.handleClick}>通知</div>
   </div>
  );
 }
}
// 必需
A.contextTypes = {
 setValue: PropTypes.func,
};

// B 的 parent
class BParent extends Component {
 render() {
  return (
   <div className="card">
    <B />
   </div>
  );
 }
}

// B
class B extends Component {

 render() {
  return (
   <div>
    我是parentB 下的 B, value是：
    {this.context.value}
   </div>
  );
 }
}

B.contextTypes = {
 value: PropTypes.string,
};

组件 A 仍是 消息的发送者，组件 B 是接收者， 中间者是 Context 公有 Container 组件。context是官方文档的一个 API ，通过 getChildContext 函数定义 context 中的值，并且还要求 childContextTypes 是必需的。这样属于这个 Container 组件的子组件，通过 this.context 就可以取到定义的值，并且起到跟 state 同样的效果。中间者其实还是 Container，只不过利用了上下文这样的 API ，省去了 props 的传递。另外：这个功能是实验性的，未来可能会有所改动。

发布订阅

这种一个地方发送消息，另一个地方接收做出变化的需求，很容易想到的就是观察者模式了。具体的实现会有很多种，这里我们自己写了一个 EventEmitter 的类（其实就是仿照 node 中的 EventEmitter 类），如果不了解观察者，可以看我的另一篇文章 观察者模式 。

// 发布订阅类
class EventEmitter {
 _event = {}

 // on 函数用于绑定
 on(eventName, handle) {
  let listeners = this._event[eventName];
  if(!listeners || !listeners.length) {
   this._event[eventName] = [handle];
   return;
  }
  listeners.push(handle);
 }
 // off 用于移除
 off(eventName, handle) {
  let listeners = this._event[eventName];
  this._event[eventName] = listeners.filter(l => l !== handle);
 }
 // emit 用于分发消息
 emit(eventName, ...args) {
  const listeners = this._event[eventName];
  if(listeners && listeners.length) {
   for(const l of listeners) {
    l(...args);
   }
  }
 }
}
const event = new EventEmitter;
export { event };

// Container
import A from './a';
import B from './b';

const Listener = () => {
 return (
  <div>
   <A />
   <B />
  </div>
 );
};
export default Listener;

// 兄弟组件 A
import { event } from './eventEmitter';

class A extends Component {

 handleChange = e => {
  this.value = e.target.value;
 }

 handleClick = () => {
  event.emit('dispatch', this.value);
 }

 render() {
  return (
   <div className="card">
    我是Brother A, <input onChange={this.handleChange} />
    <div className="button" onClick={this.handleClick}>通知</div>
   </div>
  )
 }
}

// 兄弟组件 B
import { event } from './eventEmitter';

class B extends Component {
 state = {
  value: ''
 }

 componentDidMount() {
  event.on('dispatch', this.valueChange);
 }

 componentWillUnmount() {
  event.off('dispatch', this.valueChange);
 }

 valueChange = value => {
  this.setState({
   value,
  })
 }

 render() {
  return (
   <div className="card">
    我是Brother B, value是：
    {this.state.value}
   </div>
  );
 }
}

仍然是组件 A 用于分发消息，组件 B 去接收消息。这里的中间者其实就是 event 对象。需要接收消息的 B 去订阅 dispatch 事件，并把回调函数 valueChange 传入，另外 B 定义了自己的 state，方便得到 value 值的时候自动渲染。组件 A 其实就是把内部的表单 value 在点击的时候分发，发布事件，从而 B 中的 valueChange 执行，改变 state。这种方式比较方便，也更直观，不需要借助 Container 组件去实现，省去了很多逻辑。

Redux || Mobx

Redux 或者 Mobx 是第三方的状态管理器，是这里我们通信的中间者。大型项目最直接的就是上库... 更方便，更不容易出错。 但其实小项目就没什么必要了。东西比较多，这里不再阐述它们的实现和做了什么。

总结

react 特殊的自上而下的单向数据流，和 state 的特性，造就以这样的思想实现组件通信。除去发布订阅和 Redux 等，其他的都是 props 自上而下传递的理念，子组件需要的总是通过父组件传递下来的，关于 state 的定义，还是看具体的应用场景了。

另外本次的代码都放在https://github.com/sunyongjian/rc-communication-demo， 可以 done 下来加深理解。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# React  # 组件通信  # React中的组件通信  # React组件间通信的三种方法（简单易用）  # React父子组件传值(组件通信)的实现方法  # React数据传递之组件内部通信的方法  # 关于react中组件通信的几种方式详解  # React中父子组件通信详解  # React中实现组件通信的几种方式小结  # react里组件通信的几种方式小结  # React使用Redux实现组件通信的项目实践  # 我是  # 自己的  # 传下  # 都是  # 表单  # 自上而下  # 管理器  # 第三方  # 就会  # 会有  # 放在  # 还可以  # 都要  # 不需要  # 两种  # 腾讯  # 其他的  # 这个问题  # 很容易  # 就没 

相关文章： 如何在万网开始建站？分步指南解析  香港服务器租用费用高吗？如何避免常见误区？  如何通过建站之星自助学习解决操作问题？  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  深圳网站制作设计招聘,关于服装设计的流行趋势，哪里的资料比较全面？  Thinkphp 中 distinct 的用法解析  css网站制作参考文献有哪些,易聊怎么注册？  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  深圳网站制作平台,深圳市做网站好的公司有哪些？  建站之星免费模板：自助建站系统与智能响应式一键生成  ,制作一个手机app网站要多少钱？  制作网页的网站有哪些,电脑上怎么做网页？  如何在云主机上快速搭建网站？  建站之星后台管理如何实现高效配置？  如何解决ASP生成WAP建站中文乱码问题？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  视频网站app制作软件,有什么好的视频聊天网站或者软件？  ,怎么在广州志愿者网站注册？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  宝塔建站教程：一键部署配置流程与SEO优化实战指南  网站制作费用多少钱,一个网站的运营，需要哪些费用？  如何在IIS中新建站点并解决端口绑定冲突？  图册素材网站设计制作软件,图册的导出方式有几种？  ,网页ppt怎么弄成自己的ppt？  建站之星如何通过成品分离优化网站效率？  岳西云建站教程与模板下载_一站式快速建站系统操作指南  制作网站的软件免费下载,免费制作app哪个平台好？  c++怎么使用类型萃取type_traits_c++ 模板元编程类型判断【方法】  太平洋网站制作公司,网络用语太平洋是什么意思？  小建面朝正北，A点实际方位是否存在偏差？  宝塔面板创建网站无法访问？如何快速排查修复？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  魔毅自助建站系统：模板定制与SEO优化一键生成指南  简历在线制作网站免费,免费下载个人简历的网站是哪些？  威客平台建站流程解析：高效搭建教程与设计优化方案  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  网页设计与网站制作内容,怎样注册网站？  免费网站制作appp,免费制作app哪个平台好？  建站一年半SEO优化实战指南：核心词挖掘与长尾流量提升策略  安徽网站建设与外贸建站服务专业定制方案  保定网站制作方案定制,保定招聘的渠道有哪些？找工作的人一般都去哪里看招聘信息？  单页制作网站有哪些,朋友给我发了一个单页网站，我应该怎么修改才能把他变成自己的呢，请求高手指点迷津？  宝塔建站助手安装配置与建站模板使用全流程解析  制作网站怎么制作,*游戏网站怎么搭建？  建站之星收费标准详解：套餐费用及年费价格表一览  html制作网站的步骤有哪些,iapp如何添加网页？