コード状態(TIL 3日間)

React

今日はまだ気まずくて内面的な親密感がありますが、親しい関係ではない反応を復唱したいと思います.
まず,ベースから,応答をフェイスブックによって作成されたユーザUIを構築するライブラリと呼ぶ.ユーザーのビューに焦点を当て、3つの代表的な特徴を備えています.
1.jsx構文
jsxはjavascript構文で、JavaScriptでHTML構文を使用してビューを整理するのに役立ち、応答プログラムの開発に役立ちます.

class HelloMessage extends React.Component {
 render() {
   return (
     <div>
     hello {this.props.name}
 		</div>
	)
	}
}

コードにはHTMLタグがあり、jsでこの構文を使用することができます.この利便性により、応答の可用性が大幅に向上します.

コンポーネントベース
反応を素子ベースのライブラリと呼ぶ.既存のWebページを作成するのではなく、複数の部分を分割することで、コードの再利用性とメンテナンス性を向上させます.長いHTMLコードを作成していて、その一部を変更する必要があると仮定すると、コードの検索から始め、私が今変更しているコードの一部だけを変更する必要がありますが、うっかり別の部分に触れてしまうと、問題は問題を解決するのではなく、問題を解決することになります.コンポーネントベースの応答プログラムとして開発され、HTMLコードをローカルファイルとし、一部を変更する必要がある場合は、その部分のファイルを変更するだけでよい.

仮想DOM(仮想DOM)
これは最も理解しにくい部分です.まず、DOMはドキュメントオブジェクトモデルと呼ばれるHTMLユニットをオブジェクトと見なすモデルであり、DOMの構造はツリー構造であり、DOM要素を修正するために関数を作成すると、毎回不要な演算が発生することを理解しました.毎回の再生を避けるために,我々はできるだけ一度にすべての操作を完了することを望んでいるが,この問題を解決するのは仮想DOMである.

これは,仮想ドームにおいて変化を予め感知することによって実現される.仮想DOMは実際のDOMではないため、レンダリングを行わず、計算コストが比較的低いため、すべての変更を一度にレンダリングできます.
自分でDOMを更新する場合は、更新されていない部分と更新された部分を知っておく必要があります.仮想ドームは、変更されていない部分と変更された部分を自動的に検出して更新します.
また、変更するDOMが変更されたかどうかを知る必要はありません.また、各同期情報を知る必要もありません.要するに、仮想DOMを使用する理由は、実際のDOMを直接変更することができますが、これは非常に高価なタスクなので、仮想ドームで事前に最適化することができます.
この3つの特徴と、実際の使用では理解しにくい点を振り返ってみましょう.
難問のアプリケーションを印刷します.jsとindex.例えばjs

レンダリング()メソッドは、画面にhtmlビューを作成できる応答コンポーネントです.returnで受信した値は後でhtmlコードに変更されます.次にexport構文を使用して生成されたAppクラスをエクスポートします.
-Appをロードして使用すると、htmlコードが使用され、すべての反応ファイルがhtmlコードのように使用されることがわかります.htmlコードを複数の応答ファイルに分割して操作できることがわかります.コードをいくつか修正するだけで済むので、複数の人が協力しやすくすることもできます.

そしてとても重要な道具とstate...
反応素子で処理されたデータは2つの部分に分かれている.これがpropsとstateであり、前の要約ではpropsは親素子が子素子に与える値である.サブエレメントはpropsのみを受け入れ、直接変更することはできません.
逆にstateは素子内部で宣言され、素子内部で値を変更できます.

import React, { Component } from 'react';

class MyName extends Component {
  render() {
    return (
      <div>
        안녕하세요! 제 이름은 <b>{this.props.name}</b> 입니다.
      </div>
    );
  }
}

export default MyName;

新しい構成部品を作成した後、受け取ったprops値はthisです.クエリー可能

import React, { Component } from 'react';
import MyName from './MyName';

class App extends Component {
  render() {
    return (
      <MyName name="리액트" />
    );
  }
}

export default App;

コンポーネントをimportでインポートしてレンダリングした後に通常のラベルを作成するように、propsの値nameにreactionが含まれている場合は、ブラウザを開くと「こんにちは!「リオと申します」ははは