React把每一个有状态的组件都看成是一个状态机，组件内部通过state来维护组件状态的变化。事件中触发setState()来修改state数据，state改变后会重新进行render()

props (1)React中的数据流是自上而下，从父组件流向子组件。

(2)子组件从父组件提供的props中获取数据，并进行渲染，一般是纯展示的组件。

1. 父组件向子组件通信，可以通过 props 方式传递数据；也可以通过 ref 方式传递数据 父组件使用 ref 属性对子组件做标记，获取到子组件的实例或者dom元素，可以调用子组件的方法，传递数据。

2. 子组件向父组件通信，通过回调函数方式传递数据；

3. 兄弟组件之间： Parent Component 同一个父元素组件内，利用父与子 ，子 与父之间传递

4. 不太相关的组件之间； https://segmentfault.com/a/1190000023585646 Context Redux 发布/订阅模式

5.孙子组件多层级之间传值 Context：比如当前登陆的用户信息、ui主题、用户选择的语言等等。这些全局数据，很多组件可能都会用到，当组件层级很深时，用我们之前的方法，就得通过props一层一层传递下去，这显然太麻烦了

import ComponentC from './components/16ComponentC'

export const UserContext = React.createContext('')

const App = () => {
  return (
    <div className="App">
      <UserContext.Provider value={'chuanshi'}>
        <ComponentC />
      </UserContext.Provider>
    </div>
  )
}

孙子组件中 在使用的节点处消费 Context

import { UserContext } from '../App'
<UserContext.Consumer>
  {
    (user) => (
      <div>
        User context value {user}
      </div>
    )
  }
</UserContext.Consumer>

这里，React 组件也可以订阅到 context 变更。这能让你在函数式组件中完成订阅 context。 这需要函数作为子元素（function as a child）这种做法。这个函数接收当前的 context 值，返回一个 React 节点。传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。