Reactライブラリが提供する内蔵API関数について説明してください.

01. useState

const [state, setState] = useState(initialState);ステータス値とそのステータス値を更新する関数を返します.
setState関数はstateを更新するために使用されます.

02. useEffect

useEffect(didUpdate)コマンド形式または何らかの効果を解放するために、パラメータとして関数を受け入れます.
userEffectに渡される関数は、スクリーンレンダリングが完了すると実行されます.
既定では、すべてのレンダリングは完了後に実行されますが、値が変更された場合にのみ実行できます.
ComponentDidMountやComponentDidUpdateとは異なり、遅延イベント中にレンダリングが完了すると、Effectを使用して渡される関数が発生します.

じょうけんのえいきょうが起こる

effectのデフォルトの動作は、すべてのレンダリングが完了した後にeffectを生成することです.このようにいずれかの依存性を変更すると、影響が再び発生します.useEffect(()=>{}, [props.source])二番目に伝える道具userEffectは、sourceの変更時にのみ発生します.useEffect(()=>{}, [])スクリーンをレンダリングした後、最初の1回だけ実行します.

03. useContext

const value = useContext(MyContext)コンテキストオブジェクト(react.createContextから返された値)を受信し、そのコンテキストの現在の値を返します.
contextの現在の値は、ツリーでこのHookを呼び出すコンポーネントに最も近いのvalue propで決定します.

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

ソース:https://ko.reactjs.org/docs/hooks-reference.html#usestate