带有工作示例的Class.contextType和Context.Consumer之间的区别

Question

我试图了解React上下文API，并且正在查看官方文档。如果有人可以进一步说明以下几点，我将不胜感激，因为官方文档并未明确指出这一点。

1. contextType和Consumer方法之间的区别是 消耗提供商提供的值？在什么情况下我们应该 使用哪种方法？
2. 提供商在基于类的组件中公开的值是否可以 由使用useContext的React钩子组件使用？我也一样 安装程序结束，我最终将useContext转换为Context.Consumer。
3. 我有一个非常简单的设置，其中有一个提供程序类 基于基础的组件，它公开了一些状态值。提供者 只有一个子组件，它也是一个消费者。当我使用 Context.Consumer在子级中获取值的所有内容 可以正常工作。但是当我在孩子们中使用contextType时 组件，我看到一个空对象。

ContextProvider.js

import React from "react";
import {ContextConsumer} from "./ContextConsumer";
export const TestContext = React.createContext({
    count: 1,
    incrCount: (count)=>{
     console.log(`count value :- ${count}`)
     }
});

export class ContextProvider extends React.Component {
  incrCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  state = {
    count: 5,
    incrCount: this.incrCount,
  };

  render() {
    return (
      <TestContext.Provider value={this.state}>
        <ContextConsumer />
      </TestContext.Provider>
    );
  }
}

ContextConsumer.js

import React from "react";
import { TestContext } from "./ContextProvider";

export class ContextConsumer extends React.Component {
    static contextType=TestContext

  componentDidMount() {
        const {count,incrCount}= this.context;
        console.log(`count:- ${(count)}`)
        console.log(`incrCount:- ${incrCount}`)
    }
  render() {


    return (
      <div>


        **// BELOW CODE IS WORKING AS EXPECTED**
        <TestContext.Consumer>
          {({ count, incrCount }) => (
            <button onClick={incrCount}>Count is {count}</button>
          )}
        </TestContext.Consumer>
      </div>
    );
  }
}

App.js

import {ContextProvider}  from "../../playground/ContextProvider";

const output = (
  <Provider store={reduxStore}>
    <ContextProvider />
  </Provider>
);

ReactDOM.render(output, document.getElementById("root"));

Answer 1

使用Provider提供的值的contextType和Consumer方法有什么区别？在什么情况下我们应该使用哪种方法？

static contextType分配是在v16.6.0中引入的，它是在render方法之外使用上下文的一种方式。消费者上下文和静态上下文之间的唯一区别是使用contextType允许您也使用渲染方法之外的上下文

提供者在基于类的组件中公开的值是否可以由使用useContext的react hook组件使用？

是的，useContext也可以使用Provider的上下文值。但是，您只能在功能组件内部使用useContext，而不能在类组件内部以及在v16.8.0之后使用支持挂钩的

PsS 。您必须确保一件事，即通过在消费者组件中导入提供程序来确保不会引起循环依赖，否则必须避免

Answer 2

1. 静态contextType和class.contextType
2. useContext
3. context.Consumer

两者几乎相同，不同之处在于（1）用于类组件，而 useContext是一个钩子，最好的事情是我们可以在一个功能组件中多次使用此钩子。（3）只能在jsx或render（return）中使用。（1）和（2）可以在return外部使用。