react组件通信

react是以组合组件的形式组织的，那么组件间是如何传递信息的呢？

父组件向子组件通信

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

import React, { Component } from 'react'


export default class Parent extends Component{
    constructor(props){
        super()
        this.state = {
            value:''
        }
    }

    handleChange = e => {
        // 缓存 value 值
        this.value = e.target.value
    }

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

    render(){
        return(
            <div>
                parent，传递给child的值：
                <input onChange={this.handleChange} />
                <div className="button">
                    <button onClick={this.handleClick}>通知</button>
                </div>
                <div>
                    <Child value={this.state.value} />
                </div> 
            </div>
        )
    }
}

class Child extends Component{
    render(){
        const {value} = this.props
        return(
            <div>
                child，接受parent传过来的值：{value}
            </div>
        )
    }
}

父组件做的就是定义好 state ，定义好事件函数，input onChange 的时候，去缓存 value 值，然后点击 button 的时候，改变 state , 子组件只负责展示 value ，这也是组件通信最简单最常用的方式

子组件向父组件通信

父组件可以通过传递 props 的方式，自顶而下向子组件进行通讯。而子组件向父组件通讯，同样也需要父组件向子组件传递 props 进行通讯，只是父组件传递的，是作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中。

state 定义在 parent 组件

import React, { Component } from 'react'


export default class Parent extends Component{
    constructor(props){
        super()
        this.state = {
            value:''
        }
    }

    handleChange = e => {
        // 缓存 value 值
        this.value = e.target.value
    }

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

    render(){
        return(
            <div>
                parent，传递给child的值：
                <input onChange={this.handleChange} />
                <div className="button">
                    <button onClick={this.handleClick}>通知</button>
                </div>
                <hr />
                <div>
                    <Child value={this.state.value} />
                </div> 
            </div>
        )
    }
}

class Child extends Component{
    render(){
        const {value} = this.props
        return(
            <div>
                child，接受parent传过来的值：{value}
            </div>
        )
    }
}

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

state 定义在 child 组件

import React, { Component } from 'react'

export default class Parent extends Component{
    onChange = value => {
        console.log(value, '来自 child 的 value 变化')
    }

    render(){
        return(
            <div>
                parent接收parent的值：
                <hr />
                <Child onChange={this.onChange} />
            </div>
        )
    }
}


class Child extends Component{
    super(props){
        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，child传给parent的值：
                    <input onChange={this.childValChange} />
                    <div className='button'>
                        <button onClick={this.childValDispatch}>通知</button>
                    </div>
                </div>
            </div>
        )
    }
}

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

兄弟组件通信

有时候兄弟A组件要向兄弟组件B传递信息，这时候需要用到状态提升了，即是把A组件的信息传递给父组件，然后父组件将A组件的信息传递给B组件。

import React, { Component } from 'react'

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

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

    render() {
        return (
            <div>
                <A setValue={this.setValue}/>
                {/* 父组件将从A组件传过来的value传给B */}
                <hr />
                <B value={this.state.value} />
            </div>
        )
    }
}


  // 兄弟A
class A extends Component {

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

    handleClick = () => {
        const { setValue } = this.props
        // 组件A将自己value传给父组件
        setValue(this.value)
    }

    render() {
        return (
            <div className="card">
                兄弟组件A, <input onChange={this.handleChange} />
                <div className="button" >
                    <button onClick={this.handleClick}>通知</button>
                </div>
            </div>
        )
    }
}

// 兄弟B
const B = props => (
    <div className="card">
        兄弟组件B, value是：{props.value}
    </div>
)

这种方法可以解决简单的父子、兄弟嵌套，但是一旦嵌套过深，那么这种方法就会很麻烦，那么有没有更通用的方法呢？我想想，一个父组件多个子组件，很容易想到观察者模式

观察者模式

如果对观察这模式不了解，可以观看前面的文章发布订阅模式，这里就不细讲了，直接看代码

import React, { Component } from 'react'
import {event} from './EventEmitter'

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


// 兄弟组件 A

class A extends Component {

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

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

  render() {
    return (
      <div className="card">
        兄弟组件A, <input onChange={this.handleChange} />
        <div className="button">
            <button onClick={this.handleClick}>通知</button>
        </div>
      </div>
    )
  }
}


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">
          兄弟组件B, value是：{this.state.value}
        </div>
      )
    }
  }

class EventEmitter{
    constructor(){
        // key存储函数名，value是一个数组，存储函数，类似{'hi':[]}
        this.events = {}
    }

    on(eventName, func){
        //键值对：事件名,函数
        let callbacks = eventName in this.events ? this.events[eventName] : []
        callbacks.push(func)
        this.events[eventName] = callbacks
    }

    off(eventName, func){
        //根据事件名找到函数，然后从函数缓存数组里面删除对应的函数
        if (!eventName in this.events) return
        let callbacks = this.events[eventName]
        let index = callbacks.indexOf(func)
        callbacks.splice(index, 1)
    }
    
    //在函数缓存数组执行所有函数
    emit(eventName, ...args){
        if (!eventName in this.events) return
        const callbacks = this.events[eventName]
        callbacks.map(cb => {
            cb(...args)
        })
    }
}

const event = new EventEmitter
export { event }

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

context

当我们需要让子组件跨级访问时，我们可以用观察者模式来解决这个问题，他带来的问题也如上所述；我们也可以用状态提升的方法来利用props来层层传递，但这样做的问题也很明显，我们需要把某一个状态层层传递，如果我们的组件树很层次很深的话，这样维护起来简直是灾难，况且有的组件根本不需要这个状态，那么如果这颗组件树能够全局共享这个状态就好了，我们要的时候就去取这个状态，不用手动地传。

React.js 的 context 就是这么一个东西，某个组件只要往自己的 context 里面放了某些状态，这个组件之下的所有子组件都直接访问这个状态而不需要通过中间组件的传递。一个组件的 context 只有它的子组件能够访问，它的父组件是不能访问到的，你可以理解每个组件的 context 就是瀑布的源头，只能往下流不能往上飞。光说还是不知道怎么用，我们看下面这个例子

import React,{Component} from 'react'
import PropTypes from 'prop-types'

// 顶级公共组件
export default class Parent 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>
        )
    }
}

// 必需
Parent.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">
                <button onClick={this.handleClick}>
                    通知
                </button>
            </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 是接收者，中间者是 Parent 公有 Container 组件。通过 getChildContext 函数定义 context 中的值，并且还要求 childContextTypes 是必需的。这样属于这个 Container 组件的子组件，通过this.context 就可以取到定义的值，并且起到跟 state 同样的效果。中间者其实还是 Container，只不过利用了上下文这样的 API ，省去了 props 的传递。

context 打破了组件和组件之间通过 props 传递数据的规范，极大地增强了组件之间的耦合性。但是就如全局变量一样，context 里面的数据能被随意接触就能被随意修改，每个组件都能够改 context 里面的内容会导致程序的运行不可预料。

但是context这种机制对于前端应用状态管理来说是很有帮助的，因为毕竟很多状态都会在组件之间进行共享，context 会给我们带来很大的方便。Redux就是充分地利用了这种机制给我们提供便利的状态管理服务。

Redux || Mobx

这两个库后面会讲，所以现在就不提及了

参考链接：

React组件之间的通信

React.js 的 context