首先想到react，会想到这是一款很流行的框架，既然是框架，肯定有它的便利之处，才值得我们去用它，它的便利之处，以后会一一对大家分享。 重新回到正题，就是一提到react，要去了解它这个东西，首先会想到官方文档，确实是一种不错的方案，但我这更喜欢拿出一点自己的理解。比如，react怎么组件怎样通信的，父子子父，兄弟间的组件如何通信，是否也有状态管理器，存一些共同的数据。 还有就是生命周期，从创建前，创建时，创建完成，更新，摧毁一系列流程。 咱们先来说一下父子通信 父子通信首先来说都是react组件。他们之间进行信息传递，父传子，子传父。

父传子

首先得引入子组件 import Son from './son' 参数通过key={xxx}传递详细一点就是 挂载到Son这个组件上

子组件 子组件通过this.props.key获取参数 详细一点就是

{this.props.info}

子传父

儿子也可以给父亲传递信息 props下面有callback通信 ，说白了就是父组件绑定一个callback，放置到子组件中，子组件调用这个方法，就会放置到callback返回给父组件。其实很简单，相当于，我去打水，放个桶子进去，水井用了，然后返回给我一桶水，我拿到这桶水，可以对水进行操作了。 详细一点时这么用的

//注意此处的callback handleChange = (e) => { // 在此处将参数带回 this.props.callback(e.target.value) }

跨组件通信

当然还有跨组件通信，今天主要讲一个Context 下面说一下它的用法 const { Consumer, Provider } = React.createContext(null) //创建 context 并暴露Consumer和Provide export { Consumer, Provider }//当然得抛出 无论时多少层级组件，父组件只要用Consume标签包着，子组件，其它组件都可以用Provider标签包裹获取Consumer标签包裹着内容和传递参数。

//父组件 import { Provider } from './context'

{this.state.info}

其它组件 {(info) => ( // 通过Consumer直接获取父组件的值

父组件的值:{info}

)}

当然创建多个Context需要设置一个单独的节点，毕竟是要唯一的，不然会混淆数据。

父组件操作子组件的方法（一）

此处就用到一个Onref 下面说一下具体用法

子组件 componentDidMount() { this.props.onRef(this) // 在这将子组件的实例传递给父组件this.props.onRef()方法 } componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

父组件操作子组件方法（二）

就是ref ref是react提供给我们的一个属性,通过它，我们可以访问 DOM 节点或者组件. //父组件 clearSonInput = () => { const { current } = this.son // 注意，这里必须通过 this.son.current拿到子组件的实例 current.clearInput() }

子组件 clearInput = () => { this.setState({ info: '', }) } ref的应用场景如下 值得注意的是，我们必须通过 this.childRef.current才能拿到子组件的实例。
使用 ref 常见的场景有管理焦点，文本选择或媒体播放、触发强制动画、集成第三方 DOM 库等。