react stateについて

はじめに

stateの機能を利用することで状態遷移のロジックを簡潔かつ明示的に記載できます。
形式的に呼び出して、複雑な状態遷移の処理を数行で表現することが可能です。

また、React 16.8 でhookという新機能が追加され、state などの React の機能を、クラスを書かずに使えるようになりました。
hookが実装される以前はstateなどの機能を利用する為にクラスコンポーネント表記が一般的だったようです。
hookの実装により、関数コンポーネント表記でもstateなどの機能を利用することができるようになり、実装が比較的簡単にできるようになりました。

実際にクラスコンポーネントでのhookの利用した経験はないですが、関数コンポーネントでの実装とコードを比較すると理解するまでに時間がかかりそうでした。

ステートフック

• 例

 const [count, setCount] = useState(0);

useStateの引数はこのstateの初期値となり、countの値は"0"となっております。
setCountはcountの値を更新するための関数となっており、これを介してのみcountの体を変更することが可能です。

• クリックする度にカウントが進んでいく例

<button onClick={() => setCount(count + 1)}>
    Click me
</button>

また、他のhook機能と組み合わせることで他にも色々なことができます。

その他フック

effect

stateを渡してあげることで、レンダーのタイミングを制御できる

useEffect(() => {
    console.log("レンダーされました。");
}, [state]);

context

スタイルの状態遷移を管理できる

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>
  );

あとがき

まだreactをはじめて間もないですが、もっと知見を深めて、今後有益な情報を発信できたらと思います。