2018年のReact.jsの包括的なガイド

この記事は元々2015年1月に公開されましたが、最近React 16.3とそれに含まれるすべての長所に更新されました。

コンポーネントは、Reactの構成要素です。 Angularのバックグラウンドから来ている場合、コンポーネントはディレクティブに非常に似ています。別のバックグラウンドから来ている場合、それらは本質的にウィジェットまたはモジュールです。

コンポーネントは、HTML、CSS、JS、およびそのコンポーネント固有の内部データのコレクションと考えることができます。 ReactコンポーネントをWebのコラッシュと考えるのが好きです。必要なものはすべて揃っていて、おいしい構成可能なバンドルに包まれています。

これらのコンポーネントは、純粋なJavaScriptで定義されるか、Reactチームが「JSX」と呼ぶもので定義できます。 JSXを使用することに決めた場合(これはかなり標準的であり、このチュートリアルで使用するものです)、JSXをJavaScriptに変換するためのコンパイル段階が必要になります。しかし、これについては後で説明します。

Reactがユーザーインターフェイスの構築に非常に便利なのは、データがコンポーネントの親コンポーネントから受信されるか、コンポーネント自体に含まれていることです。コードに飛び込む前に、コンポーネントの高度な理解があることを確認しましょう。

上に私のTwitterプロフィールの写真があります。 Reactでこのページを再作成する場合、異なるセクションを異なるコンポーネントに分割します(強調表示)。コンポーネントの内部にコンポーネントをネストできることに注意してください。

左のコンポーネント(ピンク)にUserInfoコンポーネントという名前を付けることができます。 UserInfoコンポーネント内には、UserImagesコンポーネントと呼ばれる別のコンポーネント(オレンジ)があります。この親子関係が機能する方法は、UserInfoコンポーネントまたは親コンポーネントであり、それ自体とUserImagesコンポーネント(子コンポーネント)の両方のデータの「状態」が存在します。子コンポーネントで親コンポーネントのデータの一部を使用する場合は、そのデータを属性として子コンポーネントに渡します。この例では、ユーザーが持っているすべての画像(現在UserInfoコンポーネントにある)をUserImagesコンポーネントに渡します。

コードの詳細についてはもう少し詳しく説明しますが、ここで何が起きているかについての全体像を理解してほしい。この親/子階層により、データの管理が比較的簡単になります。データがどこにあるかを正確に把握しており、他の場所でそのデータを操作してはならないためです

以下のトピックは、Reactの基本的な側面であると私が信じているものです。それらとその目的のすべてを理解していれば、このチュートリアルを読んだ後、あなたは非常に良い場所にいるでしょう。

JSX —取得する構文のようなHTMLを記述できます
LightweightJavaScriptオブジェクトに変換されます。
仮想DOM —実際のJavaScript表現
DOM。
React.Component —新しいコンポーネントを作成する方法。
render(メソッド)— UIの外観を説明します
特定のコンポーネント。
ReactDOM.render — ReactコンポーネントをDOMノードにレンダリングします。
state —コンポーネントの内部データストア(オブジェクト)。
コンストラクター(this.state)-確立する方法
コンポーネントの初期状態。
setState —の状態を更新するために使用されるヘルパーメソッド
コンポーネントとUIの再レンダリング
props —子コンポーネントに渡されるデータ
親コンポーネントから。
propTypes —プレゼンスまたはタイプを制御できます
子コンポーネントに渡される特定の小道具。
defaultProps —コンポーネントのデフォルトの小道具を設定できます。
コンポーネントのライフサイクル
  -componentDidMount —コンポーネントがマウントされた後に発生します
  -componentWillUnmount —コンポーネントがマウント解除される前に発生します
  -getDerivedStateFromProps-コンポーネントがマウントされ、
小道具が変わるたびに。の状態を更新するために使用
小道具が変更されたときのコンポーネント
イベント
  -onClick
  -onSubmit
  -onChange

多くのことのように思えますが、Reactで堅牢なアプリケーションを構築する上で、各要素がどのように基本的であるかがすぐにわかります(これを包括的なガイドにしたいと言ったときは冗談ではありませんでした)。

この時点で、Reactがどのように機能するかを非常に高いレベルで理解する必要があります。それでは、いくつかのコードにジャンプしましょう。

最初のコンポーネント(JSX、仮想DOM、レンダリング、ReactDOM.render)の作成

では、最初のReactコンポーネントを作成しましょう。

Reactコンポーネントを作成するには、ES6クラスを使用します。クラスに詳しくない場合は、引き続き以下を読むか、こちらで詳細を読むことができます。

ReactからReactをインポート
ReactDOMを「react-dom」からインポートする
クラスHelloWorldはReact.Componentを拡張します{
  render(){
    リターン(
      
Hello World!     )   } }
ReactDOM.render(、document.getElementById( 'root'));

クラスの唯一のメソッドがrenderであることに注意してください。すべてのコンポーネントにはrenderメソッドが必要です。その理由は、コンポーネントのUI(ユーザーインターフェイス)を記述することです。したがって、この例では、このコンポーネントがレンダリングされる画面に表示されるテキストはHello World!です。

それでは、ReactDOMの動作を見てみましょう。 ReactDOM.renderは2つの引数を取ります。最初の引数はレンダリングするコンポーネントであり、2番目の引数はコンポーネントをレンダリングするDOMノードです。

React.renderではなくReactDOM.renderを使用していることに注意してください。これは、Reactをモジュール化するためにReact .14で行われた変更です。 Reactが単なるDOM要素よりも多くのものにレンダリングできると考えると、それは理にかなっています。

上記の例では、ReactにHelloWorldコンポーネントを取得し、ルートIDを持つ要素にレンダリングするように指示しています。前に説明したReactの親/子関係により、通常はアプリケーションでReactDOM.renderを1回使用するだけで済みます。ほとんどの親コンポーネントをレンダリングすると、すべての子コンポーネントもレンダリングされるためです。

この時点で、JavaScriptに「HTML」を少し奇妙に投げ込んでいるように感じるかもしれません。 Web開発の学習を始めてから、ロジックをビューの外に置く、つまりJavaScriptをHTMLから切り離す必要があると言われました。

このパラダイムは強力ですが、いくつかの弱点があります。このアイデアが正しい方向への一歩であることを納得させるためにこのチュートリアルを長くしたくないので、このアイデアがまだ気になる場合は、このリンクをチェックしてください。 Reactについて詳しく知ると、この不安はすぐに収まるはずです。

renderメソッドで記述する「HTML」は実際にはHTMLではありませんが、Reactが「JSX」と呼んでいるものです。 JSXでは、HTMLのような構文を(最終的に)軽量のJavaScriptオブジェクトに変換することができます。 ReactはこれらのJavaScriptオブジェクトを取得し、それらから「仮想DOM」または実際のDOMのJavaScript表現を形成できます。これにより、JavaScriptの力でテンプレートのアクセシビリティを取得できるwin / winの状況が作成されます。

以下の例を見ると、これが最終的にJSXがコンパイルされるものです。

クラスHelloWorldはReact.Componentを拡張します{
  render(){
    return React.createElement( "div"、null、 "Hello World");
  }
}
これで、JSX-> JS変換フェーズを省略し、上記のコードのようにReactコンポーネントを作成できます。しかし、想像できるように、それはかなりトリッキーです。 JSXを使用していない人は誰も知りません。 JSXのコンパイルの詳細については、React ElementsとReact Componentsをご覧ください。

この時点まで、私たちが飛び込んでいるこの新しい仮想DOMパラダイムの重要性はあまり強調していません。 Reactチームがこのアプローチを採用した理由は、仮想DOMは実際のDOMのJavaScript表現であるため、Reactは現在の仮想DOM(データの変更後に計算)と以前の仮想DOMの違いを追跡できるためです(一部のデータが変更される前に計算されます)。 Reactは、古い仮想DOMと新しい仮想DOMの間の変更を分離し、必要な変更で実際のDOMのみを更新します。

もっと一般的な言い方をすれば、実際のDOMの操作が遅いため、Reactは仮想DOMを追跡し、必要な場合にのみ必要な変更を加えて実際のDOMを更新するだけで、実際のDOMへの操作を最小限に抑えることができます(詳細はこちら)。

通常、UIには状態の管理を困難にする多くの状態があります。状態が変化するたびに仮想DOMを再レンダリングすることにより、Reactはアプリケーションの状態を簡単に考えることができます。プロセスは次のようになります。

アプリの状態を変更するユーザーイベント→仮想DOMの再レンダリング→以前の仮想DOMを新しい仮想DOMと比較→必要な変更を加えて実際のDOMのみを更新します。

JSXからJSへのこの変換プロセスがあるため、開発中に何らかの変換フェーズを設定する必要があります。このシリーズのパート2では、この変換を行うためのWebpackとBabelを紹介します。

「Reactの最も重要な部分」チェックリストを振り返り、現在の位置を確認しましょう。

SX JSX — HTMLのような構文を作成して、
LightweightJavaScriptオブジェクトに変換されます。
仮想DOM —実際のJavaScript表現
DOM。
React.Component —新しいコンポーネントを作成する方法。
render(メソッド)— UIの外観を説明します
特定のコンポーネント。
ReactDOM.render — ReactコンポーネントをDOMノードにレンダリングします。
state —コンポーネントの内部データストア(オブジェクト)。
コンストラクター(this.state)-確立する方法
コンポーネントの初期状態。
setState —の状態を更新するために使用されるヘルパーメソッド
コンポーネントとUIの再レンダリング
props —子コンポーネントに渡されるデータ
親コンポーネントから。
propTypes —プレゼンスまたはタイプを制御できます
子コンポーネントに渡される特定の小道具。
defaultProps —コンポーネントのデフォルトの小道具を設定できます。
コンポーネントのライフサイクル
  -componentDidMount —コンポーネントがマウントされた後に発生します
  -componentWillUnmount —コンポーネントがマウント解除される前に発生します
  -getDerivedStateFromProps-コンポーネントがマウントされ、
小道具が変わるたびに。の状態を更新するために使用
小道具が変更されたときのコンポーネント
イベント
  -onClick
  -onSubmit
  -onChange

良いペースで進んでいます。太字で示したものはすべて既に説明したものであり、少なくともこれらの特定のコンポーネントがReactエコシステムにどのように適合するかを説明できるはずです。

コンポーネント(状態)に状態を追加する

リストの次は状態です。通常、ユーザーインターフェイスには多くの異なる状態があるため、ユーザーインターフェイスの管理がどのように難しいかについて説明しました。この領域は、Reactが本当に輝き始めるところです。各コンポーネントには、独自の状態を管理し、必要に応じてその状態を子コンポーネントに渡す機能があります。

先ほどのTwitterの例に戻ると、UserInfoコンポーネント(上記のピンク色で強調表示)は、ユーザーの情報の状態(またはデータ)を管理する役割を果たします。別のコンポーネントもこの状態/データを必要としているが、その状態がUserInfoコンポーネントの直接の子ではない場合、UserInfoと他のコンポーネント(またはその状態を必要とする両方のコンポーネントの直接の親)となる別のコンポーネントを作成します)。次に、状態を小道具として子コンポーネントに渡します。言い換えると、マルチコンポーネント階層がある場合、共通の親コンポーネントが状態を管理し、それを小道具を介して子コンポーネントに渡す必要があります。

独自の内部状態を使用したコンポーネントの例を見てみましょう。

クラスHelloUserはReact.Componentを拡張します{
  constructor(props){
    スーパー(小道具)
this.state = {
      ユーザー名: 'tylermcginnis'
    }
  }
  render(){
    リターン(
      
        こんにちは{this.state.username}            )   } }

この例では、いくつかの新しい構文が導入されています。最初に気付くのは、コンストラクターメソッドです。上記の定義から、コンストラクターメソッドは「コンポーネントの状態を設定する方法」です。言い換えると、コンストラクター内でthis.stateに配置したデータは、そのコンポーネントの状態の一部になります。

上記のコードでは、ユーザー名を追跡することをコンポーネントに伝えています。このユーザー名は、{this.state.username}を実行することでコンポーネント内で使用できるようになりました。これは、renderメソッドで行うこととまったく同じです。

状態について最後に説明するのは、コンポーネントが自身の内部状態を変更する機能を必要とすることです。これを行うには、setStateというメソッドを使用します。データが変更されるたびに仮想domを再レンダリングすることについて説明したときのことを覚えていますか?

一部のデータが変更されたことをアプリに通知するシグナル→仮想DOMを再レンダリング→新しい仮想DOMで以前の仮想DOMを変更→必要な変更で実際のDOMのみを更新

その「アプリに何らかのデータが変更されたことを通知する信号」は、実際には単にsetStateです。 setStateが呼び出されるたびに、仮想DOMが再レンダリングされ、差分アルゴリズムが実行され、必要な変更で実際のDOMが更新されます。

補足説明として、以下のコードでsetStateを導入するとき、リストにあるいくつかのイベントも導入します。 2羽の鳥、1石。

そのため、次のコードサンプルでは、​​入力ボックスを使用して、誰かが入力するたびに状態が自動的に更新され、ユーザー名が変更されるようにします。

クラスHelloUserはReact.Componentを拡張します{
  constructor(props){
    スーパー(小道具)
this.state = {
      ユーザー名: 'tylermcginnis'
    }
this.handleChange = this.handleChange.bind(this)
  }
  handleChange(e){
    this.setState({
      ユーザー名:e.target.value
    })
  }
  render(){
    リターン(
      
        こんにちは{this.state.username}
        名前の変更:         <入力           type = "text"           値= {this.state.username}           onChange = {this.handleChange}         />            )   } }

さらにいくつか紹介したことに注意してください。最初のものは、handleChangeメソッドです。このメソッドは、ユーザーが入力ボックスに入力するたびに呼び出されます。 handleChangeが呼び出されると、setStateが呼び出され、入力ボックス(e.target.value)に入力されたものでユーザー名が再定義されます。 setStateが呼び出されるたびに、Reactは新しい仮想DOMを作成し、diffを実行してから、実際のDOMを更新することを忘れないでください。

次に、レンダリングメソッドを見てみましょう。入力フィールドを含む新しい行を追加しました。入力フィールドのタイプは明らかにテキストになります。この値は、getInitialStateメソッドで最初に定義されたユーザー名の値になり、handleChangeメソッドで更新されます。

おそらく今まで見たことのない新しい属性onChangeがあることに注意してください。 onChangeはReactであり、入力ボックスの値が変わるたびに指定したメソッドを呼び出します。この場合、指定したメソッドはhandleChangeでした。

上記のコードのプロセスは次のようになります。

ユーザーが入力ボックスに入力する→handleChangeが呼び出される→コンポーネントの状態が新しい値に設定される→Reactが仮想DOMを再レンダリングする→React Diffが変更する→Real DOMが更新される

後で、小道具について説明するときに、状態を処理するいくつかのより高度なユースケースが表示されます。

着きました!以下の太字のアイテムを説明できない場合は、そのセクションをもう一度お読みください。 Reactを本当に学習するための1つのヒント:これを受動的に読んで、実際に何が起こっているかを実際に知っており、私たちがしていることを再現できるという誤った安心感を与えないでください。 CodeSandboxに移動して、私がやったことを見ずにコンポーネントを再作成(または独自に作成)してみてください。これは、Reactを使用して構築する方法を真に学び始める唯一の方法です。これは、このチュートリアルと次の手順で行います。

SX JSX — HTMLのような構文を作成して、
LightweightJavaScriptオブジェクトに変換されます。
仮想DOM —実際のJavaScript表現
DOM。
React.Component —新しいコンポーネントを作成する方法。
render(メソッド)— UIの外観を説明します
特定のコンポーネント。
ReactDOM.render — ReactコンポーネントをDOMノードにレンダリングします。
状態—コンポーネントの内部データストア(オブジェクト)。
constructor(this.state)-確立する方法
コンポーネントの初期状態。
setState —状態の更新に使用されるヘルパーメソッド
コンポーネントとUIの再レンダリング
props —子コンポーネントに渡されるデータ
親コンポーネントから。
propTypes —プレゼンスまたはタイプを制御できます
子コンポーネントに渡される特定の小道具。
defaultProps —コンポーネントのデフォルトの小道具を設定できます。
コンポーネントのライフサイクル
  -componentDidMount —コンポーネントがマウントされた後に発生します
  -componentWillUnmount —コンポーネントがマウント解除される前に発生します
  -getDerivedStateFromProps-コンポーネントがマウントされ、
小道具が変わるたびに。の状態を更新するために使用
小道具が変更されたときのコンポーネント
イベント
  -onClick
  -onSubmit
  -onChange

親コンポーネントから状態を受け取る(props、propTypes、getDefaultProps)

道具なしで本当に多くのことをするのは難しいので、私たちはすでに小道具について数回話しました。上記の定義では、propsは親コンポーネントから子コンポーネントに渡されるデータです。これにより、Reactアーキテクチャは非常に簡単になります。特定のデータを使用する必要がある最上位の親コンポーネントの状態を処理し、そのデータも必要とする子コンポーネントがある場合は、そのデータを小道具として渡します。

小道具を使用する非常に基本的な例を次に示します。

クラスHelloUserはReact.Componentを拡張します{
  render(){
    リターン(
      
こんにちは、{this.props.name}     )   } }
ReactDOM.render(
  、
  document.getElementById( 'root')
);

9行目には、「タイラー」という値を持つnameという属性があります。コンポーネントでは、{this.props.name}を使用して「Tyler」を取得できます。

より高度な例を見てみましょう。これから2つのコンポーネントを作成します。 1人の親、1人の子。親は状態を追跡し、その状態の一部を小道具として子に渡します。まず、その親コン​​ポーネントを見てみましょう。

親コンポーネント:

クラスFriendsContainerはReact.Componentを拡張します{
  constructor(props){
    スーパー(小道具)
this.state = {
      名前:「タイラー・マクギニス」、
      友達:[
        「ジェイク・リングウォール」、
        「サラ・ドラスナー」、
        「メリッククリステンセン」
      ]
    }
  }
  render(){
    リターン(
      
        

名前:{this.state.name}                     )   } }

このコンポーネントでは、これまで見たことのないことはほとんどありません。初期状態があり、その初期状態の一部を別のコンポーネントに渡します。新しいコードの大部分はこの子コンポーネントに由来するので、詳しく見てみましょう。

子コンポーネント:

クラスShowList extends React.Component {
  render(){
    リターン(
      
        

友人         
              {this.props.names.map((friend)=>
  • {friend} )}                     )   } }

renderメソッドから返されるコードは、実際のDOMがどのように見えるべきかを表現していることに注意してください。 Array.prototype.mapに慣れていない場合、このコードは少し奇妙に見えるかもしれません。すべてのマップは、新しい配列を作成し、配列内の各アイテムでコールバック関数を呼び出し、新しい配列に各アイテムでコールバック関数を呼び出した結果を入れます。例えば、

const friends = [
  「ジェイク・リングウォール」、
  「サラ・ドラスナー」、
  「メリッククリステンセン」
];
const listItems = friends.map((friend)=> {
  return "
  • " +友達+ ""; });
  • console.log(listItems);

    上記のconsole.logは["

  • Jake Lingwall "、 "
  • Murphy Randall "、 "
  • Merrick Christensen "]を返します。

    発生したのは、新しい配列を作成し、元の配列の各アイテムに

  • を追加したことだけです。

    マップの素晴らしい点は、Reactに完全に適合することです(そしてJavaScriptに組み込まれています)。したがって、上記の子コンポーネントでは、名前をマッピングし、各名前を

  • タグのペアでラップして、listItems変数に保存します。次に、renderメソッドは、すべての友人とともに順序付けられていないリストを返します。

    小道具について話すのをやめる前に、もう1つの例を見てみましょう。データがどこにあっても、そのデータを操作したい正確な場所であることを理解することが重要です。これにより、データについて簡単に推論できます。特定のデータのゲッター/セッターメソッドはすべて、そのデータが定義された同じコンポーネント内に常に存在します。データが存在する場所以外のデータを操作する必要がある場合は、ゲッター/セッターメソッドを小道具としてそのコンポーネントに渡します。そのような例を見てみましょう。

    クラスFriendsContainerはReact.Componentを拡張します{
      constructor(props){
        スーパー(小道具)
    this.state = {
          名前:「タイラー・マクギニス」、
          友達:[
            「ジェイク・リングウォール」、
            「サラ・ドラスナー」、
            「メリッククリステンセン」
          ]、
        }
    this.addFriend = this.addFriend.bind(this)
      }
      addFriend(friend){
        this.setState((state)=>({
          友人:state.friends.concat([friend])
        }))
      }
      render(){
        リターン(
          
            

    名前:{this.state.name}                              )   } }

    。 addFriendメソッドで、setStateを呼び出す新しい方法を導入したことに注意してください。オブジェクトを渡す代わりに、状態を渡す関数を渡します。以前の状態に基づいてコンポーネントの新しい状態を設定するときはいつでも(Friends配列で行っているように)、現在の状態を取得し、新しい状態とマージするデータを返す関数をsetStateに渡します。状態。こちらをご覧ください。
    クラスAddFriendはReact.Componentを拡張します{
      constructor(props){
        スーパー(小道具)
    this.state = {
          newFriend: ''
        }
    this.updateNewFriend = this.updateNewFriend.bind(this)
        this.handleAddNew = this.handleAddNew.bind(this)
      }
      updateNewFriend(e){
        this.setState({
          newFriend:e.target.value
        })
      }
      handleAddNew(){
        this.props.addNew(this.state.newFriend)
        this.setState({
          newFriend: ''
        })
      }
      render(){
        リターン(
          
            <入力           type = "text"           値= {this.state.newFriend}           onChange = {this.updateNewFriend}         />         
    クラスShowList extends React.Component {
      render(){
        リターン(
          
            

    友人         
                {this.props.names.map((friend)=> {             return
    • {friend}           })}                     )   } }

    上記のコードは前の例とほとんど同じですが、フレンドリストに名前を追加できるようになりました。追加する新しい友達を管理する新しいAddFriendコンポーネントをどのように作成したかに注目してください。

    これは、親コンポーネント(FriendContainer)は追加する新しい友達を気にせず、友達全体(友達の配列)のみを気にするためです。ただし、データを操作するコンポーネントからのデータのみを操作するというルールに固執しているため、addFriendメソッドをAddFriendコンポーネントに小道具として渡し、handleAddNewができたら新しい友人と呼び出します。メソッドが呼び出されます。

    この時点で、3〜4分間動けなくなったら、上記のコードをガイドとして使用して、同じ機能を自分で再作成することをお勧めします。

    小道具から先に進む前に、小道具に関する2つのReact機能について説明します。それらはpropTypesとdefaultPropsです。どちらも非常に簡単なので、ここではあまり詳しく説明しません。

    prop-typesを使用すると、子コンポーネントに渡される特定の小道具の存在またはタイプを制御できます。 propTypesを使用すると、特定の小道具が必要であること、または特定の小道具が特定のタイプであることを指定できます。

    React 15の時点で、PropTypesはReactパッケージに含まれなくなりました。 npm install prop-typesを実行して、個別にインストールする必要があります。

    defaultPropsを使用すると、特定のプロップがコンポーネントに渡されない場合に備えて、特定のプロップのデフォルト(またはバックアップ)値を指定できます。

    addFriendが関数であり、AddFriendコンポーネントに渡されることを要求するために、propTypeを使用して、以前から現在までコンポーネントを変更しました。また、defaultPropsを使用して、ShowListコンポーネントにフレンドの配列が与えられない場合、デフォルトで空の配列になるように指定しました。

    ReactからReactをインポート
    「prop-types」からPropTypesをインポートします
    クラスAddFriendはReact.Componentを拡張します{
      constructor(props){
        スーパー(小道具)
    this.state = {
          newFriend: ''
        }
      }
      updateNewFriend(e){
        this.setState({
          newFriend:e.target.value
        })
      }
      handleAddNew(){
        this.props.addNew(this.state.newFriend)
        this.setState({
          newFriend: ''
        })
      }
      render(){
        リターン(
          
            <入力           type = "text"           値= {this.state.newFriend}           onChange = {this.updateNewFriend}         />         
    AddFriend.propTypes:{
      addNew:PropTypes.func.isRequired
    }
    クラスShowList extends React.Component {
      render(){
        リターン(
          
            

    友人         
                {this.props.names.map((friend)=> {             return
    • {friend}           })}                     )   } }

    ShowList.defaultProps = {
      名前:[]
    }

    さて、私たちはこの最初のチュートリアルの最後の段階にいます。ガイドを見て、残っているものを見てみましょう。

    SX JSX — HTMLのような構文を作成して、
    軽量のJavaScriptオブジェクトに変換されます。
    仮想DOM —実際のJavaScript表現
    DOM。
    React.Component —新しいコンポーネントを作成する方法。
    render(メソッド)— UIの外観を説明します
    特定のコンポーネント。
    ReactDOM.render — ReactコンポーネントをDOMノードにレンダリングします。
    状態—コンポーネントの内部データストア(オブジェクト)。
    constructor(this.state)-確立する方法
    コンポーネントの初期状態。
    setState —状態の更新に使用されるヘルパーメソッド
    コンポーネントとUIの再レンダリング
    props —子コンポーネントに渡されるデータ
    親コンポーネントから。
    propTypes —プレゼンスまたはタイプを制御できます
    子コンポーネントに渡される特定の小道具。
    defaultProps —コンポーネントのデフォルトの小道具を設定できます。
    コンポーネントのライフサイクル
      -componentDidMount —コンポーネントがマウントされた後に発生します
      -componentWillUnmount —コンポーネントがマウント解除される前に発生します
      -getDerivedStateFromProps-コンポーネントがマウントされ、
    小道具が変わるたびに。の状態を更新するために使用
    小道具が変更されたときのコンポーネント
    イベント
      -onClick
      -onSubmit
      -onChange

    とても近い!

    コンポーネントのライフサイクル

    作成する各コンポーネントには、さまざまなことに役立つ独自のライフサイクルイベントがあります。たとえば、最初のレンダリングでajaxリクエストを行い、データを取得したい場合、どこでそれを行いますか?または、小道具が変更されるたびに何らかのロジックを実行したい場合、どうすればよいでしょうか?さまざまなライフサイクルイベントは、これらの両方に対する答えです。それらを分解しましょう。

    クラスAppはReact.Componentを拡張します{
      constructor(props){
        スーパー(小道具)
    this.state = {
          名前:「タイラー・マクギニス」
        }
      }
      componentDidMount(){
        //コンポーネントがDOMにマウントされると呼び出されます
        // AJAXリクエストを作成するのに適しています
      }
      static getDerivedStateFromProps(nextProps、prevState){
        //この関数から返すオブジェクトは
        //現在の状態とマージされます。
      }
      componentWillUnmount(){
        //コンポーネントがマウント解除される前にIMMEDIATELYが呼び出されます
        //リスナーのクリーンアップに適しています
      }
      render(){
        リターン(
          
            こんにちは、{this.state.name}            )   } }

    componentDidMount —最初のレンダリング後に1回呼び出されます。このメソッドが呼び出されたときにコンポーネントはすでに呼び出されているため、必要な場合は仮想DOMにアクセスできます。これを行うには、this.getDOMNode()を呼び出します。これがライフサイクルイベントであり、AJAXリクエストを行ってデータを取得します。

    componentWillUnmount —このライフサイクルは、コンポーネントがDOMからアンマウントされる直前に呼び出されます。これは、必要なクリーンアップを実行できる場所です。

    getDerivedStateFromProps —場合によっては、渡されている小道具に基づいてコンポーネントの状態を更新する必要があります。これは、それを行うライフサイクルメソッドです。小道具と状態が渡され、返されるオブジェクトは現在の状態にマージされます。

    まあ、あなたがこの点まで私と一緒に立ち往生したら、素晴らしい仕事です。このチュートリアルがお役に立てば幸いです。そして、少なくともReactに少しでも快適に感じるようになりました。

    Reactの基本をさらに詳しく見るには、Reactの基礎コースをご覧ください。

    タイラー・マクギニス