初心者のためのReact.js—小道具と状態の説明

React.jsは、すべてのフロントエンド開発者が知っておくべき最も広く使用されているJavaScriptライブラリの1つです。小道具と状態が何であるか、そしてそれらの違いを理解することは、Reactを学ぶための大きな一歩です。

このブログ投稿では、小道具と状態が何であるかを説明し、それらについて最もよく聞かれる質問のいくつかを明らかにします。

  • 小道具とは何ですか?
  • 小道具でデータを渡すにはどうすればよいですか?
  • 状態とは何ですか?
  • コンポーネントの状態をどのように更新しますか?
  • 状態が変わるとどうなりますか?
  • すべてのコンポーネントで状態を使用できますか?
  • 小道具と状態の違いは何ですか?
あなたがReactの完全な初心者であるなら、私は初心者のためのReactについてのチュートリアルシリーズを持っています。

小道具とは何ですか?

小道具はプロパティの略で、Reactコンポーネント間でデータを渡すために使用されます。コンポーネント間のReactのデータフローは一方向です(親から子へのみ)。

小道具でデータを渡すにはどうすればよいですか?

小道具を使用してデータを渡す方法の例を次に示します。

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

まず、親コンポーネントからいくつかのデータを定義/取得し、それを子コンポーネントの「prop」属性に割り当てる必要があります。

「名前」はここで定義された小道具であり、テキストデータが含まれています。次に、関数に引数を与えるように、小道具を使用してデータを渡すことができます。

const ChildComponent = (props) => { // statements };

そして最後に、ドット表記を使用して小道具データにアクセスし、レンダリングします。

return 

{props.name}

;

私のビデオを見て、小道具の使い方を確認することもできます。

状態とは何ですか?

Reactには、stateと呼ばれる別の特別な組み込みオブジェクトがあり、コンポーネントが独自のデータを作成および管理できるようにします。したがって、小道具とは異なり、コンポーネントは状態とともにデータを渡すことはできませんが、内部でデータを作成および管理することはできます。

状態の使用方法を示す例を次に示します。

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

コンポーネントの状態をどのように更新しますか?

状態は直接変更しないでください。ただし、と呼ばれる特別なメソッドを使用して変更できますsetState( )

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

状態が変わるとどうなりますか?

OK、なぜ使用する必要があるのsetState( )ですか?なぜ状態オブジェクト自体が必要なのですか?これらの質問をしている場合でも、心配しないでください。すぐに状態がわかります:)答えさせてください。

状態の変化は、ユーザー入力、イベントのトリガーなどに基づいて発生します。また、Reactコンポーネント(状態あり)は、状態のデータに基づいてレンダリングされます。状態は初期情報を保持します。

そのため、状態が変化すると、Reactは通知を受け取り、すぐにDOMを再レンダリングします。DOM全体ではなく、状態が更新されたコンポーネントのみを再レンダリングしますこれが、Reactが高速である理由の1つです。

そして、Reactはどのように通知されますか?あなたはそれを推測しました:でsetState( )。このsetState( )メソッドは、更新されたパーツの再レンダリングプロセスをトリガーします。Reactは通知を受け、変更する部分を認識し、DOM全体を再レンダリングせずに迅速に実行します。

要約すると、状態を使用するときに注意する必要がある2つの重要なポイントがあります。

  • 状態を直接変更しないでください–setState( )使用する必要があります
  • 状態はアプリのパフォーマンスに影響するため、不必要に使用しないでください

すべてのコンポーネントで状態を使用できますか?

状態について尋ねる可能性のあるもう1つの重要な質問は、正確にどこで使用できるかということです。初期の状態では、状態はクラスコンポーネントでのみ使用でき、機能コンポーネントでは使用できませんでした。

そのため、機能コンポーネントはステートレスコンポーネントとも呼ばれていました。ただし、React Hooksの導入後、状態はクラスコンポーネントと機能コンポーネントの両方で使用できるようになりました。

プロジェクトでReactHooksを使用していない場合は、クラスコンポーネントでのみ状態を使用できます。

小道具と状態の違いは何ですか?

最後に、小道具と状態の主な違いを要約して見てみましょう。

  • コンポーネントは小道具を使用して外部からデータを受け取りますが、状態を使用して独自のデータを作成および管理できます
  • 小道具はデータを渡すために使用されますが、状態はデータを管理するためのものです
  • 小道具からのデータは読み取り専用であり、外部からデータを受信して​​いるコンポーネントによって変更することはできません
  • 状態データは独自のコンポーネントで変更できますが、プライベートです(外部からアクセスすることはできません)
  • 小道具は親コンポーネントから子にのみ渡すことができます(一方向フロー)
  • 状態の変更はsetState ( )メソッドで発生する必要があります

React.jsは、すべてのフロントエンド開発者が知っておくべき、今日最も広く使用されているJavaScriptライブラリの1つです。

この記事が小道具と状態を理解するのに役立つことを願っています。Reactについてカバーする他の重要なこともあります、そして私は次の記事でそれらについて後で書き続けます。

Web開発について詳しく知りたい場合は、Youtubeで私フォローしてください

読んでくれてありがとう!