反応におけるustextの理解

テキスト
反応では、コンテキストは、アプリケーションのすべてのコンポーネント間で使用できるグローバル変数のようです.コンテキストフックを使用するときの例は、優先テーマを設定するか、現在署名されたユーザーを格納することです.
コンテキストフックを使用するには、多くのコンポーネントでアクセスできるデータが必要な場合のみ使用します.

USEONTEXTを使用する
usenontextをよりよく理解するために、我々はユーザーの詳細を格納する文脈を作成しています、そして、彼らの詳細が文脈に格納されるならば、我々はユーザーに若干のものを見せています.

ファースト・シング
あなたは既に作成された反応アプリを持っているとNPMから反応ルータDOMをインストールする必要があります.今すぐあなたのソースフォルダにファイルを作成し、それを名前userDetails.jsx これはコンテキストを作成するファイルです.こうする.

import { useState, createContext, useMemo } from 'react';

const UserContext = createContext(); 

const UserProvider = (props) => {
    const [username, setUsername] = useState('');
// the state that we'll be storing the username into

/* because we will be providing an object to the provider, it is better to put the value inside a useMemo so that the component will only re-render when there's a change in the value. */

const value = useMemo(
   () => ({username, setUsername}),[username])


    return (
        <UserContext.Provider
            value={value}
        >
            {props.children}
        </UserContext.Provider>
    );
}
export { UserContext, UserProvider };

上記のコードでは、actionのcreateContext ()を使用して、UserContextというコンテキストを作成しました.CREATE Contextは、グローバル変数を作成したいと思います.次に、グローバルにアクセスしたい状態を含むコンポーネントを作成しました.ユーザコンテキストからプロバイダを使用していることに気づくでしょう.UserContext.Provider プロバイダーはusecontextのメソッドで、他のコンポーネントをワープすることができます.
また、私たちが使用したことに気づくでしょうuseMemo フックは、プロバイダに値を格納するために、これは値の更新がないときに再レンダリングからアプリケーションを防ぐためです.(もしあなたがよく知らなければuseMemo フックは、次のセクションでusememoを見ているので、それを汗ません.エリックWestraは、それについてもう少し話しましたthis post .
にApp.jsx ファイルインポートUserProvider エクスポートされました.

import { BrowserRouter, Switch, Route } from "react-router-dom";
import { UserProvider } from './userDetails';

const App = () =>  {
  return (
  <UserProvider>
      <BrowserRouter>
        <Switch>
          <Route path="/" exact component={SetUserDetails} />
          <Route
             path="/user"
             exact
             component={FetchUserDetails} />
        </Switch>
      </BrowserRouter>
    </UserProvider>
 )
}

export default App;

上のコードでは、プロバイダを他のコンポーネントにラップしています.ルート内のコンポーネントを作成し、コンテキスト内でコンテキストを使用します.
ファイルを作成し、setuserDetailという名前を付けます.JSXファイルをペーストします

import React, { useState, useContext } from "react";
import { useHistory } from "react-router-dom";
import { UserContext } from "./userDetails";

const SetUserDetails = () => {
  const [name, setName] = useState("");
  const history = useHistory();

  const { setUsername } = useContext(UserContext);
  const handleSetName = () => {
    setUsername(name);
    history.push("/user");
  };
  return (
    <>
      <input 
          value={name} 
          onChange={(e) => setName(e.target.value)} />
      <button onClick={handleSetName}>Set Name </button>
    </>
  );
};

export default SetUserDetails;

上記のコードでは、ユーザー名を受け入れるコンポーネントを作成し、コンテキストに格納します.usecontextフックの使用に気づくでしょう.以前に作成したコンテキストを得るためにフックを使っています.この場合、setusernameを取得しています.ユーザーがボタンをクリックすると、コンテキストにこのローカル状態の名前が割り当てられます.
次に、コンテキストを取得します.ファイルを作成し、fetchUserDetailという名前を付けます.JSX (ルート内の他のファイル)
それからこのファイルをペーストします.

import React, { useContext } from "react";
import { UserContext } from "./userDetails";

const FetchUserDetails = () => {
  const { username } = useContext(UserContext);

  return <>{username ? `Hello ${username}` : `Hello User`}</>;
};

export default FetchUserDetails;

ここでは、ユーザ名の状態を取得し、状態の値をチェックします.それが空であるならば、我々は『Hello User』を示します、そして、そうでないならば、我々はユーザー名を示します.
コードを実行してテストしてみてください.
ユーザー名が他のコンポーネントで利用可能であることに注意してください.usecontextフックに感謝します.
ここで、コンテキストを作成し、コンテキストを永続化しようとします.

結論
これは、ユーザーの好みのテーマや他の設定を保存したり、ローカルストレージに永続化したりするなどのコンテキストで行うことができます.
お読みありがとうございます.
次のポストでは、私はuseMemo フック.
この投稿をお楽しみください.あなたが質問をするならば、コメントセクションで彼らを落すこと自由に感じてください.コーディングして驚くべきことを行う.