React Hooks

React Hooksとは？

Functional componentとClass componentを使っていたがFunctional componentにuseState
複雑なクラスコンポーネントを使うことなく関数コンポーネントだけでReact開発を進められる。

• ステートを含む処理をコンポーネントから切り離し、再利用することもできる
• 関数コンポーネントでもステートのように値を管理することができる
• コンポーネントの機能を別関数として切り離すことができる

useContext

AからCへ
useStateはステートを作成するためのものです。
2つの変数に戻り値がそれぞれ代入される。

const [変数A,変数B] = useState(初期値)

配列

数字のカウント

const {count, setCount} = useState(0)

チェックボックス

useContextでstateを使う

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

export const MainContent = () => {
  const language = useContext(LanguageContext);
  return (
    <section language={language}>
      //何らかの内容
    </section>
  );
};

useReducer

useReducer...

useState

useStateについて Reactの useState フックは、関数コンポーネントで状態を管理するためのものです。useStateに引数として渡される値は、...

useEffect

初心者でも簡単にわかるReact useEffect, useLayoutEffectの使い方 ReactのHookの中でもuseStateの次に使用頻度も高く重要なuseEffectの使用方法について説明を行なっています。 ...