React Hook useState - React 白話文運動 11

序文

前回の記事では、Reactの構文について詳しく説明した Reactライフサイクル - React用語キャンペーン10 Reactのライフサイクルの3つのフェーズについて学び、クラスオブジェクトと関数オブジェクトのライフサイクルについて学びました。この投稿では、HooksにおけるuseStateについて実例を挙げて説明します：

useStateとは？
評価UIコンポーネントの作成
このコンポーネントのリファクタリング
このコンポーネントにuseStateフックを追加する。
評価コンポーネントの新しいモディファイアとしてsetStateを追加。
古いバージョンのReact状態管理ライティング

useStateとは？

useState はReactのHookで、関数コンポーネントに状態を追加するために使われる。 useStateファンクション・エレメントでステート・データを定義し、管理することができる。

useState 2つの値を含む配列を返します：

現在の状態: コンポーネントが最初にレンダリングされるとき、その値は useState の初期値である。
set関数：この関数は、ステートの値を更新し、コンポーネントの再レンダリングをトリガーします。

				
					const [状態, setState] = useState(initialState)

評価用UIコンポーネントの作成

このチュートリアルでは、Alex BanksとEve PorcelloによるReactチュートリアルを使いますが、コードの一部を少し変更しています。

この投稿はUIページの作成に関するものなので、何百ものSVGが組み込まれたライブラリを持つreact-iconsパッケージを使う必要がある。ターミナルで以下のコマンドを入力すれば、react-iconsパッケージをダウンロードできる。

				
					npm i 反応アイコン

を通して Reactプロジェクトの構築 - React Vernacularキャンペーン08 これはreactプロジェクトを素早く構築するためのステップバイステップのガイドです。

				
					npx create-react-app my-app cd my-app npm start

ローカルでreactプロジェクトを立ち上げ、App.jsを以下のように修正し、以下のUIコンポーネントを取得する。

				
					import React from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; export デフォルト関数 App() { return (<div>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
        <fastar color='red'></fastar>
    </div>)
}

このコンポーネントのリファクタリング

リファクタリングとは、プログラムの結果を変えることなくコードを書き換えることで、コード全体の質を向上させることを意味する。

次に、元のコードを再構築して、コード全体をより簡潔にする必要がある。これは3つの部分に分けられる：

組織再編の第一歩

まずFaStarを別々のコンポーネントに分割し、このコンポーネントにパラメータを与えます。

				
					const Star = ({ selected = true }) => (<FaStar color={selected ? 'red' : 'gray'}></FaStar> )

再編成の第二段階

長さを指定すると、素早く配列に組み立てることができる関数を作成します。

				
					const createArray = length => [...Array(length)];

再編成のステップ3

最後に、あなたが使っているUIでは、ES6の配列マップを使っており、マップ関数で対応するインデックスとコンポーネントを返している。

				
					デフォルト関数をエクスポート App({ totalStar = 5 }) { return createArray(totalStar).map((n, i) => <Star key={i} />) }

リファクタリングが完了しても、元のプログラムの実行結果は変わらず、最後に5つの星が送り返される。

				
					import React from 'react' import { useState } from 'react'; import { FaStar } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; デフォルト関数 App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <スターキー={i} selected={selectedStars > i} />) }

このコンポーネントにuseStateフックを追加する。

リファクタリングされたコードには、まだ関連するデータやステートがない。ここでは、関数の状態を管理するためにいくつかのフックを使うことができる。

useState()は、フックを学ぶときに最初に学ぶ関数で、以下の構文を使ってコンポーネントの状態を与えることができる。

				
					const [変数,setVariable] = useState("");

次のコード例では、App関数にselctedStarsという新しいステートを追加し、selctedStarsの値を3に設定する。

				
					import React from 'react' import { useState } from 'react'; import { FaStar } from 'react-icons/fa' const Star = ({ selected = true }) => ( <FaStar color={selected ? 'red' : 'gray'}></FaStar> ) const createArray = length => [...Array(length)]; デフォルト関数 App({ totalStar = 5 }) { const [selectedStars] = useState(3) return createArray (totalStar).map((n, i) => <スターキー={i} selected={selectedStars > i} />) }

FaStar要素に判別式を設定する。selectedがtrueなら赤、そうでなければ黒となり、以下のようなコンポーネントになる。

setState 新規変更関数

useState( ) はデフォルト値を与えるだけでなく、その値を変更することもできます。

StarRatingでは、コンポーネントで使用する新しいsetSelectedStarsを追加できます。これはまた、Star に onSelect という新しい関数を追加し、setSelectedStars を渡します。

				
					エクスポート関数 StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
       {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {totalStars} つ星中 {selectedStars} つ星
        </p>
    </div>
}

ここでは、関数setSelectedStarsをonClick関数に渡して、すべての星がクリックされたときにsetSelectedStars( )が起動するようにします。

				
					const Star = ({ selected = true, onSelect = f => f }) => ( <FaStar color={selected ? 'red' : 'gray'} onCLick={onSelect}></FaStar> )

useStateのコードも添付する：

				
					import React from &#039;react&#039; import { useState } from &#039;react&#039;; import { FaStar } from &#039;react-icons/fa&#039; const Star = ({ selected = true, onSelect = f =&gt; f }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'} onclick="{onSelect}"></fastar>
) const createArray = length =&gt; [...Array(length)]; エクスポート関数 StarRating({ totalStars = 5 }) { const [selectedStars, setSelectedStars] = useState(3) return <div>
        {createArray(totalStars).map((n, i) =&gt; 
		<star 
    		key="{i}" 
    		selected="{selectedStars" > i} onSelect={() =&gt; setSelectedStars(i + 1)} /&gt; )}
        <p>
            {totalStars} つ星中 {selectedStars} つ星
        </p>
    </div>
}

古いバージョンのReact状態管理ライティング

旧バージョンは、フックは関数にしか使えなかったので、それ以前のクラスの書き方を指している。こちらはクラスの状態管理を示しているが、クラスにはオブジェクト指向の概念があるため、理解するのが少し難しい。

このクラス・コンポーネントは、Stateを使用してデータの状態をプリセットおよび更新する代わりに、コンストラクタを使用します。このコンストラクタは、starSelectedにプリセット値0を与えることができ、またクラスで宣言された関数changeにバインドします。

				
					import React, { Component } from &#039;react&#039; import { FaStar } from &#039;react-icons/fa&#039; const Star = ({ selected = true }) =&gt; (
    <fastar color="{selected" ? 'red' : 'gray'}></fastar>
) const createArray = length =&gt; [...Array(length)]; デフォルトのクラス StarRating extends Component {constructor(props) { this.state = { starSelected: 0 };変更.bind(this); } 変更(starSelected){ this.setState({starSelected}); } render(){ const {totalStars} = this.state;
            <div>
                {[...Array(totalStars)].map((n,i)=&gt;{
                    <Star 
                        key={i} 
                        selected={i &lt; starSelected} onClick={()=&gt;this.change(i+1)} /&gt; })}
                <p>
                    {starSelected} / {totalStars} つ星中
                </p>
            </div>
        )
    }
}