React组件间通信

不借助redux等状态管理工具的React组件间的通信解决方法

组件通信分类

React组件间通信分为2大类，3种情况：

• 1）有嵌套关系的
  • 父->子
  • 子->父
    这里的父通指上级组件，不一定是直属上级，可跨级
• 2）无嵌套关系的
  • 兄弟组件间
  • 无共同上级组件的

父->子(props)

• 方法一：父组件向子组件传递 props，子组件得到 props 后进行相应的处理。（跨多层组件的时候只需要一层一层传下去就行）

  
  image.png

// 父组件 Parent.js：
import React,{ PureComponent } from "react";
import Children from "./Children.js";

export default class Parent extends PureComponent{
  state = {
    title: '父组件',
  }
  outputDesc = () => {
    console.log('父组件向子组件通信，通过props传递参数或者函数')；
  }
  render(){
    const { title } = this.state;
    const childProps = {
      title,
      onOutputDesc: this.outputDesc,
    }
    return(
      <Children {...childProps} />
    )
  }
}

// 子组件 Children.js：
// 界面上会显示出 【这是子组件获取到的父组件的title：父组件】
// 点击控制台会打印出 【父组件向子组件通信，通过props传递参数或者函数】
export default class Children extends PureComponent{
  render(){
    const { title, outputDesc } = this.props;
    return(
      <Fragment>
        <p>这是子组件获取到的父组件的title：{title}</p>
        <button onClick={onOutputDesc}>点击</button>
      </Fragment>
    )
  }
}

• 方法二：通过context

使用 React提供的context API(Provider 和 Consumer)
对于方法一，如果要通信的组件间的层次结构很深，中间的每一层组件都要去传递 props，增加了复杂性，并且这些 props 并不是这些中间组件自己所需要的。
当组件层次在三层以上时建议使用context，context做的事情就是创建一个上下文对象，并且对外暴露提供者（通常在组件树中上层的位置）和消费者，在上下文之内的所有子组件，
都可以访问这个上下文环境之内的数据，并且不用通过props。可以理解为有一个集中管理state的对象，并限定了这个对象可访问的范围，在范围之内的子组件都能获取到它内部的值。

// context.js
// Provider和Consumer总是成对出现
import React from 'react'
const demoContext = React.createContext();
const demoProvider = demoContext.Provider;
const demoConsumer = demoContext.Consumer;
export demoProvider;
export demoConsumer;

// 父组件
import React from 'react'
import List from './List'
import { demoProvider } from './context'

export default class Todo extends React.PureComponent {
  state = {
      list: [],
  }
  task = React.createRef()
  handleClick = () => {
      const list = [...this.state.list, this.task.current.value];
      this.setState({ list });
      this.task.current.value = '';
  }
  deleteTask = (index) => {
    const { list } = this.state;
    list.splice(index, 1);
    this.setState({ list });
  }
  render() {
    return (
      // 在父(祖先)级组件中把要传递内容放到value里面
      <demoProvider value={{deleteTask: this.deleteTask}}>
          <input type="text" ref={this.task}/>
          <button onClick={this.handleClick}> 添加 </button>
          <List list={this.state.list} deleteTask={this.deleteTask}/>
      </demoProvider>
    );
  }
}

// 子组件
import React from 'react'
import {demoConsumer} from './context'
export default class List extends React.PureComponent{

  render() {
    const { list } = this.props
    return (
      <demoConsumer>
        // 后代组件中的组件放在Consumer里面, 内部是一个函数, 这个函数接受一个对象作为参数, 参数是Provider里面提供的值
        {
          ({ deleteTask }) => {
            return list.map((item, index) => {
              return (
                <li key={item}>
                  { item }
                  <button onClick={()=>{deleteTask(index)}}> 删除 </button>
                </li>
              )
            })
          }
        }
      </demoConsumer>
    );
  }
}

子->父(回调)

父组件将一个函数作为 props 传递给子组件，子组件调用该回调函数，向父组件通信。

// 父组件 Parent.js：
import React,{ PureComponent, Fragment } from "react";
import Children from "./Children.js";

export default class Parent extends PureComponent{
  state = {
    description: '',
  }
  handleChangeDesc = (props) => {
    this.setState({description: '子组件向父组件通信，通过回调传递参数: 在子组件中点击按钮改变父组件state中的属性})
  }
  render(){
    const { description } = this.state;
    const childProps = {
      onChangeDesc: this.handleChangeDesc,
    }
    return(
      <Fragment>
        <p>{description}</p>
        <Children {...childProps} />
      </Fragment>
    )
  }
}

// 子组件 Children.js：
// 界面上会显示出更新后的description值 【子组件向父组件通信，通过回调传递参数: 在子组件中点击按钮改变父组件state中的属性】
export default class Children extends PureComponent{
  changeParentDesc = () => {
    const { onChangeDesc } = this.props;
    onChangeDesc({description: '子组件向父组件通信，通过回调传递参数: 在子组件中点击按钮改变父组件state中的属性'});
  }
  render(){
    const { title, outputDesc } = this.props;
    return(
      <button onClick={this.changeParentDesc}>点击</button>
    )
  }
}

兄弟组件间

方法一：利用共同的上级组件作为中间人进行通信（子1->父->子2）

方法二：通过自定义发布-订阅模式的事件实现（以Node.js中events模块的EventEmitter 类为例，这个会在我的另一篇文章中细讲）