react 组件通信

学无止境，望君把握时间。

1.父子通信：

1.父组件将一个数据传递给子组件，但这个数据只有父组件能够修改，子组件不可以。
2.ref绑定：
  1.ref = "son"
  2.ref = { el => this.el = el}  如果是一个函数，这里的el指的就是当前组件  【推荐】

2. 子父通信：

父组件通过传递一个方法到子组件中，子组件可以根据这个方法来修改父组件中的数据。

3.跨组件通信：

原先的跨组件通信需要一级一级的传递，效率非常低下，但可以使用context来解决这个问题。

context 使用步骤：
1.创建context:
const MyContext = React.createContext(""默认值)
2.使用创建的 context来包裹目标组件的父组价。
<MyContext.Provider>
   <Father></Father>
</MyContext.Provider/>
3.在目标组件中定义一个类属性，这个类属性叫contextType
4.直接在目标组件中使用this.contextType就可以获得到数据了。
  class Son extends Component {
       static contextType = MyContext
       render () {
         <div>
            <p>
               {this.contextType}
            </p>
         </div>
       }
  }

4.非父子组件通信(多组件状态下数据共享)

1.react-router (react路由版本3)/ react-router-dom（react路由版本4）
2.flux
3.redux
4.mobx

5.高阶组件(HOC)

1.什么是高阶组件：
高阶组件是一个函数，这个函数接受一个参数，一个参数就是一个组件
2.格式如下：

const HOC = ( Comp ) => {
      return class 类名称 extends React.Component{
           render () {
             return <Comp></Comp>
           }
      }
}

3.使用高阶组件的优点就是
可以组件复用 （简单来说就是js中的函数封装 ，便于调用，减少代码冗余）

高阶组件举例：

import React, { Component } from 'react';

  // 高阶组件

  const Hoc = ( Comp ) => {
    return class Banner extends Component{
      banner () {
        //假设我定义个方法，这个方法就是实现一个轮播图
        return 'banner'
      }
      render () {
        return <Comp banner = { this.banner }></Comp>
      }
    }
  }
  class A extends Component {
    render () {
      return (
        <div>
          <h3> A组件 </h3>
          { this.props.banner() }
        </div>
      )
    }
  }
   class B extends Component {

    render () {
      return (
        <div>
          <h3> b组件 </h3>
          { this.props.banner() }
        </div>
      )
    }
  }
  const HocA = Hoc( A )
  const HocB = Hoc( B )
  class C extends Component {

    render () {
      return (
        <div>
          <h3> C组件 </h3>
        <HocA></HocA>
        <hr/>
        <HocB></HocB>
        </div>
      )
    }
  }
   export default C