深入React技术栈：组件间通信

我们知道React的组件之间是相互独立的，组件之间的通信可以方便数据的传递和交流，那么在组件之间的通信有以下三种方式，父组件向子组件传递，子组件向父组件传递，没有嵌套关系之间的组件传递。

• 父组件向子组件通信

  之前我们说过React的数据流向是单向数据流，父组件向子组件是通过props的方式传递需要的信息。

• 子组件向父组件通信

  在某些情况下，父组件需要知道子组件中的状态，那么子组件是如何将自己的状态传递给父组件。

  1. 利用回调函数的方式。
     在父组件中通过props传递事件函数给子组件，子组件在适当的时候通过props获得到该事件函数并触发。

  2. 利用自定义事件。

• 跨级组件通信

  前面两种组件中通信的方法都是比较常见和易于理解的，那么跨级组件通信，我们可以通过向更高层级传递props，如果这样做的话那么代码会显的不够优雅，而且易于混乱。在React中，我们还可以通过context来实现跨级父子组件间通信。

import React, {Component} from 'react'

class ListItem extends Component {
  constructor(props){
    super(props)
  }

  static contextTypes = {
    color: PropTypes.string
  }

  render() {
    const {value} = this.props

    return (
      <li>
        <span>{this.context.color}</span>  //context中的color
      </li>
    )
  }
}

class List extends Component {
  constructor(props){
    super(props)
  }
  
  static childContextTypes = {
    color: PropTypes.string
  }
  
  getChildContext() {
    return {
      color: 'red'
    }
  }
  
  render() {
    const {list} = this.props
    return (
      <div>
        <ul>
          {
            list.map((item, index) => {
              <ListItem key={index} value={item.value}></ListItem>
            })
          }
        </ul>
      </div>
    )
  }
}

如上，可以看到并没有给ListItem传递props，而是在父组件中定义ChildContext，这样从这一层开始的子组件都可以拿到定义的context。
context就类似一个全局变量。