Reactのステートレス機能コンポーネントとステートレス機能コンポーネント

React：インタラクティブなユーザーインターフェイスの構築のコアコンポーネント

Reactは、インタラクティブなユーザーインターフェイスを構築するための人気のJavaScriptフロントエンドライブラリです。その学習曲線は比較的平坦であり、これが最近多くの注目を集めた理由の1つです。

学習すべき重要な概念はたくさんありますが、コンポーネントは間違いなくReactの中核です。コンポーネントを深く理解することで、React Development Journeyが簡単になります。

前提条件

このチュートリアルは、反応を学び始めたばかりで、コンポーネントをよりよく理解する必要がある初心者向けです。コンポーネントの基礎から始めて、コンポーネントパターンやそれらを使用する時期などのより挑戦的な概念に徐々に飛び込みます。クラスコンポーネントと機能コンポーネント、ステートフルおよびステートレスコンポーネント、コンテナコンポーネントとプレゼンテーションコンポーネントなど、さまざまなコンポーネントカテゴリをカバーします。

始めましょう！

コンポーネントとは何ですか？

コンポーネントは、UIの一部を説明する自己完結型の独立したミニチュアエンティティです。アプリケーションのUIは、それぞれ独自のコード、構造、APIを備えた小さなコンポーネントに分割できます。

たとえば、FacebookのWebアプリケーションを見ると、何千もの相互接続された機能があります。興味深いことに、Facebookには30,000のコンポーネントが含まれており、その数は増加しています。コンポーネントアーキテクチャを使用すると、各コンポーネントについて独立して考えることができます。各コンポーネントは、他のコンポーネントにどのように影響するかを心配することなく、その範囲内ですべてを更新できます。

FacebookのUIを例にとると、検索バーが適切なコンポーネント候補になります。 Facebookのニュースフィードは、別のコンポーネント（または多くのサブコンポーネントを含むコンポーネント）を形成できます。検索バーに関連するすべてのメソッドとAJAX呼び出しは、このコンポーネント内に配置されます。

コンポーネントも再利用可能です。同じコンポーネントを複数の場所で使用する必要がある場合、これは簡単に実装できます。 JSX構文を使用すると、コンポーネントを表示する必要がある場合はどこでも宣言できます。

<code><div>
<br>    現在のカウント：{count}<br><hr>
<br>    {/*コンポーネントの再利用性の例*/}<br>            updatecount = {setCount（count 1）}/><br>            updatecount = {setCount（count-1）}/><br>
</div>
<br></code>

小道具と状態

コンポーネントにはデータが必要です。コンポーネントとデータを2つの異なる方法で組み合わせることができます：小道具または状態として。小道具と状態は、コンポーネントがどのようにレンダリングされ、動作するかを決定します。小道具から始めましょう。

小道具を理解する

コンポーネントが通常のJavaScript関数である場合、Propsは関数入力です。このアナロジーによれば、コンポーネントは入力を取得し（プロップと呼びます）、処理し、JSXコードをレンダリングします。

小道具のデータにはコンポーネントがアクセスできますが、Reactの哲学は、小道具は不変でトップダウンである必要があるということです。これは、親コンポーネントが必要なデータを子コンポーネントに小道具として渡すことができることを意味しますが、子コンポーネントはその小道具を変更できません。したがって、以下のように小道具を編集しようとすると、「読み取り専用の値に値を割り当てることはできません」エラーが得られます。 useState()フックは次のように使用されます。

 <code>const [count,setCount] = useState(0);<br></code>

その後、 setCount()を使用して現在のカウントを取得できます。

クラスコンポーネント

クラスコンポーネントは機能的なコンポーネントよりも複雑な場合がありますが、このスタイルを好む人もいます。

super()を拡張して、親クラスから継承されたコンテンツを渡すことにより、クラスコンポーネントを作成できます。

コンポーネントを定義する場合、コンストラクターはオプションであることに注意してください。上記の場合、コンポーネントには状態がなく、コンストラクターは有用な操作を実行していないようです。小道具。

ベストプラクティスは、すべてのクラスコンポーネントにコンストラクターを使用することをお勧めすることです。

また、コンストラクターを使用する場合は、 super()を呼び出す必要があります。そうしないと、エラー「super（）call in constructor」が発生します。

私の最後のポイントは、フックまたはthis.setState()を使用して状態を更新する場合、 countとcount変数を使用することです。 useState() Hookは、新しい値で状態を更新できる2番目の関数を返します。

 <code>// 这有效<br><br>// 钩子<br>const [count,setCount] = useState(0);<br> setCount(count value);<br><br> // 类组件<br>handleCount(value) {<br>    this.setState({count: this.state.count value});<br> }<br></code>

次に、 setCount()を入力として取得し、前のcount値を1で増分します。これは予想どおりに機能します。ただし、問題があります。複数のsetState()がある場合は、カウントを100増加させてから1に更新し、以前に追加された100を削除します。 setState()が非同期であり、複数のprevState事前に以前の状態への参照であり、最新の状態が保証されている場合。 React.memoはフックに使用されます。これはすべて、あなたが反応するのが初めてのときに少し混乱するように聞こえるかもしれません。同じプロップと状態が与えられたときに同じ結果が返されることが保証されている場合、コンポーネントは純粋なコンポーネントと呼ばれます。ステートレスコンポーネントは、純粋なコンポーネントの優れた例です。これは、入力が与えられているため、何をレンダリングするかを知っているからです。

 <code>const HelloWorld = ({name}) => (<br></code> {`hi $ {name}`}<br> ）;<br>

コンポーネントが純粋な場合は、 PureComponentで最適化できます。これらの方法は、Reactコンポーネントの更新動作を変更します。デフォルトでは、状態または小道具が変更されると、Reactコンポーネントは常に更新されます。ただし、 memoを使用する場合、Reactは小道具と状態で浅い比較を実行します。つまり、オブジェクトのすべてのキー/値ペアを再帰的に比較するのではなく、オブジェクトの直接コンテンツを比較します。したがって、オブジェクト参照のみが比較されます。これは、状態または小道具が変更された場合、予想どおりに機能しない場合があります。

 <code>// 类组件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 钩子<br>const MyComponent = React.memo(function MyComponent(props) { // 将组件函数包装在React.memo 中<br> // ...<br> });<br></code>

React.memoはパフォーマンスを最適化するために使用されます。何らかのパフォーマンスの問題がない限り、それらを使用することを検討する理由はありません。

最後の考え

機能コンポーネントとフックは通常、クラスコンポーネントのカウンターパートよりもはるかに簡単です。したがって、特別な設定がない限り、関数コンポーネントが最良の選択です。

このチュートリアルでは、コンポーネントベースのアーキテクチャとReactのさまざまなコンポーネントパターンの高レベルの概要があります。

この記事は更新されており、ジェイコブジャクソンの貢献が含まれています。ジェイコブは、ウェブ開発者、ハイテクライター、フリーランサー、オープンソースの寄稿者です。

以上がReactのステートレス機能コンポーネントとステートレス機能コンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。