React组件通信-非父子组件间的通信

系统管理员 2023-10-02 20:52 17阅读 0赞

#### 文章目录 ####

*   *  React非父子组件通信
     *   *  小知识点的补充
         *  Context应用场景
         *  Context相关API
         *  Context使用流程

### React非父子组件通信 ###

> 在React中, 非父子组件传递是通过一个API: Context

#### 小知识点的补充 ####

**在讲非父子组件传递之前, 我这边顺便补充一个小的知识点：[Spread Attributes][]**

> 例如现在有一个对象info, 将info的信息传入到子组件中, 大家可能都会这样传进去

export class App extends Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          info: {
        
            name: "chenyq",
            age: 18,
            height: 1.88
          }
        }
      }
      
      render() {
        
        const {
         info } = this.state
        return (
          <div>
            <Home name={
        info.name} age={
        info.age} height={
        info.height}/>
          </div>
        )
      }
    }

> 其实有一种展开语法可以帮助我们传入一个对象

export class App extends Component {
        
      constructor() {
        
        super()
    
        this.state = {
        
          info: {
        
            name: "chenyq",
            age: 18,
            height: 1.88
          }
        }
      }
      
      render() {
        
        const {
         info } = this.state
        return (
          <div>
            {
        /* 展开语法传入一个对象 */}
            <Home {
        ...info}/>
          </div>
        )
      }

> 获取数据的方式和我们普通传入数据的方式一样

export class Home extends Component {
        
      render() {
        
        const {
         name, age, height } = this.props
    
        return (
          <div>
            <h2>名字: {
        name} 年龄: {
        age} 身高: {
        height}</h2>
          </div>
        )
      }
    }

--------------------

#### Context应用场景 ####

**非父子组件数据的共享**：

> 在开发中，比较常见的数据传递方式是通过props属性自上而下（由父到子）进行传递。
> 
> 但是对于有一些场景：比如一些数据需要在多个组件中进行共享（地区偏好、UI主题、用户登录状态、用户信息等）。
> 
> 如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。

**但是，如果层级更多的话，一层层传递是非常麻烦，并且代码是非常冗余的**：

> React提供了一个API：Context；
> 
> Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props；
> 
> Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言；

--------------------

#### Context相关API ####

**React.createContext**

> 创建一个需要共享的Context对象：
> 
> 如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值；
> 
> defaultValue是组件在顶层查找过程中没有找到对应的Provider，那么就使用默认值

const MyContext = React.createContext({
        name: "默认名称", age: 1})

**Context.Provider**

> 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化：
> 
> Provider 接收一个 value 属性，传递给消费组件；
> 
> 一个 Provider 可以和多个消费组件有对应关系；
> 
> 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据；
> 
> 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染；

<MyContext.Provider value={
        {
        name: "chenya", age: 18}}>
      <Home {
        ...info}/>
    </MyContext.Provider>

**Class.contextType**

> 挂载在类组件上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象：
> 
> 这能让你使用 this.context 来消费最近 Context 上的那个值；
> 
> 你可以在任何生命周期中访问到它，包括 render 函数中；

HomeHeader.contextType = MyContext

**Context.Consumer**

> 这里，React 组件也可以订阅到 context 变更。这能让你在 函数式组件 中完成订阅 context。
> 
> 这里需要 函数作为子元素（function as child）这种做法；
> 
> 这个函数接收当前的 context 值，返回一个 React 节点；

<MyContext.Consumer>
      {
        
        value => {
        
          return <h2>名字: {
        value.name} 年龄: {
        value.age}</h2>
        }
      }
    </MyContext.Consumer>

--------------------

#### Context使用流程 ####

**例如我们现在有一个爷爷组件App.jsx, 现在需要向孙子组件HomeHeader.jsx传递数据**

**第一步操作: 创建一个Context, 由于这个Context会在爷爷组件和孙子组件中都用到, 所以我们单独创建一个context文件夹, 在文件夹的`my-context.js`文件中**

> 这个文件分别导入要传数据的组件和要接受数据的组件

import React from 'react'
     
    const MyContext = React.createContext({
        name: "默认名称", age: 1})
    
    export default MyContext

**第二步操作: 在爷爷组件中, 通过MyContext中Provider中value属性为后代提供数据**

// 爷爷组件
    
    import MyContext from './context/my-context'
    
    export class App extends Component {
        
      render() {
        
        const {
         info } = this.state
        return (
          <div>
            <MyContext.Provider value={
        {
        name: "chenya", age: 18}}>
              <Home {
        ...info}/>
            </MyContext.Provider>
          </div>
        )
      }
    }
    
    export default App

**第三步操作: 在要接受数据的孙子组件中, 设置组件的contextType为哪一个Context, 因为可能会有多个Context, 所以需要明确指定是哪一个**

// 孙子组件
    
    import React, {
         Component } from 'react'
    import MyContext from './context/my-context'
    
    export class HomeHeader extends Component {
        
      render() {
        
        return (
          <div>hhh</div>
        )
      }
    }
    
    HomeHeader.contextType = MyContext
    
    export default HomeHeader

**第四步操作: 获取数据, 并且使用数据**

> 有两种方法可以获取, 如果该孙子组件只有使用一个Context的数据, 那么可以直接在`this.context`中获取数据

import React, {
         Component } from 'react'
    import MyContext from './context/my-context'
    
    export class HomeHeader extends Component {
        
      render() {
        
        // 直接在this.context中获取
        const {
         name, age } = this.context
    
        return (
          <div>
            <h2>名字: {
        name} 年龄: {
        age}</h2>
          </div>
        )
      }
    }
    
    HomeHeader.contextType = MyContext
    
    export default HomeHeader

> 如果该孙子组件已经通过`HomeHeader.contextType = 其他Context`这个API, 绑定了其他的Context, 那么就需要如下方式获取

import React, {
         Component } from 'react'
    import MyContext from './context/my-context'
    
    export class HomeHeader extends Component {
        
      render() {
        
        return (
          <div>
            <MyContext.Consumer>
              {
        
                value => {
        
                  return <h2>名字: {
        value.name} 年龄: {
        value.age}</h2>
                }
              }
            </MyContext.Consumer>
          </div>
        )
      }
    }
    
    HomeHeader.contextType = MyContext
    
    export default HomeHeader

*  **什么时候使用Context.Consumer呢？**

> 当使用value的组件是一个`函数式组件`时；

import ThemeContext from "./context/theme-context"
    
    function HomeBanner() {
        
    
      return <div>
        {
        /* 函数式组件中使用Context共享的数据 */}
        <ThemeContext.Consumer>
          {
        
            value => {
        
              return <h2> Banner theme:{
        value.color}</h2>
            }
          }
        </ThemeContext.Consumer>
      </div>
    }
    
    export default HomeBanner

> 当组件中需要使用多个Context时;

[Spread Attributes]: https://zh-hans.reactjs.org/docs/jsx-in-depth.html