反応文脈から始めてください.

この記事では、私はどのように反応コンテキストを使用して、アプリケーションでそれを使用するための最良の方法をいくつかのヒントを介して歩いているよ.
我々はそれを持っている

React Context provides a way to pass data through the component tree without having to pass props down manually at every level.

それでは、最も基本的なファンダメンタルズを開始しましょう、コンテキストAPIの主な目的は、シームレスにプロップドリルなしでコンポーネントを介してデータを渡すには、ルートを介してデータを渡す、またはほとんどのように動作するように少し似たように動作するアプリケーションでreduxを使用することです.
クライアント側アプリケーションを使用する場合は、適切に実行されない場合は、コンポーネント内のデータを渡すことが簡単に畳み込みになることを確認できます.
さて、これは我々が反応文脈を紹介するところです.たとえば、私たちは暗黒からライトモードへのアプリケーションのバックグラウンドを変更しようとしていました、そして、逆もまた、これは我々のアプリケーションで反応文脈を使用する利点を見る非常に良いシナリオです.
我々の反応アプリを作成して反応アプリをscaffoldingを開始しましょう.これを行うには、エディタを開き、コマンドラインインターフェイスに頭を入れ、次のコードを連続的に実行します

npx create-react-app theme-app
cd theme-app
npm start

我々のアプリケーションのコンテキストを使用するには、コンテキストを定義し、そのデータが格納される場所を開始する必要があります.これは非常に我々のアプリケーションのデータの流れに方向性を与えると非常に重要です.
あなたの反応アプリケーションを構造化するためのいくつかの方法がありますが、すべてのアプリケーションのコンテキストを保持する別のフォルダを持っていることをお勧めします.
最初に起動します.
アプリケーションソースフォルダ内のコンテキストフォルダーの作成.
次に、コンテキストフォルダにテーマフォルダを作成します.
また、themenontextも作成します.テーマフォルダ内のファイル

さらに、このコードをthemecontextに追加します.js

import React from "react";

const ThemeContext = React.createContext({});
export default ThemeContext;

我々は正常に我々のアプリケーションのテーマのコンテキストを作成している.
次に、私たちのコンテキスト内のデータを我々のアプリケーションのどこにでもアクセスできるようにする必要があります、それを行うには、すべての必要なコンテキストプロバイダとコンテキストの消費者、私はそれが変に聞こえることはないが、それは私たちはすぐにそれを取得する心配しないでください願っています.
コンテキストが機能するのは、コンシューマーとプロバイダーコンポーネントが付属していることです.プロバイダーコンポーネントは、アプリケーションのコンテキスト内のデータへのアプリケーションへのアクセスを可能にします.
さて、我々のアプリのコンポーネントにいくつかの更新を行いましょう

import React,{useState} from 'react';
import logo from './logo.svg';
import Header from './components/header/Header';
import './App.css';
import ThemeContext from './context/theme/ThemeContext';
function App() {

  const [theme,changeTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{theme,changeTheme}}>
    <div className={`App ${theme}`}>
      <Header logo={logo}  className="App-header">
        <p>
          Edit <code>src/App.js</code>!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </Header>
    </div>
    </ThemeContext.Provider>
  );
}

export default App;

USENTフックを使用して「Light」というクラス名を保持する方法に注目してください.私たちは、私たちのヘッダーのボタンがクリックされるとき、明暗から値をトグルするでしょう、したがって、私たちは、「テーマ」と呼ばれる状態を含んでいる配列であるUSENTフックの戻り値とChangeThemeと呼ばれる状態を修正するのに使用される関数を使用します.
私たちのヘッダーコンポーネントを少し見てみましょう、それはいくつかの小道具(例えばロゴ、クラス名支柱、および他の子供構成要素)を取ります、しかし、我々は反応文脈の能力をテストしたいので、現在、他のどんなpropも通過していません.
以下にヘッダコンポーネントに実装する方法を示します:

import React,{useContext} from "react";
import ThemeContext from "../../context/theme/ThemeContext";
const Header = ({logo,children}) => {

const {theme,changeTheme} = useContext(ThemeContext);

return(
  <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button type='button' onClick={() => changeTheme(theme ==='light'?'dark':'light')}>Change Mode</button>  
        {children}
  </header>);
};

export default Header;

上記のコードを拡張すると、ヘッダーコンポーネントで必要に応じて値を使用するために、コンテキスト内の値を破壊しました.ボタンを押す度に状態値をトグルするために三項演算子を使用しました.
Moreso、今、あなたは反応文脈からデータを読むことができる消費者構成要素を見ましょう.
Consumerコンポーネントは、Retrixクラスのコンポーネントに最適ですが、同じ機能を実行するUSEContextフックも提供します.クラスコンポーネントを使用する場合は、次のようにヘッダーコンポーネントにコンシューマーを実装します.

import React,{Component} from "react";
import ThemeContext from "../../context/theme/ThemeContext";
class Header extends Component {
  render(){
  const {logo,children}=this.props;
  return(
    <ThemeContext.Consumer>
        {
          ({theme,changeTheme})=>{
            return (
              <header className="App-header">
                      <img src={logo} className="App-logo" alt="logo" />
                      <button type='button' onClick={() => changeTheme(theme ==='light'?'dark':'light')}>Change Mode</button>  
                      {children}
              </header>
            )
          }
        }
    </ThemeContext.Consumer>);
  }
};

export default Header;

このコードから、ヘッダーの他の子コンポーネントを使用して消費者をレンダリングしていることがわかりますが、消費者は子として機能を受け取り、プロバイダから値を関数に入力して、他の子コンポーネントに値を使用できるようにします.
一方、Responseのusecontextフックを使用してコンテキストを消費するより簡単な方法を見てみましょう.

import React,{useContext} from "react";
import ThemeContext from "../../context/theme/ThemeContext";
const Header = ({logo,children}) => {
const {theme,changeTheme} = useContext(ThemeContext);
return(
  <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button type='button' onClick={() => changeTheme(theme ==='light'?'dark':'light')}>Change Mode</button>  
        {children}
  </header>);
};

export default Header;

結論として、これはあなたのアプリケーションの反応コンテキストから始める方法の簡単な概要です.
詳細については、ここでソースコードを取得できます.
< div >
あなたがこの記事が好きならば、それをあなたの友人と共有してください.チアーズ!p >