Разница между Class.contextType и Context.Consumer с рабочим примером - PullRequest
Новая
       58

Разница между Class.contextType и Context.Consumer с рабочим примером

1 голос
/ 19 июня 2020

Я пытаюсь понять API контекста React и просматривал официальную документацию. Буду признателен, если кто-то сможет пролить свет на следующие моменты, поскольку официальный do c не рассматривает их четко.

  1. Какая разница в методах contextType и Consumer для использования предоставленных значений Провайдером? В какой ситуации мы должны использовать какой метод?
  2. Может ли значение, предоставленное Provider в компоненте на основе класса, использоваться компонентом перехвата реакции с использованием useContext? У меня была такая же настройка, и в итоге я преобразовал 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>
    );
  }
}

Прил. js

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

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

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

1 Ответ

1 голос
/ 19 июня 2020

В чем разница в методах contextType и Consumer для использования значений, предоставленных поставщиком? В какой ситуации мы должны использовать какой метод?

Назначение static contextType было введено в v16.6.0 как способ использования контекста вне метода рендеринга. Единственная разница между Consumer и stati c context заключается в том, что использование contextType позволяет вам использовать контекст и вне метода рендеринга.

Может ли значение, предоставляемое Provider в компоненте на основе класса, использоваться компонент перехвата реакции, использующий useContext?

Да, значение контекста из Provider может также использоваться useContext. Однако вы можете использовать useContext только внутри функционального компонента, а не в компоненте класса, а также после v16.8.0 или реагировать, которая поддерживает хуки

PS Вы должны убедиться, что вы не вызывают циклической зависимости путем импорта поставщика в потребительский компонент, а также наоборот

Edit FORM VALUES

...