反応はどのように機能しますか? React の動作原理の詳細な紹介

この記事では主に React の動作原理について説明します。内容には動作原理の具体的なプロセスが含まれています。それでは、この記事を一緒に読んでみましょう

現在最も人気のあるフロントエンド フレームワークには、AngularJS、React、Bootstrap などが含まれます。私は ReactJS に触れて以来、ReactJ の仮想 DOM (Virtual DOM) とコンポーネントベースの開発に深く惹かれてきました。ReactJ のスタイルを一緒に体験しましょう~~ この記事は少し長いので、辛抱強く読んでください。素晴らしい理解がありました 大収穫〜

1. ReactJS の紹介

React は Facebook の内部プロジェクトから生まれました。そのため、同社は市場にあるすべての JavaScript MVC フレームワークに満足できなかったため、Instagram を構築するために独自のフレームワークを作成することにしました。 Webサイト。作ってみてこのセットがとても便利だったので、2013年5月にオープンソース化しました。 React の設計思想は非常にユニークであるため、革新的であり、優れたパフォーマンスを持ち、コード ロジックは非常にシンプルです。そのため、将来の Web 開発の主流のツールになるのではないかと考え、注目し、使用する人が増えています。

2. ReactJS の理解と ReactJS の利点

まず、React についていくつかの誤解がありますが、ここでそれらを要約しましょう:

• React は完全な MVC フレームワークではないと考えることができます。 MVC はせいぜい V (ビュー) であり、React ですら MVC 開発モデルをあまり認識していません。実際、React のサーバー側の Render 機能は、その中核的な出発点ではありません。 React の公式 Web サイトではほとんど言及されていません サーバーサイド アプリケーション

• React を Web コンポーネントと比較する人もいますが、この 2 つは React を使用して実際の Web コンポーネントを開発することができます

• 。新しいテンプレート言語ではありません。JSX は単なる表現であり、React は JSX がなくても動作します。

• 1. ReactJSの背景と原理

Web開発では常に変化するデータをリアルタイムにUIに反映させ、DOMを操作する必要があります。複雑な DOM 操作や頻繁な DOM 操作は、通常、パフォーマンスのボトルネックの原因となります (高パフォーマンスの複雑な DOM 操作をどのように実行するかは、通常、フロントエンド開発者のスキルを示す重要な指標です)。 React は、この目的のために仮想 DOM (Virtual DOM) メカニズムを導入しています。一連の DOM API は、JavaScript を使用してブラウザ側に実装されます。 React に基づいて開発する場合、データが変更されるたびに、React は DOM ツリー全体を再構築して、DOM 構造の差異を取得します。その後、変更が必要な部分のみが実際のブラウザ DOM で更新されます。 React は、イベント ループ (イベント) で仮想 DOM をバッチ更新できます。 たとえば、ノードの内容を A から B に変更し、次に B から A に変更すると、React は UI が変更されていないとみなします。 、このロジックは通常、非常に複雑です。毎回完全な仮想DOMツリーを構築する必要があるが、仮想DOMはメモリデータであるためパフォーマンスが非常に高く、実DOM上ではDiff部分のみを操作することでパフォーマンスが向上する。このようにして、パフォーマンスを確保しながら、開発者は、特定のデータ変更が 1 つ以上の特定の DOM 要素にどのように更新されるかに注意を払う必要がなくなり、インターフェイス全体が任意のデータ状態でどのようにレンダリングされるかのみを気にする必要があります。

1990 年代のようにサーバー側レンダリングを使用して純粋な Web ページを作成したことがある場合は、サーバー側で行う必要があるのは、データに基づいて HTML をレンダリングし、ブラウザーに送信することだけであることを知っておく必要があります。ユーザーのクリックにより特定のステータス テキストを変更する必要がある場合は、ページ全体を更新することによっても変更できます。サーバーは、HTML のどの小さな部分が変更されたかを知る必要はなく、データに基づいてページ全体を更新するだけで済みます。つまり、UI の変更は全体の更新によって行われます。 React は、この開発モデルを高パフォーマンスの方法でフロントエンドにもたらします。インターフェイスを更新するたびに、ページ全体が更新されたように思えます。パフォーマンスを確保するために部分的な更新を実行する方法については、React フレームワークが行う必要があります。

React を紹介する Facebook のビデオのチャット アプリケーションの例を使用すると、新しいメッセージが来たとき、開発プロセスは上に示したように、どのデータが来たのか、そして新しい DOM を追加する方法を知る必要があります。ノードを現在の DOM ツリー上に置き、React に基づいた開発アイ​​デアは次のようになります。2 つのデータ間で UI がどのように変化するかは完全にフレームワークに任せられます。 React を使用するとロジックの複雑さが大幅に軽減され、開発の難易度が下がり、バグが発生する機会が少なくなることがわかります。

2. コンポーネント化

仮想 DOM (virtual-dom) は、単純な UI 開発ロジックをもたらすだけでなく、いわゆるコンポーネントは、独立した機能を備えたカプセル化された UI コンポーネントです。 Reactでは、コンポーネントという形でUIの構成を見直し、UI上で比較的独立した機能を持つ各モジュールをコンポーネントとして定義し、小さなコンポーネントを組み合わせたりネストしたりして大きなコンポーネントを形成し、最終的にUI全体の構築を完了することを推奨しています。たとえば、Facebook の instagram.com サイト全体は React を使用して開発されており、ページ全体が 1 つの大きなコンポーネントであり、そのコンポーネントには他のネストされたコンポーネントが多数含まれています。興味がある場合は、その背後にあるコードを確認してください。

MVC の考え方でビューデータコントローラーを分離できるとすれば、コンポーネント化された考え方は UI 機能モジュール間の分離をもたらします。典型的なブログのコメント インターフェイスを通じて、MVC とコンポーネントベースの開発アイデアの違いを見てみましょう。

MVC 開発モデルの場合、開発者は 3 つを異なるクラスに定義して、パフォーマンス、データ、制御の分離を実現します。開発者は疎結合を実現するために、技術的な観点から UI をさらに分割します。

React では、機能の観点から見ると、開発者は UI をさまざまなコンポーネントに分割し、各コンポーネントは個別にパッケージ化されています。

React では、インターフェイス モジュールの自然な分割に従ってコードを編成し、記述します。コメント インターフェイスの場合、UI 全体は、独立したロジックの独自の部分のみを考慮します。お互いの。

React は、コンポーネントには次の特性が必要であると考えています:

(1) コンポーザブル: コンポーネントは、他のコンポーネントと一緒に使用したり、別のコンポーネント内にネストしたりするのが簡単です。コンポーネントが内部に別のコンポーネントを作成する場合、親コンポーネントはそのコンポーネントが作成した子コンポーネントを所有します。この機能により、複雑な UI を複数の単純な UI コンポーネントに分割できます。 (2) 再利用可能 (再利用可能): 各コンポーネントは独立した機能を持ちます。 、複数の UI シナリオで使用できます

(3) 保守可能 (保守可能): それぞれの小さなコンポーネントには独自のロジックのみが含まれているため、理解と保守が容易です

2. ReactJS をダウンロードし、Hello, world を記述します。

ReactJs のダウンロードは非常に簡単です。皆さんのダウンロードを容易にするために、ダウンロード アドレスは http://facebook.github.io/react/downloads.html に示されています。ダウンロードが完了すると、圧縮されたものが表示されます。パッケージ。解凍後、新しい html ファイルを作成し、2 つの js ファイル (react.js と JSXTransformer.js) を参照します。 HTML テンプレートは次のとおりです (js パスを独自のものに変更します):

nbsp;html>
  
    <script></script>
    <script></script>
  
  
    <p></p>
    <script>
      // ** Our code goes here! **
    </script>
  

ここで、スクリプトの種類が text/jsx であることに疑問に思うかもしれません。これは、React の独自の JSX 構文が JavaScript と互換性がないためです。 JSX が使用される場合は常に、type="text/jsx" を追加する必要があります。 次に、React には、react.js と JSXTransformer.js という 2 つのライブラリが用意されており、最初にロードする必要があります。このうち、JSXTransformer.js は、JSX 構文を JavaScript に変換するために使用されます。 文法。この手順は時間がかかり、実際にオンラインになっている場合はサーバー上で完了する必要があります。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manual 列にアクセスして学習してください)

ここでコードの作成を開始できます。まず、ReactJs の React.render メソッドについて理解しましょう。 React .render は React の最も基本的なメソッドであり、テンプレートを HTML 言語に変換し、指定された DOM ノードを挿入するために使用されます。

次に、Hello と world を出力するコードを書きます。コードは次のとおりです。

React.render(        <h1>Hello, world!</h1>,
        document.getElementById('container')
      );

ここで、react は jQuery に依存していないことに注意してください。ただし、レンダリングでは 2 番目のパラメーターは JavaScript のネイティブ getElementByID メソッドを使用する必要があり、DOM ノードの選択に jQuery を使用することはできません。

次に、ブラウザでこのページを開くと、

タグを使用しているため、ブラウザに大きな Hello, world が表示されることがわかります。

おめでとうございます、ReactJS の扉に入りました~~それでは、ReactJ についてもっと学びましょう~~

3. Jsx 構文

HTML 言語は引用符なしで JavaScript 言語で直接書かれており、これが構文ですAngularJs を知っている場合は、次のコードを見てみましょう:

var names = ['Jack', 'Tom', 'Alice'];

      React.render(        <p>
        {
          names.map(function (name) {            return </p><p>Hello, {name}!</p>          })
        }        ,
        document.getElementById('container')
      );这里我们声明了一个names数组，然后遍历在前面加上Hello,输出到DOM中，输出结果如下：

JSX を使用すると、JavaScript を直接挿入できます。テンプレート変数に代入します。この変数が配列の場合、配列のすべてのメンバーが展開されます。コードは次のとおりです。

var arr = [        <h1>Hello world!</h1>,
        <h2>React is perfect!</h2>,      ];
      React.render(        <p>*{arr}*</p>,
        document.getElementById('container')
      );

表示される結果は次のとおりです。

ここでのアスタリスクは識別用です。混同しないでください。これを見たら、React にかなり興味があるということです。おめでとうございます。さあ、React の「本当のスキル」を学び始めましょう~~ 準備はできていますか?

 四、ReactJS组件

1、组件属性 

　　前面说了，ReactJS是基于组件化的开发，下面我们开始来学习ReactJS里面的组件，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。

下面，我们来编写第一个组件Greet，有一个name属性，然后输出hello + name的值，代码如下：

var Greet = React.createClass({
        render: function() {          return <h1>Hello {this.props.name}</h1>;        }
      });

      React.render(        <greet></greet>,
        document.getElementById('container')
      );

看到这段代码，接触过AngularJS的朋友们是不是有一种熟悉的感觉，不过这里有几点需要注意：

　　1、获取属性的值用的是this.props.属性名

　　2、创建的组件名称首字母必须大写。

　　3、为元素添加css的class时，要用className.

　　4、组件的style属性的设置方式也值得注意，要写成style={{width: this.state.witdh}}

2、组件状态

　　组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI 。下面我们来编写一个小例子，一个文本框和一个button，通过点击button可以改变文本框的编辑状态，禁止编辑和允许编辑。通过这个例子来理解ReactJS的状态机制。先看代码：

var InputState = React.createClass({
        getInitialState: function() {          return {enable: false};
        },
        handleClick: function(event) {          this.setState({enable: !this.state.enable});
        },
        render: function() {          
          return (            <p>
               <input>
               <button>Change State</button>
            </p>          );
        }
      });

      React.render(        <inputstate></inputstate>,
        document.getElementById('container')
      );

这里，我们又使用到了一个方法getInitialState,这个函数在组件初始化的时候执行，必需返回NULL或者一个对象。这里我们可以通过this.state.属性名来访问属性值，这里我们将enable这个值跟input的disabled绑定，当要修改这个属性值时，要使用setState方法。我们声明handleClick方法，来绑定到button上面，实现改变state.enable的值.效果如下：

原理分析：

 　　当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

这里值得注意的几点如下：

　　1、getInitialState函数必须有返回值，可以是NULL或者一个对象。

　　2、访问state的方法是this.state.属性名。

　　3、变量用{}包裹，不需要再加双引号。

3、组件的生命周期　　

组件的生命周期分成三个状态：

• Mounting：已插入真实 DOM

• Updating：正在被重新渲染

• Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()

• componentDidMount()

• componentWillUpdate(object nextProps, object nextState)

• componentDidUpdate(object prevProps, object prevState)

• componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

下面来看一个例子：

 var Hello = React.createClass({
        getInitialState: function () {          return {
            opacity: 1.0
          };
        },

        componentDidMount: function () {          this.timer = setInterval(function () {            var opacity = this.state.opacity;
            opacity -= .05;            if (opacity 
              Hello {this.props.name}                      );
        }
      });

      React.render(        <hello></hello>,        document.body
      );

上面代码在hello组件加载以后，通过 componentDidMount 方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。

4、组件的嵌套

　　React是基于组件化的开发，那么组件化开发最大的优点是什么？毫无疑问，当然是复用，下面我们来看看React中到底是如何实现组件的复用的，这里我们还写一个例子来说吧，代码如下：

var Search = React.createClass({
        render: function() {          return (            <p>
               {this.props.searchType}:<input>
               <button>Search</button>
            </p>          );
        }
      });      var Page = React.createClass({
        render: function() {          return (            <p>
               </p><h1>Welcome!</h1>
               <search></search>
               <search></search>
                      );
        }
      });
      React.render(        <page></page>,
        document.getElementById('container')
      );

这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属性searchType传入值，最终显示结果如图：

 五、ReactJs小结

关于ReactJS今天就先学习到这里了，下面来总结一下，主要有以下几点：

　　1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

　　2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

　　3、为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。

　　4、组件名称首字母必须大写。

　　5、变量名用{}包裹，且不能加双引号。

 六、ReactJS优缺点

优点：

Reactは速い

他のフレームワークと比べて、ReactはDOMの操作に独特の方法を採用しています。
DOM に対して直接操作しません。
これは、JavaScript ロジックと実際の DOM の間に挿入される仮想 DOM と呼ばれる概念を導入します。
このコンセプトにより、Web パフォーマンスが向上します。 UI レンダリング プロセス中に、React は仮想 DOM でのマイクロ操作を通じて実際の DOM へのローカル更新を実装します。

ブラウザ間の互換性
仮想 DOM は、ブラウザ間の問題を解決するのに役立ちます。標準化された API を提供します。IE8 でも問題はありません。

モジュール性
プログラム用に独立したモジュール式 UI コンポーネントを作成します。これにより、1 つまたはいくつかのコンポーネントに問題が発生した場合に、それを簡単に分離できます。
各コンポーネントは独立して開発およびテストでき、他のコンポーネントを導入することもできます。これはコードの保守性の向上に相当します。
一方向のデータ フローにより物事が明確になります
Flux は、JavaScript アプリケーションで一方向のデータ レイヤーを作成するためのアーキテクチャであり、React ビュー ライブラリの開発とともに Facebook によって概念化されました。これは単なる概念であり、特定のツールの実装ではありません。他のフレームワークに吸収される可能性があります。たとえば、アレックス Rattray には、Backbone のコレクションと React のモデルを使用する優れた Flux インスタンスがあります。
純粋な JavaScript
最新の Web アプリケーションは、従来の Web アプリケーションとは動作が異なります。
たとえば、ビューレイヤーの更新には、サーバーにリクエストせずにユーザーの操作が必要です。したがって、ビューとコントローラーは相互に非常に依存しています。
多くのフレームワークは、Handlebars や Mustache などのテンプレート エンジンを使用してビュー レイヤーを処理します。しかし、React は、サードパーティのテンプレート エンジンを使用するのではなく、ビューとコントローラーが相互に依存する必要があると考えており、最も重要なことは、React が純粋な JavaScript プログラムであることです。
同型 JavaScript

シングルページ JS アプリケーションの最大の欠点は、検索エンジンのインデックス作成に大きな制限があることです。 React にはこれに対する解決策があります。
React はサーバー上でアプリケーションを事前レンダリングしてからクライアントに送信できます。事前にレンダリングされた静的コンテンツから同じレコードを動的アプリケーションに復元できます。
検索エンジン クローラーは JavaScript の実行ではなくサーバー側の応答に依存しているため、アプリケーションのプリレンダリングは SEO に役立ちます。
React は他のフレームワーク/ライブラリとの互換性が優れています
たとえば、RequireJS は読み込みとパッケージ化に使用され、Browserify と Webpack は大規模なアプリケーションの構築に適しています。これらの困難なタスクをそれほど困難にしないでください。

デメリット?

React 自体は単なる V なので、大規模なプロジェクト用の完全なフレームワークが必要な場合は、Flux やルーティングに関連するものも導入する必要があるかもしれません。

ほとんどの落とし穴はまだ解決されていません

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact ユーザーマニュアル のコラムにアクセスして学習してください)。ご質問がございましたら、以下に質問を残してください。

以上が反応はどのように機能しますか? React の動作原理の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。