React组件通信

最新推荐文章于 2025-07-03 11:43:17 发布

原创最新推荐文章于 2025-07-03 11:43:17 发布 · 183 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#React组件通信

React 同时被 2 个专栏收录

9 篇文章

订阅专栏

React组件通信

0 篇文章

订阅专栏

本文主要介绍了React组件通信的多种方式，包括父子、子父、非父子和跨组件通信，还提及多组件状态共享的Flux、redux、mobx等。同时讲解了HOC（高阶组件），它是一个返回新组件的函数，可复用方法或属性，还会讲解在CRA中配置装饰器模式支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件通信

分类：

父子组件通信

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

子父组件通信

父组件传递方法给子组件，子组件调用父组件传递过来的方法

注意：自己的状态自己更改

非父子组件通信

ref链

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

2. ref = { el => this.xxx = el } this.xxx 【推荐】

跨组件通信

context

使用流程

- 创建上下文 React.createContext()

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

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

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

- 通过 this.context来使用数据

多组件状态共享

Flux

redux

mobx 【阿里】

父组件与子组件通信

父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变
父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法…

子组件与父组件通信

父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。

跨组件通信

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

实例，使用context 实现购物车中的加减功能

// counterContext.js
import React, { Component, createContext } from 'react'

const {
  Provider,
  Consumer: CountConsumer
} = createContext()

class CountProvider extends Component {
  constructor () {
    super()
    this.state = {
      count: 1
    }
  }
  increaseCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  decreaseCount = () => {
    this.setState({
      count: this.state.count - 1
    })
  }
  render() {
    return (
      <Provider value={{
        count: this.state.count,
        increaseCount: this.increaseCount,
        decreaseCount: this.decreaseCount
      }}
      >
        {this.props.children}
      </Provider>
    )
  }
}

export {
  CountProvider,
  CountConsumer
}

// 定义CountButton组件
const CountButton = (props) => {
  return (
    <CountConsumer>
      // consumer的children必须是一个方法
      {
        ({ increaseCount, decreaseCount }) => {
          const { type } = props
          const handleClick = type === 'increase' ? increaseCount : decreaseCount
          const btnText = type === 'increase' ? '+' : '-'
          return <button onClick={handleClick}>{btnText}</button>
        }
      }
    </CountConsumer>
  )
}

// 定义count组件，用于显示数量
const Count = (prop) => {
  return (
    <CountConsumer>
      {
        ({ count }) => {
          return <span>{count}</span>
        }
      }
    </CountConsumer>
  )
}

// 组合
class App extends Component {
  render () {
    return (
  		<CountProvider>
        <CountButton type='decrease' />
        <Count />
        <CountButton type='increase' />
      </CountProvider>
  	)
  }
}

复杂的非父子组件通信在react中很难处理，多组件间的数据共享也不好处理，在实际的工作中我们会使用flux、redux、mobx来实现

HOC(高阶组件)

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

功能：

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

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

const NewComponent = higherOrderComponent(YourComponent)

比如，我们想要我们的组件通过自动注入一个版权信息。

// withCopyright.js 定义一个高阶组件
import React, { Component, Fragment } from 'react'

const withCopyright = (WrappedComponent) => {
  return class NewComponent extends Component {
    render() {
      return (
        <Fragment>
          <WrappedComponent />
          <div>&copy;版权所有 千锋教育 2019 </div>
        </Fragment>
      )
    }
  }
}
export default withCopyright

// 使用方式
import withCopyright from './withCopyright'

class App extends Component {
  render () {
    return (
  		<div>
        <h1>Awesome React</h1>
        <p>React.js是一个构建用户界面的库</p>
      </div>
  	)
  }
}
const CopyrightApp = withCopyright(App)

这样只要我们有需要用到版权信息的组件，都可以直接使用withCopyright这个高阶组件包裹即可。

在这里要讲解在CRA 中配置装饰器模式的支持。