React组件之间通信

代码地址：codesandbox.io/s/lucid-sto…

React组件通讯

在写React应用时，不可避免的要用到组件之间通讯。下面就是所有的组件之间通讯。

父子组件通信

React是单向数据流，数据只能从父组件传递到子组件，不能由子组件向父组件传递，并且不能在子组件中修改props的值。
如果父组件的某个props改变，React会从新渲染所有子节点。

父组件向子组件通信

父组件传递props给子组件，子组件得到props。实现了此类组件通讯。

子组件向父组件通信

子组件向父组件通信也是通过props。父组件通过props传递回调函数给子组件，子组件调用回调函数更新父组件实现通信。

例子：父组件通过props传递 age 和 setAge回调函数给子组件。

import React, { Component } from "react";
import Son from "./son";

class Parent extends Component {
  constructor() {
    super();
    this.state = {
      age: 10
    };
  }

  setAge = age => {
    this.setState({ age });
  };

  render() {
    const { age } = this.state;
    return (
      <>
        <div
          onClick={() => {
            console.log(age);
            this.setState({ age: age + 1 });
          }}
        >
          Parent Component: {age}
        </div>
        <Son age={age} setAge={this.setAge} />
      </>
    );
  }
}

export default Parent;

子组件接收props获取age，进行展示。子组件调用通过props传递的回调函数setAge向父组件通信，更新父组件。

import React, { Component } from "react";

class Son extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div
        onClick={() => {
          this.props.setAge(5);
        }}
      >
        son Component: {this.props.age}
      </div>
    );
  }
}

export default Son;

在线演示codesandbox地址

兄弟组件间通信

1.通过共同的父组件进行信息传递；
子组件A通过父组件props中的回调函数改变父组件中传入子组件B的props参数实现兄弟组件传参；

深层嵌套组件之间

父子组件不止一个层级可以用{...this.props}以更简洁的方式传递给子组件。

同样父组件的回调函数也可以通过{...this.props}传递给深层子组件进行回调。

使用context对象

如果父子层级嵌套很深，props要在每一层里面进行传递，而且中间层也不一定需要这些props。这个时候也可用context方式实现组件通信。

要求：1.父组件声明支持context，提供回调函数返回相应的context
2.子组件声明自己需要使用的context,调用回调函数。
3.父组件需要提供getChildContext函数，返回初始的context对象

非嵌套组件之间通信

可以是兄弟组件或者不在同一父级的非兄弟组件 1.用context
2.使用自定义事件自定义事件是典型的发布/订阅模式（也叫观察者模式），通过向事件对象上添加监听器和触发事件来实现组件间通信。

flux redux

后续加

全部通讯代码：codesandbox.io/s/lucid-sto…

参考： www.cnblogs.com/hanguidong/… www.jianshu.com/p/fb915d9c9… taobaofed.org/blog/2016/1… github.com/sunyongjian…