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

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

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

前提條件

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

始めましょう！

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

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

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

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

コンポーネントも再利用可能です。同じコンポーネントを複數(shù)の場(chǎng)所で使用する必要がある場(chǎng)合、これは簡(jiǎn)単に実裝できます。 JSX構(gòu)文を使用すると、コンポーネントを表示する必要がある場(chǎng)合はどこでも宣言できます。

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

小道具と狀態(tài)

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

小道具を理解する

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

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

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

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

クラスコンポーネント

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

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

コンポーネントを定義する場(chǎng)合、コンストラクターはオプションであることに注意してください。上記の場(chǎng)合、コンポーネントには狀態(tài)がなく、コンストラクターは有用な操作を?qū)g行していないようです。小道具。

ベストプラクティスは、すべてのクラスコンポーネントにコンストラクターを使用することをお?jiǎng)幛幛工毪长趣扦埂?/p>

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

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

 <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で増分します。これは予想どおりに機(jī)能します。ただし、問(wèn)題があります。複數(shù)のsetState()がある場(chǎng)合は、カウントを100増加させてから1に更新し、以前に追加された100を削除します。 setState()が非同期であり、複數(shù)のprevState事前に以前の狀態(tài)への參照であり、最新の狀態(tài)が保証されている場(chǎng)合。 React.memoはフックに使用されます。これはすべて、あなたが反応するのが初めてのときに少し混亂するように聞こえるかもしれません。同じプロップと狀態(tài)が與えられたときに同じ結(jié)果が返されることが保証されている場(chǎng)合、コンポーネントは純粋なコンポーネントと呼ばれます。ステートレスコンポーネントは、純粋なコンポーネントの優(yōu)れた例です。これは、入力が與えられているため、何をレンダリングするかを知っているからです。

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

コンポーネントが純粋な場(chǎng)合は、 PureComponentで最適化できます。これらの方法は、Reactコンポーネントの更新動(dòng)作を変更します。デフォルトでは、狀態(tài)または小道具が変更されると、Reactコンポーネントは常に更新されます。ただし、 memoを使用する場(chǎng)合、Reactは小道具と狀態(tài)で淺い比較を?qū)g行します。つまり、オブジェクトのすべてのキー/値ペアを再帰的に比較するのではなく、オブジェクトの直接コンテンツを比較します。したがって、オブジェクト參照のみが比較されます。これは、狀態(tài)または小道具が変更された場(chǎng)合、予想どおりに機(jī)能しない場(chǎng)合があります。

 <code>// 類組件<br>class MyComponent extends React.PureComponent { // 使用它代替React.Component<br> // ...<br> }<br><br> // 鉤子<br>const MyComponent = React.memo(function MyComponent(props) { // 將組件函數(shù)包裝在React.memo 中<br> // ...<br> });<br></code>

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

最後の考え

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

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

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

以上がReactのステートレス機(jī)能コンポーネントとステートレス機(jī)能コンポーネントの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。