【React】React入門

1. Reactとは何ですか?

1. ユーザーインターフェイスを構築するためのJavaScriptライブラリです
2. これは Facebook の内部プロジェクトとして始まり、Instagram Web サイトの構築に使用され、2013 年 5 月にオープンソース化されました。
3. コンポーネントベースの開発モデルを採用して、ユーザーを独立した再利用可能なコンポーネントに分割し、コンポーネントの組み合わせとデータの一方向フローを通じて複雑なユーザー インターフェイスを構築します。

2. React と従来の MVC の関係

React は完全な MVC フレームワークではなく、せいぜい MV の V (View) と考えることができます。ページ UI を構築するための React のライブラリは、次のように単純に理解できます: React はインターフェイスを独立した小さなブロックに分割します。各ブロックはコンポーネントです。これらのコンポーネントを組み合わせてネストしてページを形成できます。

3. Reactの特徴

1. 宣言型プログラミング

宣言型プログラミングは、実行方法ではなく、実行したいことに焦点を当てたプログラミング パラダイムであり、
ステップを明示的に定義せずにロジックを表現します。つまり、論理計算に基づいて表示するコンポーネントを宣言する必要があります。

①. マーク付きマップの実装

マップを作成し、マーカーを作成し、マップ上にマーカーを強制的に追加する手順は次のとおりです。

// 创建地图
const map = new Map.map(document.getElementById('map'), {
    
    
    zoom: 4,
    center: {
    
    lat,lng}
});

// 创建标记
const marker = new Map.marker({
    
    
    position: {
    
    lat, lng},
    title: 'Hello Marker'
});

// 地图上添加标记
marker.setMap(map);

Reactを使用して上記の機能を実装する手順は次のとおりです。

<Map zoom={
    
    4} center={
    
    lat, lng}>
    <Marker position={
    
    lat, lng} title={
    
    'Hello Marker'}/>
</Map>

宣言型プログラミングによりReactコンポーネントが使いやすくなり、最終コードはシンプルで保守が容易になります。

2. 効率的かつ柔軟

React は既知のフレームワークやライブラリと連携でき、DOM をシミュレートすることで DOM とのやり取りを最小限に抑えることができます。

3. コンポーネント開発（コンポーネント）

上で述べたように、React ではすべてがコンポーネントです。アプリケーションのロジック全体を小さな個別の部分に分割するのが一般的です。個々の部品をコンポーネントと呼びます。

コンポーネントは、データ入力を受け入れ、それを処理し、 UIにレンダリングされるReact 要素を返す関数またはクラスにすることができます。

①.機能部品

const Header = () => {
    
    
    return(
        <Jumbotron style={
    
    {
    
    backgroundColor:'orange'}}>
            <h1>TODO App</h1>
        </Jumbotron>
    )
}

②. クラスコンポーネント（ステートフルコンポーネント）

class Dashboard extends React.Component {
    
    
    constructor(props){
    
    
        super(props);

        this.state = {
    
    

        }
    }
    render() {
    
    
        return (
            <div className="dashboard"> 
                <ToDoForm />
                <ToDolist />
            </div>
        );
    }
}

③. 部品が持つべき特性

1. コンポーザブル: 各コンポーネントは他のコンポーネントと一緒に使用したり、別のコンポーネント内にネストしたりするのが簡単です。
2. 再利用可能: 各コンポーネントには独立した機能があり、複数の UI シナリオで使用できます。
3. 保守可能: それぞれの小さなコンポーネントには独自のロジックのみが含まれているため、理解と保守が容易になります。

4. 一方向の応答データ フロー

React は一方向の応答データ フローを実装するため、従来のデータ バインディングよりもシンプルであり、コードの重複が大幅に削減されます。

4. 仮想DOM

1. 従来の DOM 更新

実際のページは DOM ツリーに相当しますが、従来のページ開発モデルでは、ページを更新するたびに手動で DOM を操作して更新する必要がありました。

①.例を挙げて説明する

WeChat モーメントでプルダウンして更新すると、新しいコンテンツが表示されます。このとき、モーメントのデータを100個以上プルしたのですが、このときプルダウンして更新した瞬間に投稿されたばかりのモーメントの内容が誰かに削除されてしまったという場面が現れました。それに対処しますか？?

以前はバックエンドから 100 個のデータを返しましたが、今回はバックエンドが 99 個のデータを返したとします。では、このページでこれを行う最も簡単な方法は何でしょうか?

以前の古い方法によると、最初にクリアしてから 99 個のデータを動的に作成します。次に考えてみましょう。常に最初にクリアしてから 99 個のデータを動的に作成すると、ブラウザはクラッシュしますか? ? ブラウザのクラッシュ状況を解決するには、仮想 DOM を使用できます。

2. 仮想 DOM

フロントエンド開発では、パフォーマンスを最も消費するのは DOM 操作であり、コードのこの部分によりプロジェクト コード全体の保守が困難になります。React では、インフラストラクチャ層は、JavaScript オブジェクト ツリーに記述したコードを均一にコンパイルし、メモリに保存し、さらに実際の DOM にマッピングします。データ更新のたびに、仮想 DOM が再計算され、最後に生成された仮想 DOM と比較 (Diff) され、変更された部分がバッチで更新されるため、非効率な操作が削減されます。

①.例を挙げて説明する

5. React プロジェクトを作成し、最初の React アプリケーションを作成します

1. Reactプロジェクトを作成する

①. 対象ファイル配下にcmdを使用して作成します。

npx create-react-app reactdemo  //reactdemo为创建的项目名称，可任意取名

②. 成功結果の説明

③. プロジェクトを実行する

npm start

2. 最初の React アプリケーションを作成する

React の開発では、複数の依存関係ファイル (react.js、react-dom.js) の導入が必要で、それぞれ開発バージョンと製品バージョンがあり、React プロジェクトの作成時には、これらのファイルはすでにインストールされています。次に、プロジェクト ディレクトリの src ディレクトリをクリアし、その中にindex.jsを再作成する必要があります。

//从react的包当中引入了React。只要你要写React.js组件就必须引入React，因为react里有一种语法叫JSX
import React from 'react'
//ReactDOM可以帮助我们把React组件渲染到页面上去
import ReactDOM from 'react-dom'

//ReactDOM里有一个render方法，就是把组件渲染并且构造DOM树，然后插入到页面上某个特定的元素上
ReactDOM.render(
  <h1>好好学习，天天向上</h1>,
	document.getElementById("root")
)

6. React と Vue の違い

Vue と React はどちらも人気のあるフロントエンド フレームワークですが、次のような違いがあります。

一般に、Vue はシンプルで習得が容易で、中小規模のプロジェクトや迅速な開発を追求するチームに適しています。React はより柔軟で効率的で、大規模プロジェクトや一定の経験を持つフロントエンド開発者に適しています。

7. React と Vue のどちらを選択するか

Vue と React のどちらを使用するかを検討する場合は、次の点を考慮する必要があります。

1. プロジェクトの要件と複雑さ

プロジェクトを迅速に構築する必要があり、コンポーネントが比較的シンプルでデータ フローがそれほど複雑ではない場合は、Vue を選択できます。プロジェクトに大規模で複雑なコンポーネントの開発と高度にカスタマイズ可能なデータ フロー管理が含まれる場合は、React を選択できます。より適切になります。

2. チームの経験とスキル

チームにすでに経験豊富な Vue または React 開発者がいる場合は、彼らが使い慣れているフレームワークを優先できます。それ以外の場合は、チームのスキルを評価し、適切なフレームワークを選択できます。

3.群集の生態と支援

Vue と React はどちらもコミュニティの面で強力なサポートとエコロジーを備えていますが、React の方が人気があるため、コミュニティのサポートと問題解決の点で React フレームワークの方が強力である可能性があるため、React フレームワークの選択を検討できます。

4. 性能と音量

Vue フレームワークのパフォーマンスとサイズは比較的小さいため、ページの高速読み込みと大量のデータの処理が必要なプロジェクトには Vue の方が適している可能性があります。より柔軟なコード構成構造とコードの再利用性の向上が必要なプロジェクトには、React の方が適している可能性があります。

つまり、Vue か React の選択には、プロジェクトの要件、チームのスキル、コミュニティのサポート、パフォーマンスの量などを総合的に考慮し、具体的な状況に応じてメリットとデメリットを比較検討し、プロジェクトに最適なフレームワークを選択する必要があります。

8. まとめ

上記は、React の概念、基本的な知識、React プロジェクトの作成方法、React アプリケーションの作成方法、およびいくつかの基本操作を含む、React の初期理解です。今後もReactに関する学習コンテンツを更新していきます。