TIL 12,React:基本概念/CRA*

9005 ワード
React CRA TIL テキストリンク
反応を学んで精神が崩壊した精神が崩壊した

一気に内容を吸収しすぎて、溜まってしまったようです.ゆっくり噛んで消化してから行きます.

どんな反応ですか。


Webがますます複雑になるにつれて,より多くのインタラクションをより効率的に処理するためにSPAが導入された.SPA方式を用いた新技術は大きく3種類ある:Angular,Vue,React.その中でreactを学びます.そのため、多くの企業がReactを利用して開発しており、巨大なコミュニティが存在しているため、開発中に発生した問題に簡単に助けられます.そのため,初級開発者の立場から第一歩を踏み出し,反応ほどよいものはない.

はんのうとくせい


1. Component


Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
-Docsに応答
リアクターは、ドキュメントを構成部品のツリーに整理します.コンポーネントとは、再利用可能なUI単位を指します.

各コンポーネントには、階層構造によってドキュメントを整理するUIの特定の部分が含まれています.したがって、最も高い、すべてのサブエレメントを含むエレメント、およびその中に含まれるサブエレメントが必然的に存在する.これにより,情報の伝達方向は常に上から下へと進むと推定される.

2. Virtual DOM


をクリックしてもアクセスできます.逆に,仮想DOM技術を用いて変化した部分を検出し,これらの部分だけが実際のDOMに反映される.

仮想DOMとは,簡単に言えば実際のDOMの簡略コピーである.応答では、インタラクションが発生した場合、UI全体が仮想DOMで最初にレンダリングされます.変化した部分が検出されると、実際のDOMではその部分だけが再レンダリングされます.これにより、わずかな部分だけが変化しても、従来の全体的な再レンダリング方式に比べて、コンピュータリソースを大幅に節約することができます.

3. JSX


JAvascriptの拡張構文.簡単に言えば、JS+HTMLです.
上述したように、反応器は、要素単位でUIをレンダリングする.すなわち、コンポーネントはUIを含む.UIを含めるということは、HTML要素が含まれていることを意味します.HTMLを含めるためには、JavaScriptがHTMLを理解している必要があります.HTMLのJSを理解する.これを可能にする拡張文法はJSXです.
たとえば、
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
上図に示すようにjavascriptはHTMLとともに使用されます.

クラス素子vs関数素子


コンポーネントはJSXに戻ります.構成部品は関数型とクラスに分けられます.
// 함수형 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 클래스형 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
両者の違いは、stateとLife Cycle Eventの使用の有無に大別されます.state(詳細は後述)は、ドキュメント内で変化する値を格納するリポジトリであり、Life Cycle Eventは、リアクター内で素子をレンダリングする際に実行される一連の方法を指す.クラス構成部品の場合、stateおよびlife Cycle Eventを使用できますが、関数構成部品は使用できません.
また、クラス構成部品は、レンダリング中に論理を記述するための任意の関数を定義することもできますが、関数構成部品は使用できません.ただし、関数型素子はメモリが少ないため、クラス素子よりも軽い.

構成部品ライフサイクル


[リアクション](Reactions)では、要素はレンダリング中に単純なレンダリングではなく、レンダリング中に一連の関数を順次実行します.これらの関数を使用すると、構成部品で使用されているデータを更新し、それに応じて構成部品を再レンダリングできます.主に用いられる代表的な関数は,componentDidMount,componentDidUpdate,componentWillUnmountである.

上図は素子のライフサイクル過程をよく要約している.図を説明すると、第1の要素が動作するとき、まずconstructorが動作し、stateが保存される.その後、最初のstateに従ってrender関数でレンダリングされ、レンダリングが完了するとcomponentDidMount関数が呼び出される.通常、componentDidMountからデータをロードするなどの行動をとる.componentDidMountは最初は1回しか運行していなかったからです.(1回しか運行していないのか、componentDidMountでsetStateを運行しているのに、なぜ無限ループに落ちないのか、これは秘密ではありません)
1回目のレンダリングが完了した後、setStateによってstateが変更されると、render関数が再び呼び出されて新しい画面がレンダリングされます.その後、componentDidUpdateが実行される.△ここにsetStateと書くと無限ループに陥る.
要素が使用されずに除去されると、componentDidUpdateが呼び出される.

CRA: Create React App


CRAによると、REACTはjsライブラリであり、フレームワークとは異なり、すべてのコンテンツを最初から直接作成する必要があるという.初期設定にはWebPack、Babel、ESLintなども含まれており、私のように開発を始めたばかりの人にとっては、プロジェクトを始めるのは容易ではありません.そのため、誰もが簡単に反応項目を起動できるように、ある程度のボイラープレートを提供するのはcreate-react-appセットです.npx install create-react-app <project_name>でプロジェクトを開始します.では、以下に示すように、最初に生成されたファイルとフォルダがあります.

ここでは、CRAの構造、index.htmlおよびindex.jsを理解するための2つの重要な文書がある.

1. index.html


その結果、画面に表示されるHTMLファイルです.他のフォルダをめくってもHTMLファイルはindex.htmlこれしかありません.すべてのページがこのHTMLファイルで表示されているからです.(だからスパです.)
<body>
  <div id="root"></div>
</body>
idは、1つのroot、divタグのみで構成され、プロジェクト全体で触れる必要のないファイルです.このHTMLファイルだけで複数のページをレンダリングする方法は、index.jsを見ればわかります.

2. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
1つのHTMLファイルにすべてのページを含める方法が方法です.react-domソフトウェアパッケージでは、render関数が使用され、index.htmlファイルでroot idのタグを検索し、App要素がレンダリングされる.典型的には、App要素はまた、複数のサブ要素から構成される.ユーザーのインタラクションに基づいて複数のコンポーネントを作成または変更してWebページを作成または変更し、そのすべてをAppという最上位コンポーネント(この例ではAppが最上位にあるが、通常Routerが最上位にある)にリンクした結果、1つのHTMLファイルですべてレンダリングされます.
書き終わった後、私が学んだことは思ったほど多くないと思います.崩壊するほどではないようで、初めての勉強なのでプレッシャーが大きいです.焦らないで、ゆっくりと一つ一つ、そして続けてください.
Reactdomレンダリングはもはや反応18でサポートされていません
[プロジェクト/IOS]株式平均単価アプリケーション1の作成