React组件通信、高阶组件

React组件通信、高阶组件

组件通信

• 父子组件通信

  • 无论父组件传递是props还是state,子组件都是通过props接收

• 子父组件通信

  • 父组件传递方法给子组件，子组件调用父组件传递过来的方法（传参）
    • 自己的状态自己更改

• 非父子组件通信

  • 父组件将方法传递给子组件1，将状态传递给子组件2，子组件1调用方法修改父组件状态，从而改变子组件2的视图

  • ref链

    1. ref = ‘xxx’ this.refs.xxx

    2. ref = { el => this.xxx = el } this.xxx 【 推荐 】（可以调用子组件的方法）

• 跨组件通信

  在react没有类似vue中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。react提供了context api来实现跨组件通信, React 16.3之后的contextapi较之前的好用。

  使用流程

  • 创建上下文 React.createContext()4

    import { createContext } from 'react'
    
    // 创建上下文
    
    const MoneyContext = createContext( 100 )
    
    // 导出上下文
    
    export default MoneyContext
    

  • 使用上下文包裹目标组件的父组件

      <MoneyContext.Provider value = { money }>
      	<Father></Father>
      </MoneyContext.Provider>
  

  • 在目标组件中先定义一个静态属性 static contextType = MoneyContext

  • 通过 this.context来使用数据

  import React, { Component } from 'react';
  import MoneyContext from '../context/moneyContext';
  
  class Son extends Component{
    static contextType = MoneyContext
    render () {
      return (
        <div>
          <h3> Son </h3>
          <p> 爷爷给了我 { this.context } 钱 </p>
        </div>
      )
    }
  }
  export default Son
  

​ 多组件状态共享

​ Flux

​ redux

​ mobx 【 阿里 】

高阶组件（HOC）

Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。

功能：

​ 1. 进行某些方法或是属性的复用

​ 2. 让外层的组件替我们完成任务，那么里层组件直接使用就可以了

import React, { Component,Fragment } from 'react';

const WithRightCopy = Comp => { //Comp表示一个组件
   return class HighComp extends Component{
    constructor(props) {
      super(props)
      this.state = {
         copyInfo: '高阶组件信息'
      }
    }
    banner = () => {
      alert('banner')
    }
    
     render () {
       return (
        <Fragment>
          <Comp {...this.state} banner = { this.banner }></Comp>
        </Fragment>
       )
     }
   }
}

export default WithRightCopy

• 调用

import React, { Component } from 'react';

import WithRightCopy from './pages/HOCComp';
import CompA from './pages/CompA'
import CompB from './pages/CompB'
import CompC from './pages/CompC'

const HocA = WithRightCopy( CompA )
const HocB = WithRightCopy( CompB )
const HocC = WithRightCopy( CompC )

class App extends Component{
  render () {
    return (
      <div>
        <h3> 高阶组件 </h3>
        <HocA></HocA>
        <HocB></HocB>
        <HocC></HocC>
      </div>
    )
  }
}

export default App