1 父子通信， 使用的时候 在子组件上面自定义属性，子组件通过 this.props[累组件]或者props[函数组件]接收然后使用

子组件 
    class Son extends React.Component {

        render(){
                // this.props.til     til    为父组件传递数据
                return <div>...</div>
        }
    }
    父组件
    class Home extends React.Component {
        render(){
            return <>
                <Son  til="参数" />
            </>
        }
    }

 　　2 子父通信 ，使用的时候其实还是父传子，只不过这次将父组件的方法传递给子组件，然后子组件去调用父组件传递的方法，通过传递实参的我方式将子组件的数据传递过来

    class Son extends React.Component {

        render(){
                // this.props.til     til    为父组件传递数据

                return <div onClick={()=>this.props.onData('传递的数据')}>...</div>
        }
    }
    父组件
    class Home extends React.Component {
        getData=(data)=>{
            //data就是接收的参数。可以在里面来使用
        }
        render(){
            return <>
                <Son  onGetData={this.getData}/>
            </>
        }
    }

 　　3 状态提升，这种情况将两个组件通过同一个父组件来包裹，将数据绑定到父组件上，然后通过子父和父子进行通信

　　 4 context传递 ， 利用Context对象来传递，Context 提供了 Provider 和 Consumer 俩个组件，Provider负责提供数据，Consumer负责使用数据 ， Provider需要包裹父组件，那么所有它的子代组件都可以获取到共享值，实际上react-router，react-redux 等等都在使用context

const Context = React.Contexxt('这里是默认值')；
// App组件里面
class App extends React.Component {
    render(){
         return <>
                 <Context.Provider value={data ‘传递的数据’} >
                         <Home />  // 只要是home的组件的子代组件都可以获取到传餐
                 <Context.Provider>
         </>
    }
}

// Home 组件
class Home extends React.Component {
      render(){
              return <>
                  <Son />  
                  <Context.Consumer>
                      {
                          data=> data就可以拿到数据
                      }
                  </Context.Consumer>
              </>
      }
}

// Son
class Son extends React.Component {
      static contextType = Context.  // 可以静态接收。接收完之后。可以使用 this.context来调用context的值
      render(){
              return <>
              //Son组件里面可以获取到 context的值
                  <Context.Consumer>
                      {
                          data=> data就可以拿到数据
                      }
                  </Context.Consumer>
              </>
      }
}

 　　 5 reudx. 可以使用redux 来进行组件通信，适用于多个组件使用同一个数据 ，可以更好的维护和使用

上一篇

后台管理系统用户验证权限怎么实现？

下一篇

你知道react里面的createPortal么？有哪些使用场景？