React 组件间通信 Context API 2

淡淡的烟草味﹌ 2022-11-21 15:10 206阅读 0赞

旧版的Context API 在和s`houldComponentUpdate` 搭配使用时很容易出问题。

在React 16.3版本发布了新的Context API 对使用方法做了大的修改。

首先让我们来看看新版 Context API 都由哪几部分组成：

> `1.React.createContext` 方法用于创建一个 Context 对象。该对象包含 `Provider` 和 `Consumer`两个属性，分别为两个 React 组件。
> 
> `2.Provider` 组件。用在组件树中更**外层**的位置。它接受一个名为** `value`** 的 prop，其值可以是任何 JavaScript 中的数据类型。
> 
> `3.Consumer` 组件。可以在 `Provider` 组件**内部**的任何一层使用。它接收一个名为** `children` **值为一个函数的 prop。这个函数的参数是 `Provider` 组件接收的那个 `value` prop 的值，返回值是一个 React 元素（一段 JSX 代码）。

下面详细解释各部分的含义：

1. 定义全局context对象

import React from 'react'
    
    const GlobalContext = React.createContext(defaultValue)
    const {Provider, Consumer} = React.createContext(defaultValue);
    export default GlobalContext

可以通过const \{Provider, Consumer\} = React.createContext(defaultValue)  格式申明Provider 和 Consumer 。

当 React 渲染 context 组件 Consumer 时，它将从组件树的上层中**最接近的匹配的 Provider**读取当前的 context 值。如果上层的组件树没有一个匹配的 Provider，而此时你需要渲染一个 Consumer 组件，那么你可以用到 defaultValue 。

2. 引入GlobalContext，并使用GlobalContext.Provider（根组件使用，作为生产者）

接收一个 value 属性传递给 Provider 的后代 Consumers。一个 Provider 可以联系到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。

<GlobalContext.Provider
      value={
       {
        background: 'green',
        color: 'white',
        content:this.state.content,
        methodA:this.changeStateByChildren
      }}
    />

3.  引入GlobalContext并调用context，使用GlobalContext.Consumer（子组件使用，作为消费者）

接收一个函数作为子节点，函数接收当前 context 的值并返回一个 React 节点。**传递给函数的 value 将等于组件树中上层 context 的最近的 Provider 的 value 属性**。如果 context 没有 Provider ，那么 value 参数将等于被传递给 createContext() 的 defaultValue 。

<GlobalContext.Consumer>
      {
        context => {
          return (
            <div>
              <h1 style={
       {background: context.background, color: context.color}}>
                {context.content}
              </h1>
              <Input methodA = {context.methodA} value={context.content}></Input>
            </div>
          )
        }
      }
    </GlobalContext.Consumer>

`注意： Provider` 组件使用`Object.is`方法判断prop值是否发生改变，当prop的值改变时，其内部组件树中对应的 `Consumer` 组件会接收到新值并重新渲染。**此过程不受 `shouldComponentUpdete` 方法的影响。**

一个使用新版Context API的完整例子：

import React, { Component } from 'react';
    import './App.css';
    
    // 第一步，创建 context
    const myContext = React.createContext()
    
    // 第二步，创建 Provider Component
    
    class MyProvider extends Component {
      state = {
        name: "rails365",
        age: 27
      }
    
      render() {
        return (
          <myContext.Provider value={
       { state: this.state }}>
            { this.props.children }
          </myContext.Provider>
        )
      }
    }
    
    const Family = (props) => {
      return (
        <div>
          <h1>Family</h1>
          <Person />
        </div>
      )
    }
    
    
    class Person extends Component {
      render() {
        return (
          <div>
            <h1>Person</h1>
            <myContext.Consumer>
              { ({ state }) => <p>My age is { state.age }</p> }
            </myContext.Consumer>
          </div>
        );
      }
    }
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <p>Hello App</p>
            <MyProvider>
              <Family />
            </MyProvider>
          </div>
        );
      }
    }
    
    export default App;

参考资料：

1. [https://www.cnblogs.com/qiqi715/p/10414229.html][https_www.cnblogs.com_qiqi715_p_10414229.html]

2. [https://www.jianshu.com/p/875eaf633119][https_www.jianshu.com_p_875eaf633119]

[https_www.cnblogs.com_qiqi715_p_10414229.html]: https://www.cnblogs.com/qiqi715/p/10414229.html
[https_www.jianshu.com_p_875eaf633119]: https://www.jianshu.com/p/875eaf633119