Compréhension approfondie des principes du framework React de JavaScript

Si vous m'aviez demandé ce que je pensais de React il y a deux mois, j'aurais probablement répondu ceci :

Où sont mes modèles ? Quelles sont les choses folles que fait le HTML en javascript ? Tirez dessus et tuez-le !

C’est parce que je n’ai pas compris

Je le jure, React est définitivement sur la bonne voie, écoutez-moi s'il vous plaît.

Bon vieux MVC

La racine de tous les maux dans une application interactive est l'état géré.

La méthode "traditionnelle" est l'architecture MVC, ou une variante.

MVC présente votre modèle comme la source unique de vérité - tout l'État y vit.

Les vues sont dérivées du modèle et doivent être synchronisées.
Lorsque le mode change, il n'y a donc aucune vue.

Enfin, l'interaction de l'utilisateur est capturée par le contrôleur, qui met à jour le modèle.

Jusqu'ici, tout va bien.

201572112250707.png (500×550)

Lorsque le modèle change, la vue doit être rendue

Cela semble assez simple. Tout d’abord, nous devons décrire la vue – comment elle transfère l’état du modèle au DOM. Ensuite, dès que l'utilisateur effectue une opération, nous devons mettre à jour le modèle et restituer la page entière... n'est-ce pas ? Malheureusement, ce n'est pas si simple, à cause des deux raisons suivantes :

Le DOM a en fait une sorte d'état, comme le contenu d'une zone de saisie de texte. Si vous invalidez complètement votre DOM et effectuez un nouveau rendu, ce contenu sera perdu

Les opérations DOM (comme la suppression et l'insertion de nœuds) sont très lentes. Un rendu fréquent peut entraîner de graves problèmes de performances.

Liaison de données

Au cours des trois dernières années, la fonctionnalité multi-framework la plus couramment utilisée pour résoudre ce problème est la liaison de données.

La liaison de données maintient automatiquement le modèle et la vue synchronisés. Généralement représentée en JavaScript par les objets et le DOM.

Il regroupe cette synchronisation en vous permettant de déclarer des dépendances entre différents morceaux de votre application. Les changements d'état se propagent dans toute l'application et tous les blocs dépendants sont automatiquement mis à jour

Jetons un coup d'œil à comment cela fonctionne réellement dans certains frameworks célèbres.

Knockout

Knockout préconise l'utilisation de la méthode MVVM (Model-View-ViewModel) et vous aide à implémenter la partie "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&#63;)
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);
};

Copier après la connexion

Et c'est tout. Indépendamment de la modification de la valeur d'entrée, la durée change. Vous n'avez jamais besoin d'écrire du code pour le lier. C'est pas cool, hein ?

Mais attendez, le modèle n'est-il pas la source de vérité ? Le modèle de vue ici n'obtient-il jamais son état ? Comment sait-il que le modèle a changé.

Angulaire

Angular décrit la liaison de données de manière à maintenir la synchronisation du modèle et de la vue. La documentation la décrit comme ceci :

201572112357063.png (400×290) Mais... la vue devrait-elle communiquer directement avec le modèle ? Seront-ils bientôt étroitement couplés ?

Quoi qu'il en soit, jetons un coup d'œil à l'exemple de Hello World :

从这个示例中，看起来像是控制器有了状态，并且有类似模型的行为 - 或者也许是一个视图模型? 假设模型在其它的地方, 那它是如何保持与控制器的同步的呢?

我的头开始有点儿疼了.
数据绑定的问题

数据绑定在小的例子中运行起来很不错。不过，随着你的应用规模变大，你可能会遇到下面这些问题.

声明的依赖会很快引入循环

最经常要处理的问题就是对付状态中变化的副作用。这张图来自 Flux 介绍，它解释了依赖是如何开始挖坑的：

201572112422504.png (1587×900)

你能预计到当一个模型发生变化时跟着会发生什么改变么? 当依赖发生变化时，对于可以任意次序执行的代码你很难推理出问题的起因。
模板和展示逻辑被人为的分离

视图扮演了什么角色呢? 它扮演的就是向用户展示数据的角色。视图模型扮演的角色又是什么呢? 它扮演的也是向用户展示数据的角色？有啥不同？完全没有！

毫无疑问，模板割裂了计数 ~ Pete Hunt

最后，视图组件应该能操作其数据并以需要的格式对数据进行展示。然后，所有的模板语言本质上都是有缺陷的：它们从来都不能达到跟代码一样的表现力和功能。

很简单， {{# each}}, ng-repeat 和 databind="foreach" 这些都是针对 JavaScript 中某些原生和琐碎事务的拙劣替代物。而它们不会更进一步走得更远。因此它们不会为你提供过滤器或者映射。

数据绑定是应重新渲染而生的小技巧

什么是圣杯不再我们的讨论之列。每个人总是想要得到的是，当状态发生变化时能重新对整个应用进行渲染。这样，我们就不用去处理所有麻烦问题的根源了：状态总是会随着时间发生变化——给定任何特定的状态，我们就可以简单的描述出应用回是什么样子的。

好了，问题清楚了。哥们，我希望某些大公司能组个超能天才开发者团来真正解决这个问题...
拥抱Facebook的React

事实证明他们做到了。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'));

Copier après la connexion

这就是一个React组件的所有API。你必须要有一个渲染方法。复杂吧，呵呵?

OK, 但是

是什么意思? 那不是 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'));

Copier après la connexion

你明白这段对 createElement 调用的代码么? 这些对象组成了虚拟 DOM 的实现。

很简单 : React 首先在内存中对应用的整个结构进行了组装。然后它会把这个结构装换成实际的 DOM 节点并将其插入浏览器的 DOM 中。

OK，但是用这些奇怪的 createElement 函数编写 HTML 的目的是什么呢？

虚拟的DOM就是快

我们已经讨论过, 操作 DOM 消耗大得离谱，因此它必须以尽可能少的时间完成。

React 的虚拟 DOM 使得两棵 DOM 结构的比对真正快起来，并且能确切的找到它们之间有什么变化. 如此，React 就能计算出更新 DOM 所需要做出的最小变更。

实话说，React 能比对两棵 DOM 树，找出它所要执行的最小操作集。这有两个意义:

如果一个带有文本的输入框被重新渲染，React 会知道它有的内容, 它不会碰那个碰那个输入框。不会有状态发生丢失的!
比对虚拟 DOM 开销一点也不昂贵，因此我们想怎么比对都可以。当其准备好要对 DOM 进行实际的修改时，它只会进行最少量的操作。没有额外的拖慢布局之虞!

那我们还要在状态发生变化时记住这两个对整个 app 进行重新渲染的问题么?

这都是过去式了。

React 将状态映射到 DOM

React 中只有虚拟 DOM 的渲染和比对是神奇的部分。其优秀性能是使得我们拥有简化了许多的整理架构的基础。有多简单呢?

React 组件都是幂等（一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同）的函数。它们能在任意一个实时的点来描述你的UI。~ Pete Hunt, React: 对最佳实践的重新思考

简单的幂等函数。

React 组件整个就是这么一个东西，真的。它将当前的应用状态映射到了 DOM。并且你也拥有JavaScript的全部能力去描述你的 UI——循环，函数，作用域，组合，模块 - 不是一个蹩脚的模板语言哦.

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')
);

Copier après la connexion

今天就开始使用 React

React 一开始会有点令人生畏。它提出了一个实在是太大了点的模式转变，这总有点令人不舒服。不过，当你开始使用它时其优势会变得清楚起来。

React 文档很优秀. 你应该照着教程对其进行一下尝试。我确信如果你给它一个机会，你肯定会爱上她。

编码快乐!

Étiquettes associées：

javascript react

source：php.cn

Article précédent：JavaScript génère des lettres majuscules et minuscules_javascript astuces Article suivant：Comment obtenir toutes les données d'une ligne de TD dans le tableau après que JS ait sélectionné les compétences checkbox_javascript

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur