04.構成部品

4919 ワード
はんのう 構成部品 テキストリンク
🔍 構成部品
要素は、1つ以上の反応要素セットを返す関数です.
👓 特長
  • コンポーネントは再利用性が高く、UIの構成に非常に有効です.
    これにより、多くの複雑な反応要素を再利用することができ、コードの記述をより簡単に読みやすくすることができます.
    • (複雑な反応元素を構成する場合は、機能別に素子を区分することを推奨する.)

  • 同じ構成部品でも、ステータスを変更したい場合はpropsを使用してデータを受信し、ステータスを変更できます.

  • ルート構成部品から構成部品を再帰的にレンダリングします.

  • ライフサイクルメソッドAPIがあり、構成部品の出現、消失、または変化が発生したときに、所定のタスクを処理することができる.

  • 構成部品にはクラス構成部品と関数構成部品があります.
    コード作成の利便性,ライフサイクルメソッドの短縮性,可読性などの利点から,現在では関数型素子がほとんど用いられている.
  • 要素のライフサイクルAPIと基本概念を理解してこそ、関数型要素をより容易に理解することができる.
    さらに、ライフサイクルAPIを使用すると、クラス要素は、関数要素よりも詳細な実装を実現することができる.
    • ライフサイクルAPIでは、後で個別に議論し、クラス構成部品と関数構成部品について簡単に説明します.
    👀 Class Component
    import React, { Component } from "react";

class App extends Component {
 render() {
   return <div></div>;
 }
}
    Class Coponentの顔はこんな感じです.
    React.これらの機能は、Copentを継承して使用できます.
    JavaScriptではclassがインスタンスを返します.
    class Person{
constructor(height,weight){
 this.height = height;
 this.weight = weight;
}
  introduce(){
  console.log("Hello, I'm Person")
  }
}


const me = new Person(184,75)
    これによりclassはnew演算子を持つインスタンスを返します.
    Class Componentは反応DOM元素を返します.
    これは、反応器内部でnew演算子を使わずにDOM要素を返すために設計されているそうです.
    どのように設計されているのか知りたいのですが、内容については今後さらに検討しなければなりません.
    render()
    import React, { Component } from "react";

class App extends Component {
 render() {
   return <div></div>;
 }
}
    Class Componentで最も重要な方法はrenderメソッドです.
    render()は、反応要素を返してレンダリングします.
    🎤 整理する
    構成部品とは
    Tinkerを導入した後、DebugモードでInstant Runをオンにする方法
    どのようにParseサーバーを展開し、ダッシュボードを解析し、デジタルオーシャン2021のアプリを反応させる