心配するのをやめて、Reactに恋をした方法

「Habrahabr」の読者に、「 Reactの心配を止めて愛することを学んだ方法」という記事の翻訳を提供します。



2か月前にReactについて考えたことを聞かれたら、私は言うでしょう...

テンプレートはどこにありますか？ JavaScriptでこのクレイジーなHTMLは何をしていますか？ JSXは奇妙に見えます！ 可能性が高い！ 燃やせ！

これは私が彼を理解していなかったからです。



しかし、Reactは間違いなく正しい方法です。 聞いてください。

古き良きMVC

対話型アプリケーションの悪の根源は状態管理です。 「従来の」アプローチは、MVCアーキテクチャまたはそのバリエーションの一部です。



MVCは、モデルが唯一の真実のソースであり、州全体がそこに住んでいると想定しています。 ビューは派生モデルであり、同期する必要があります。 モデルが変更されると、ビューも変更されます。



その結果、ユーザーとの相互作用は、モデルを更新するコントローラーによって修正されます。 これまでのところ良い。





モデルを変更するときにビューをレンダリングする



とてもシンプルに見えます。 最初に、モデルの状態をDOMに変換する方法、つまりビューを説明する必要があります。 次に、ユーザーが何かをするたびに、モデルを更新し、すべてを再レンダリングします。 そう？ それほど速くない。 残念ながら、ここですべてが順調に進んでいるわけではありません。 2つの理由：

1. 実際、DOMにはテキストフィールドの内容などの状態があります。 DOMを完全に再レンダリングすると、このコンテンツは失われます。
2. DOM操作（ノードの削除や挿入など）は本当に遅いです。 常にすべてを再レンダリングすると、ひどいパフォーマンスにつながります。

では、モデルとビューの同期をどのように保ち、これらの問題を回避するのでしょうか？

データバインディング

過去3年間で、これらの問題に対処するために導入された最も一般的なフレームワーク機能は、データバインディングです。



データバインディングは、モデルとビューの同期を自動的に維持する機能です。 通常JavaScriptでは、これらはオブジェクトとDOMです。



これは、アプリケーション内のデータの断片間の依存関係を宣言する機能によって実現されます。 状態の変更はアプリケーション全体に配布され、すべての依存関係は自動的に更新されます。



いくつかの有名なフレームワークで実際にどのように機能するかを見てみましょう。

ノックアウト

KnockautはMVVM（Model-View-ViewModel）アプローチの略で、Viewパーツの実装を支援します。

// View (a template) <p>First name: <input data-bind="value: firstName" /></p> <p>Last name: <input data-bind="value: lastName" /></p> <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 // ViewModel (diplay data... and logic?) var ViewModel = function(first, last) { this.firstName = ko.observable(first); this.lastName = ko.observable(last); this.fullName = ko.pureComputed(function() { // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. return this.firstName() + " " + this.lastName(); }, this); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして出来上がり。 入力のいずれかの値を変更すると、スパンの変更がトリガーされます。 接続するコードを書いたことはありません。 かっこいい？



しかし、モデルが唯一の真実の源であるという事実はどうですか？ ViewModelはどこから状態を取得しますか？ 彼女は、モデルが変更されたことをどのように知っていますか？ 興味深い質問。

角度

Angularは、モデルとビューの同期を維持するという観点からデータバインディングを記述します。 ドキュメントから：







しかし... ...ビューはモデルと直接通信する必要がありますか？ それらは密接に関連していますか？



とにかく、こんにちは世界を見てみましょう：

 // View (a template) <div ng-controller="HelloController as hello"> <label>Name:</label> <input type="text" ng-model="hello.firstName"> <input type="text" ng-model="hello.lastName"> <h1>Hello {{hello.fullName()}}!</h1> </div> // Controller angular.module('helloApp', []) .controller('HelloController', function() { var hello = this; hello.fullName = function() { return hello.firstName + hello.lastName; }; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例から、コントローラーには状態があり、モデルのように動作するように見えますが、ViewModelのように動作しますか？ モデルが別の場所にあると仮定すると、どのようにコントローラーと同期しますか？



頭が少し痛くなり始めました。

データバインディングの問題

データバインディングは、小さな例でうまく機能します。 ただし、アプリケーションが大きくなると、次の問題が発生する可能性があります。

依存関係を宣言すると、すぐにループにつながる可能性があります

最も一般的なタスクは、状態の変化による副作用に対処することです。 Fluxの紹介からのこの図は、依存関係の地獄がどのように忍び寄るのかを非常に明確に説明しています。







この場合、1つのモデルで1つの変更が発生すると、どのような変更が発生するかを予測できますか？ 依存関係が変更されたときに、完全に任意の順序で実行できるコードについて話すことは非常に困難です。

人為的に分離されたパターンと表示ロジック

プレゼンテーションの役割は何ですか？ ユーザーへのデータの提示。 ViewModelの役割は何ですか？ ユーザーへのデータの提示。 違いは何ですか？ なし。



最終的に、プレゼンテーションコンポーネントはそのデータを操作し、必要な形式で表示できる必要があります。 ただし、すべてのテンプレート言語は本質的に無効になっています。コードと同じ表現力とパワーを実現することはできません。



簡単に言うと、{{＃each}}、ng-repeat、databind = "foreach"はすべて、JavaScriptのネイティブで単純なforループの悪い代替品です。 そして、彼らはそれ以上進むことができません。 フィルターもマップもありません。

データバインディング-レンダリングのハック

シンプルさの聖杯は議論されていません。 誰もが常に、状態が変化したときにアプリケーション全体を再レンダリングしたいと考えていました。 したがって、時間の経過とともに状態が変化するという悪の根源への対処をやめることができます。アプリケーションが特定の状態を表していることを説明するだけです。

Facebook React Input

彼らはそれをやったことが判明。 Reactは仮想DOMを実装します。これにより、聖杯が得られます。

いずれにしても、仮想DOMとは何ですか？

聞いてくれてうれしいです！ 簡単なReactの例を見てみましょう。

 var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<Hello name="World" />, document.getElementById('container'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Reactコンポーネントに必要なものはこれだけです。 レンダリングメソッドが必要です。 難しいですか？



わかりましたが、<div>とは何ですか？ これはJavaScriptではありません！ 間違いなく彼。

あなたの新しい友人、jsx

実際、このコードはJSXで書かれています。 コンポーネントを定義するための括弧構文を含むスーパーjavascriptスイート。 上記のコードは、JavaScriptでコンパイルすると、実際には次のようになります。

 var Hello = React.createClass({displayName: "Hello", render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render(React.createElement(Hello, {name: "World"}), document.getElementById('container'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

createElement呼び出しに気づきましたか？ これらのオブジェクトは、仮想DOMの実装を構成します。



非常に簡単：Reactはまず、これらのオブジェクトを使用して、アプリケーションの構造全体をメモリに収集します。 次に、この構造を現在のDOMノードに変換し、ブラウザーDOMに挿入します。



わかりましたが、これらの奇妙なcreateElement関数を使用してHTMLを書く意味は何ですか？

仮想DOM-高速

既に説明したように、DOMの変更はとてつもなく費用がかかるため、DOMの変更はできるだけ少なくする必要があります。



ただし、Reactの仮想DOMは、2つのツリーを比較し、それらの間で何が変更されたかを正確に見つけることにより、非常に高速に処理します。 このようにして、ReactはDOMの更新に必要な変更の最小数を計算できます。



実際には、Reactは2つのDOMツリーを比較し、実行する必要がある操作の最小セットを計算できます。 これは2つのことを意味します。

1. テキストを含むテキストフィールドがレンダリングされる場合、Reactはコンテンツがあると想定し、それに触れません。 これ以上の財産の損失はありません。
2. 仮想DOMの比較はまったく高価ではないため、好きなように比較できます。 diffが実際にDOMを変更する準備ができたら、最小限の操作でこれを行います。 遅いレイアウトはもうありません。

状態を変更するときにアプリケーション全体を再レンダリングすることに関する2つの問題を覚えていますか？



過ぎました。

DOMのReact Mapit状態

仮想DOMのレンダリングと比較は、Reactの唯一の魔法の部分です。 その優れたパフォーマンスにより、よりシンプルなアーキテクチャを実現できます。 どのくらい簡単ですか？

Reactコンポーネントはべき等関数です。 いつでもUIを説明します。 サーバーでレンダリングされたアプリケーションのように。

Pete Hunt、 React：ベストプラクティスの再考



これが、Reactコンポーネントが本当にあるべきことです。 DOMのアプリケーションの現在の状態を表示します。 ループ、関数、スコープ、構成、本格的なテンプレート言語など、ユーザーインターフェイスを記述するJavaScriptのすべての機能を備えています。

 var CommentList = React.createClass({ render: function() { var commentNodes = this.props.data.map(function (comment) { return ( <Comment author={comment.author}> {comment.text} </Comment> ); }); return ( <div className="commentList"> {commentNodes} </div> ); } }); var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> <h1>Comments</h1> <CommentList data={this.props.data} /> </div> ); } }); React.render( <CommentBox data={data} />, document.getElementById('content') );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今すぐReactを使い始めましょう。

一見、Reactは少し複雑に見えるかもしれません。 非常に大きなパラダイムを提供しますが、常に便利ではありません。 ただし、使用を開始すると、利点が明らかになります。



Reactのドキュメントは優れています。 あなたはそれを試して、チュートリアルに従うべきです。 Reactにチャンスを与えれば、きっときっとReactが好きになるでしょう。



良いコーディング。



元の記事： 心配を止めてReactを愛する方法

投稿者ギルヘルム・ロドリゲス