Reactで機能コンポーネントを使用する方法

Reactでコンポーネントを作成する方法を知りたいですか?

答えるのは、HTMLのような構文を返す関数を作成するのと同じくらい簡単です。

import React from 'react'; function Counter({n}) { return ( {n} ); } export default Counter;

次に、上記のコードで何が起こったかを見てみましょう。  Counter数値をHTMLに変換する関数です。そして、もっと注意深く見るCounterと、純粋関数です。そうです、入力に基づいて結果を返し、副作用のない種類の関数です。

この説明には新しい質問があります。副作用とは何ですか?

要するに、副作用とは、関数の外部の環境に対する変更、または変更される可能性のある外部環境からの読み取り情報です。

パラメータリストの非構造化代入構文を使用してn入力番号を抽出したことに気付いたかもしれません。これは、コンポーネントが、すべてのプロパティが送信された「props」と呼ばれる単一のオブジェクトを入力として受け取るためです。

n他のコンポーネントからパラメータを設定する方法は次のとおりです。

ある意味で、この構文は関数呼び出しのように想像できますCounter({n: 1})。そうじゃない?

旅を続けましょう。

機能コンポーネントに状態を設定できますか?コンポーネント名が示すように、カウンターを保存して変更したいと思います。コンポーネント内で数値を保持する変数を宣言した場合はどうなりますか?それは機能しますか?

確認してみましょう。

まず、機能コンポーネント内で変数を宣言します。

import React from 'react'; function Counter() { let n = 0; return ( {n} ); } export default Counter;

次に、数値をインクリメントしてコンソールに記録する関数を追加しましょう。この関数をクリックイベントのイベントハンドラーとして使用します。

import React from 'react'; function Counter() { let n = 0; function increment(){ n = n + 1; console.log(n) } return ( {n} Increment ); } export default Counter;

コンソールを見ると、実際には数字が増えていることがわかりますが、それは画面には反映されていません。何か案は?

正解です…番号を変更する必要がありますが、画面上で再レンダリングする必要もあります。

ここで、ReactHooksのユーティリティ機能が役立ちます。ちなみに、これらのユーティリティ関数はフックと呼ばれ、「使用」という言葉で始まります。それらの1つであるuseStateを使用します。「再レンダリング」テキストもコンソールに記録して、Counter関数が実際に呼び出された回数を確認します。

import React, { useState } from 'react'; function Counter() { const [n, setN] = useState(0); console.log('re-render'); function increment(){ setN(n + 1); console.log(n) } return ( {n} Increment ); } export default Counter;

何をするのか読んでみましょうuseState()

何がuseState返されますか?現在の状態とそれを更新する関数の値のペアを返します。

私たちの場合nは現在の状態でsetN()あり、それを更新する関数です。コンソールをチェックして、「再レンダリング」テキストが何回表示されるかを確認しましたか?私はあなたが知るためにそれを残しておきます。

新しい値を設定するだけでなく、新しい値を返す関数を提供することによって、状態を更新できます。

この場合、新しい値を提供する関数が呼び出されincrement()ます。ご覧のとおり、これincrement()は純粋関数です。

import React, { useState } from 'react'; function increment(n){ return n + 1; } function Counter() { const [n, setN] = useState(0); return ( {n}  setN(increment)}> Increment ); } export default Counter;

何をするのかを理解するためにsetN(increment)、ドキュメントを読んでみましょう。

更新関数を渡すと、アップデーター内の現在の状態値にアクセスできます。

OKなのでincrement()、現在のn状態で呼び出され、新しい状態値を計算するために使用されます。

最終的な考え

私たちが見つけたものを要約しましょう。

Reactでは、HTMLのような構文を返す関数を使用してコンポーネントを簡単に定義できます。

React Hooksを使用すると、このような機能コンポーネントに状態を定義できます。

そして最後になりましたがthis、コンポーネントの疑似パラメータをようやく取り除きました。多分あなたはそれをthis予期しないときに文脈を変えることによってそれが迷惑になることに気づいたでしょう。それについての心配はありません。this機能コンポーネントでは使用しません。

ここまで進んだら、私の本も見てください。

Discover Functional JavaScriptは、BookAuthorityによる最高の関数型プログラミングの本

関数型プログラミング手法をReactに適用する方法の詳細については、FunctionalReactを参照してください

ReactとReduxを使用したFunctionalArchitectureを使用して、プロジェクトベースの方法でFunctionalReactを学習します

フィードバックをツイートしてください。