[react]関数構成部品、usState

このシリーズでは、同じ学院の学生と一緒に行ったインタラクティブな学習の内容を基に、計画的に衝突し、時間を経て得た知識を共有します.
学習内容は自分で作成した例で行い、エラーや補足があればフィードバックしてください.
🤔関数構成部品の使用方法
バージョン16.8のHookより前に、stateライフサイクルのみがクラス構成部品に作成されます.ただし、Hookを追加すると、使いやすい関数構成部品にステータス管理とライフサイクルを作成できます.クラスと関数型の単純なカウンタ構成部品を作成し、比較します.
カウンタ構成部品の作成
簡単なカウンタコンポーネントを記述した.現在のカウント状態を画面に簡単に表示し、2つのボタンはそれぞれ+1、-1を演算します.
クラス構成部品

import React from 'react';
import { Component } from 'react';

class Counter extends Component {
  state = {
    count: 0,
  };

  increase() {
    this.setState(({ count }) => ({
      count: count + 1,
    }));
  }

  decrease() {
    this.setState(({ count }) => ({
      count: count - 1,
    }));
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.increase.bind(this)}>+1</button>
        <button onClick={this.decrease.bind(this)}>-1</button>
      </div>
    );
  }
}

export default Counter;

以前に作成されたクラス要素は、thisキーワードを使用して自分のstateと関数をクエリーし、bind関数を使用してthisが指すオブジェクトを自分にロックする必要があります.さらに、構成部品を動作させるために、constructor()またはrender()などの必要なライフサイクル関数を定義する必要があります.
この構成部品を関数形式に変換するとどうなりますか?
関数構成部品

import React from 'react';
import { useState } from 'react';

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

  const increaseFunction = () => {
    setCount(count + 1);
  };

  const decreaseFunction = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increaseFunction}>+1</button>
      <button onClick={decreaseFunction}>-1</button>
    </div>
  );
};

export default FuncCounter;

コードが短くなり、可読性が大幅に増加しました.現在定義されている変数および関数は、当然、対応する変数および関数を指すので、thisキーワードを使用せずに、読み取り可能性が大幅に向上する.ここで普段見ていないuseState()の関数は何ですか?
useState()useState()関数は、Hookの関数型要素の使用を支援する反応器stateの1つである.この関数を使用して作成されたstateは、必ずしもオブジェクトではなく、必要な形式のデータに初期化することができる.

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

例は、countおよびsetCountをアレイ構造分解として割り当てる.useState()関数を使用して、使用するstateの名前を作成し、camel caseネーミング法にsetを付けてクラス要素にsetState()の関数名を作成し、配列構造分解で割り当てます.その後、stateを使用して変更を行う場合は、setState_name()関数に変更できます.useState()のパラメータには初期値が含まれており、自分が望む形式で記入したデータ値であれば、そのstateのデータ型を特定することができる.
😀 後で記述する構成部品は、関数型構成部品に基づいて記述されます.関数型素子と親しくしましょう.