React の基本 Day04 - React の原則の公開と React ルーティングの基本

React の原理が明らかに

目標

• Reactコンポーネントの更新メカニズムを説明できる
• コンポーネントのパフォーマンスの最適化を実行する機能
• 仮想 DOM および DIff アルゴリズムを話すことができる

コンポーネント更新メカニズム

• setState() の 2 つの関数

  • 状態の変更
  • コンポーネントを更新する

• プロセス: 親コンポーネントが再レンダリングされると、子コンポーネントも再レンダリングされますが、現在のコンポーネントのサブツリー (現在のコンポーネントとそのすべてのサブコンポーネント) のみがレンダリングされます。

コンポーネントのパフォーマンスの最適化

状態を緩和する

• 状態の削減: コンポーネントのレンダリングに関連するデータのみを保存します (例: カウント/リスト データ/ロードなど)。
• 注: レンダリングに使用されないデータを状態に置かないでください。
• 複数のメソッドで使用する必要があるこの種のデータの場合は、この場所に配置する必要があります。

不必要な再レンダリングを避ける

• コンポーネント更新メカニズム: 親コンポーネントを更新すると、子コンポーネントも更新されます。この考え方は非常に明確です。
• 問題: 変更がない場合でもサブコンポーネントが再レンダリングされる
• 不必要な再レンダリングを避けるにはどうすればよいでしょうか?
• 解決策: フック関数 shouldComponentUpdate(nextProps, nextState) を使用します。
  • この関数では、nextProps と nextState が最新のステータスと属性です。
• 機能: この関数には戻り値があり、true が返された場合は再レンダリングが必要であることを意味し、false が返された場合は再レンダリングが必要ないことを意味します。
• トリガー時間: 更新フェーズのフック関数。コンポーネントが再レンダリングされる前に実行されます (ShouldComponentUpdate => render)。

乱数の場合

要件: 番号をランダムに生成し、ページに表示します。生成された番号が現在表示されている番号と同じ場合、UI を更新する必要はありません。そうでない場合は、UI を更新します。

nextState パラメータを使用して、現在のコンポーネントを更新する必要があるかどうかを判断します。

class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件，每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps,nextState) {
         // 判断一下当前生成的 值是否与页面的值相等
         if(nextState.number !== this.state.number){
             return true
         }
         return false
    }
    render() {
        return (
            <div>
                随机数：{this.state.number} <br />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}

props パラメータを使用して、更新が必要かどうかを判断します

class App extends React.Component {
    state = {
        number: 0
    }
    // 点击事件，每次点击生成一个随机数
    hanldeBtn = () => {
        this.setState({
            number: Math.floor(Math.random() * 3)
        })
    }

    render() {
        return (
            <div>
                <NumberBox number={this.state.number} />
                <button onClick={this.hanldeBtn}>生成随机数</button>
            </div>
        )
    }
}
class NumberBox extends React.Component {
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps, nextState) {
        // 判断一下当前生成的 值是否与页面的值相等
        if (nextProps.number !== this.props.number) {
            return true
        }
        return false
    }
    render() {
        return (
            <h1>随机数：{this.props.number} </h1>
        )
    }
}

純粋な成分

機能と使い方

• 純粋なコンポーネント: PureComponent は React.Component と同様の機能を持ちます。
• 違い: PureComponent は内部で shouldComponentUpdate フックを自動的に実装するため、手動による比較は必要ありません。
• 原則: 純粋なコンポーネントは内部的に、props と state の値を前後 2 回比較することによって、コンポーネントを再レンダリングするかどうかを決定します。

実施原則

• 注: 純粋なコンポーネントの内部比較は浅い比較です。
• 値の型の場合: 2 つの値が同じかどうかを比較します

• 参照型: オブジェクトの参照アドレスが同じかどうかのみを比較します

• 注: state または props の属性値が参照型の場合、新しいデータを作成する必要があり、元のデータを直接変更しないでください。

仮想 DOM と Diff アルゴリズム

• React がビューを更新するという考え方は、状態が変化するたびにビューを再レンダリングすることです。
• 特徴: 非常に明晰な思考
• 質問: コンポーネント内の DOM 要素を 1 つだけ更新する必要がある場合、コンポーネント全体のコンテンツを再レンダリングする必要がありますか? こんなんじゃない
• 理想的な状態: 部分更新、変更部分のみ更新
• React アプリケーションの中核は、Diff アルゴリズムと組み合わせた仮想 DOM です

仮想 DOM

基本的には、画面に表示したい内容を記述する JS オブジェクトです。

差分アルゴリズム

実装プロセス

• 初めてレンダリングするとき、React は初期化された状態 (モデル) に基づいて仮想 DOM オブジェクト (ツリー) を作成します。
• 仮想 DOM に基づいて実際の DOM を生成し、ページにレンダリングします。
• データが変更されると (setState())、新しいデータに基づいて新しい仮想 DOM オブジェクト (ツリー) が作成されます。
• Diff アルゴリズムを使用して、前回取得した仮想 DOM オブジェクトと比較 (差分を見つける) して、更新が必要なコンテンツを取得します。
• 最終的に、React は、変更されたコンテンツを DOM に更新 (パッチ) し、それをページに再レンダリングするだけです。

コードデモ

• コンポーネント render() が呼び出された後、状態と JSX 構造に基づいて仮想 DOM オブジェクトが生成されます (render() メソッドの呼び出しはブラウザがレンダリングすることを意味しません。render メソッドの呼び出しは Diffアルゴリズムが比較を開始します)
• この例では、p 要素のテキスト ノードの内容のみが更新されます。
• 最初にレンダリングされた DOM オブジェクト

• データ更新後の仮想DOMオブジェクト

まとめ

• 作業の観点: アプリケーションが第一、原則は二番目
• 原則は React 独自の動作メカニズムをより深く理解するのに役立ちます
• setState() はデータを非同期的に更新します
• 親コンポーネントの更新により子コンポーネントの更新が行われ、純粋なコンポーネントのパフォーマンスが向上します
• 前提として、アイデアが明確でシンプルであること、仮想 DOM と Diff によって効率が確保されること (変化するコンポーネントのレンダリング)
• 仮想 DOM -> 状態 + JSX
• 仮想 DOM の最大の特徴はブラウザの制約に縛られないことです。つまり、js がサポートされていればどこでも React を使用できるのですが、なぜ React はクロスプラットフォーム開発が可能なのでしょうか。

React ルーティングの基本

目標

• Reactルーティングの役割を伝えることができる
• -react-router-dom の基本的な使い方をマスターできる
• プログラムによるナビゲーションを使用してルートをジャンプする機能
• Reactルーティングのマッチングパターンを知ることができる

React ルーティングの概要

最新のフロントエンド アプリケーションのほとんどは SPA (シングル ページ アプリケーション) であり、HTML ページが 1 つだけあるアプリケーションです。ユーザーエクスペリエンスが向上し、サーバーへの負担が少ないため、より人気があります。単一のページを効果的に使用して複数のページの機能を管理するために、フロントエンド ルーティングが登場しました。

• フロントエンドルーティング機能: ユーザーがあるビュー (ページ) から別のビュー (ページ) に移動できるようにします。
• フロントエンド ルーティングは一連のマッピング ルールであり、React では URL パスとコンポーネント間の対応関係に相当します。
• React ルーティングを使用するということは、単にパスとコンポーネントを構成することを意味します。

ルーティングの基本的な使い方

使用手順

• インストール: 糸追加反応ルーターダム

  • Yarn ツールがインストールされていない場合は、最初に Yarn をグローバルにインストールする必要があります: npm install -g Yarn

• ルーティングの 3 つのコア コンポーネント (ルーター/ルート/リンク) をインポートします。

  import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
  

• Router コンポーネントを使用してアプリケーション全体をラップする

• Link コンポーネントをナビゲーション メニューとして使用する (ルーティング エントリ)

• Route コンポーネントを使用して、ルーティング ルールと表示されるコンポーネントを構成します (ルーティング出口)

共通コンポーネントの説明

• **ルーター コンポーネント:** アプリケーション全体をラップします。React アプリケーションは 1 回だけ使用する必要があります。
  • よく使用される 2 つのルーター: HashRouter と BrowserRouter
  • HashRouter：URLのハッシュ値（localhost:3000/#/first）を使用して実装
  • 推奨BrowserRouter：H5の履歴API実装を使用（localhost3000/first）
• **リンクコンポーネント:** ナビゲーションリンク (タグ) を指定するために使用されます。
  • 最終的に、Link はタグにコンパイルされ、to 属性はタグの href 属性にコンパイルされます。
• **ルートコンポーネント:** ルート表示コンポーネント関連情報を指定します
  • path 属性: ルーティング ルール。リンク コンポーネントの to 属性の値と一致している必要があります。
  • コンポーネント属性: 表示されるコンポーネント
  • Route が記述されている場所には、レンダリングされたコンポーネントが存在します。

ルーティング実行プロセス

• Link コンポーネントをクリックすると、ブラウザのアドレス バーの URL が変更されます。
• React ルーティングはアドレス バー URL の変更を監視します
• React ルーティングは内部的にすべての Route コンポーネントを横断し、Route 内のパス ルールとパス名を照合します。

• ルーティング ルール (パス) がアドレス バーのパス名と一致する場合、Route コンポーネントのコンテンツが表示されます。

プログラムによるナビゲーション

• **シナリオ:** ログイン ボタンをクリックします。ログインに成功したら、コードを通じてバックエンドのホームページに移動します。これを実現するにはどうすればよいですか?
• **プログラムによるナビゲーション: **JS コードによるページ ジャンプ
• 履歴は React ルーティングによって提供され、ブラウザーの履歴に関連する情報を取得するために使用されます。
• **push(path):** 特定のページにジャンプします。パラメータ path はジャンプ先のパスを示します。
• go(n): 前方または後方関数。パラメータ n は前方または後方ページの数を表します。

デフォルトルート

• 現在のルーティングは、ナビゲーション メニューをクリックすると表示されます。ページに入るときにルーティングがアクティブにトリガーされた場合はどうなりますか?
• デフォルトルート: ページに入るときに一致するルートを示します。
• デフォルトルート: パスを設定するだけです'/'

一致パターン

ファジーマッチモード

• Linkコンポーネントのto属性値が「/login」の場合、デフォルトルートも正常に一致するのはなぜですか?
• デフォルトでは、React ルーティングはあいまい一致モードです。
• あいまい一致ルール: パス名が path で始まる限り、正常に一致します。

完全に一致

• 承認されるとデフォルトルートが表示されますが、この問題を回避するにはどうすればよいですか?
• Route コンポーネントに完全一致属性を追加して、完全一致モードに変更します。
• 完全一致: パスとパス名が完全に一致する場合にのみルートが表示されます。

まとめ

• React ルーティングは複数のビューを効果的に管理して SPA を実装できます
• 最初にルーティングをインストールする必要があります
• Router コンポーネントはアプリケーション全体をラップしており、使用する必要があるのは 1 回だけです
• Link コンポーネントが入口で、Route コンポーネントが出口です。
• props.history によるプログラムによるナビゲーション
• デフォルトはあいまいマッチングです。正確なマッチングを行うには正確なプログラミングを追加してください。
• React ルーティングのすべてはコンポーネントです。ルーティングをコンポーネントのように考えることができます。