勉強しましょう!🌷

Hookとは?

まず、素子には2つの形態の素子がある.
class componentとfunctional component.
class componentにはstateがあります.
関数コンポーネントにstateはありません.
しかしHookはfunctionでreactstateを使用することを許可します!
classcomponentにはライフサイクルメソッドがあります.複雑な構造を持つlifecycleについて話したことがあります.取り外しが難しい.
似たような機能を持つ小さな関数をHookで組み合わせて素子分割する方法が利用できます!

useState

関数コンポーネントを使用する場合は、stateが必要なときにclassに変更する必要はありません.
useStateを使用!

import React, { useState } from "react";

export default function App() {
  const [item, setItem] = useState(1);
  const IncrementItem = () => setItem(item + 1);
  const decrementItem = () => setItem(item - 1);
  return (
    <div className="App">
      <h1>Hello {item}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={IncrementItem}>Increment</button>
      <button onClick={decrementItem}>decrement</button>
    </div>
  );
}

次のコードはIncrementボタンを押すとitemで+1になります.
const [item,setItem] = useState(1)
それぞれはthisです.state.item, this.setStateと同じ機能を持つ.
Hookを使用すると、コードが非常に簡潔になります.
classでコードを再編成すると...

class Appclass extends React.Component {
  state = {
    item: 1
  };
  render() {
    const { item } = this.state;
    return (
      <div className="App">
        <h1>Hello {item}</h1>
        <h2>Start editing to see some magic happen!</h2>
        <button onClick={this.IncrementItem}>Increment</button>
        <button onClick={this.decrementItem}>decrement</button>
      </div>
    );
  }

  IncrementItem = () => {
    this.setState((state) => {
      return { item: state.item + 1 };
    });
  };
  decrementItem = () => {
    this.setState((state) => {
      return { item: state.item - 1 };
    });
  };
}

ずっと複雑です.😭
今まで、私はよくclasscomponentを使ってstateを使っていました.
hookを勉強する過程で、おなじみの機能部品を使ってみます!✨✨

リファレンス

返信ドキュメント
レコーダなしhook講義