小道具掘削と理解はそれらを通して文脈を反応させる

導入
いくつかのケースでは、それらを受け取っている要素がそれらを使用していない複数のコンポーネントにプロップを渡す場合は、あなたはプロップドリルです.あなたが3つのコンポーネントA、BとCを持っていて、あなたがPropname コンポーネントから<A name="Tony" /> に<B /> . しかし、コンポーネントBはname プロップ単にコンポーネントに渡すC 実際にプロップを使用する場合.
コンテキストAPIは、すべてのレベルを手動で小道具を渡す必要がなく、コンポーネントツリーを介してデータを渡すためのメカニズムを提供しました.

例から始めましょう

import { useState } from "react";

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <label>Input </label>
      <input value={input} onChange={inputHandler} />
    </div>
  );
};

ここでは、いくつかのテキストを入力できる簡単な入力ボックスがあります.
このコンポーネントをリファクタとして、状態とOnChangeハンドラーがアプリケーションコンポーネントからInputStyleという別のコンポーネントに渡されるようにします.

import { useState } from "react";

const InputStuff = ({ input, inputHandler }) => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <label>Input </label>
      <input value={input} onChange={inputHandler} />
    </div>
  );
};

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return <InputStuff input={input} inputHandler={inputHandler} />;
};

入力には、input and inputHandler ので、我々はいくつかの小道具を送信しています.もう一つの層を我々の構成木に加えるためにもう一度それを再評価しましょう.

import { useState } from "react";

const InputLabel = () => {
  return <label>Input </label>;
};

const InputDisplay = ({ input, inputHandler }) => {
  return <input value={input} onChange={inputHandler} />;
};

const InputStuff = ({ input, inputHandler }) => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InputLabel />
      <InputDisplay input={input} inputHandler={inputHandler} />
    </div>
  );
};

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return <InputStuff input={input} inputHandler={inputHandler} />;
};

上記のコードを示すCodesAndboxのURLhere
Voilaこれは支柱掘削です.得るinput 状態とinputHandler ハンドラは、適切な場所には、入力コンポーネントを介して小道具をドリルダウンする必要があります.入力コンポーネント自体は実際にこれらの小道具を機能させる必要はありませんが、子供たちがそれらを必要とするので、まだそれらを受け入れて、それらの小道具を転送しなければなりません.
小柱掘削は両方の長所と短所を持っている.このような工夫された例では、多くの問題を抱えていませんが、いったん深い層を持ち、どこかの小道具を必要とすると、反応文脈APIを利用することができます.
ここでは、反応コンテキストAPIを使用して上記の例です

import React, { useState, useContext, createContext } from "react";

const InputContext = createContext();

const InputLabel = () => {
  return <label>Input </label>;
};

const InputDisplay = () => {
  const { input, inputHandler } = useContext(InputContext);
  return <input value={input} onChange={inputHandler} />;
};

const InputStuff = ({ input, inputHandler }) => {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <InputLabel />
      <InputDisplay input={input} inputHandler={inputHandler} />
    </div>
  );
};

const App = () => {
  const [input, setInput] = useState("");
  const inputHandler = (e) => setInput(e.target.value);

  return (
    <InputContext.Provider value={{ input, inputHandler }}>
      <InputStuff input={input} inputHandler={inputHandler} />
    </InputContext.Provider>
  );
};

以下はコンテキストAPIを使用したCodesandBoxの例ですhere
結論

我々は、プロップの穴を理解し、コンテキストAPIは何です.

それ自体でドリル加工は微細であり、データがどのように流れるかのパスを追跡するのに有用であり、したがって、これは容易にリファクタリングと変更を容易にするが、これは非常に容易に手を伸ばすことができる

コンテキストAPIは、反応コンポーネントのグローバルと見なされるデータを共有するために使用することができます.これは、プロップを明示的に渡すことなく、任意のレベルで利用可能な小道具を持っているメカニズムを提供します.通過するのに理想的であるTheme , Locale アプリケーションの多くのコンポーネントに.