深入了解JavaScript的React框架原理

如果两个月前你问我React，我会这样说：

我的模板在哪里？javascript中的HTML在做什么疯狂的事情？JSX开车很奇怪！向它开火并摧毁它！那是因为我不懂。

我发誓，React绝对是在正确的轨道上。请听我说。

好老MVC

交互式应用程序中所有邪恶的根源是管理状态。“传统”的方式是MVC架构，或者一些变体。

MVC提出你的模型是测试真理的唯一来源——所有的状态都生活在那里。视图是从模型派生的，必须同步。当模式改变时，就没有视图了。

最后，控制器捕获用户交互，从而更新模型。到目前为止，一切都很好。

模型更改时渲染视图

看起来很简单。首先，我们需要描述视图——如何将模型状态转换为DOM。然后，一旦用户做了什么，我们将更新模型并重新渲染整个页面.正确没那么快。不幸的是，它实际上没有那么直接，因为以下两个原因。

DOM实际上有一定的状态，比如文本输入框中的内容。如果您完全使您的DOM无效以便重新呈现，这样的内容将会丢失。DOM操作(比如删除和插入节点)真的很慢。频繁渲染会导致严重的性能问题。如果我们在避免这些问题的同时保持模型和视图同步呢？数据绑定

在过去的三年中，为解决这个问题而引入的最常用的多帧功能是数据绑定。

数据绑定可以自动保持模型和视图之间的同步，视图通常用JavaScript表示对象和DOM。

它通过允许您声明应用程序中块之间的依赖关系来打包这种同步。状态更改将在整个应用程序中传播，然后所有相关块将自动更新。

让我们看看它在一些著名的框架中是如何工作的。

迷人的

淘汰赛提倡使用MVVM(模型-视图-视图模型)的方法，并帮助你实现“视图”部分：

//查看(一个模板)pFirst name:输入数据-绑定=' value : first name '/p pLast name :输入数据-绑定=' value : last name '/p H2 hello，span数据-绑定='text: fullName' /span！/h2//ViewModel(显示数据.逻辑呢？)var ViewModel=function(first，last){ this . first name=ko . observatory(first)；this . last name=ko . observatory(last)；this . full name=ko . purecouted(function(){//淘汰赛自动跟踪依赖关系。它知道全名依赖于名字和姓氏，因为在评估全名时会调用它们。返回this . first name()“”this . last name()；}，这个)；};就这样。不管改变那边的输入值，都会改变跨度。您永远不需要编写代码来绑定它。这有多酷啊？

但是等等，模型不是真相的来源吗？这里的视图模型永远得不到它的状态？它怎么知道模式变了？有趣的问题。

有角的

Angular以保持模型和视图同步的方式描述数据绑定。如文档中所述

但是.视图应该直接处理模型吗？这么说他们很快就紧密结合了？

不管怎样，让我们自愿看看hello world的例子。

//视图(一个模板)div ng-controller=' hello controller as hello ' labelname :/label输入类型=' text ' ng-model=' hello . first name '输入类型=' text ' ng-model=' hello . last name ' h1 hello { { hello . full name()} }！/h1/div//Controller angular . module(' helloApp '，[])。控制器(' HelloController '，function(){ var hello=this；hello . full name=function(){ return hello . first name hello . last name；};});从这个例子来看，控制器似乎有一个状态，并且表现得像一个模型——或者可能是一个视图模型？假设模型在别的地方，它如何与控制器保持同步？

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

数据绑定在一个小例子中运行良好。但是，随着您的应用规模变大，您可能会遇到以下问题。

声明的依赖关系将很快被引入循环

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

你能预测当一个模型改变时会发生什么吗？当依赖关系改变时，对于可以以任何顺序执行的代码，您很难推理出问题的原因。模板和呈现逻辑被人工分离

视图扮演什么角色？它扮演着向用户展示数据的角色。视图模型扮演什么角色？还起到向用户展示数据的作用？有什么区别？一点也不！

毫无疑问，模板拆分了计数~ Pete Hunt最后，视图组件应该能够操作其数据并以所需的格式显示。那么，所有的模板语言都有内在的缺陷：它们永远不会达到和代码一样的表现力和功能。

很简单，{{#每个}}、ng-repeat和databind='foreach '是JavaScript中一些本机和琐碎事务的笨拙替代品。他们不会再往前走了。所以他们不会为您提供过滤器或映射。

数据绑定是应该重新呈现的技巧

圣杯是什么不再在我们的讨论中。每个人总是希望在状态改变时重新呈现整个应用程序。这样，我们就不必处理所有麻烦问题的根源：状态总是随着时间而变化。给定任何特定的状态，我们都可以简单地描述应用程序是什么样子的。

好吧，问题很明显。哥们，希望一些大公司能组建一个超级有才的开发团队，真正解决这个问题.拥抱脸书的反应

原来是他们干的。React实现了一个虚拟的DOM，一个给我们带来圣杯的利器。什么是虚拟DOM？

我很高兴你能问？让我们看一个简单的React示例。

var Hello=react . create class({ render : function(){ return div Hello { this . props . name }/div；}});react . render(Hello name=' World '/document . getelementbyid('容器'))；这就是React组件的所有API。你必须有一个渲染方法。很复杂，是吧？

好的，但是div是什么意思？那不是JavaScript！对了，不是。

你的新搭档，JSX

这段代码实际上是在JSX编写的，它是JavaScript的超集，包含定义组件的语法。上面的代码将被编译成JavaScript，所以实际上会变成：

var Hello=react . createclass({ display name : ' 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太贵了，所以必须在尽可能短的时间内完成。

React的虚拟DOM让两个DOM结构之间的比较真的变得更快了，并且可以准确地找出它们之间发生了什么变化。这样，React可以计算更新DOM所需的最小更改。

老实说，React可以比较两个DOM树，找出它需要执行的最小操作集。这有两层意思：

如果带有文本的输入框被重新渲染，React将知道它有什么，并且它不会触摸该输入框。没有状态会丢失！比较虚拟DOM一点也不贵，所以我们可以随心所欲地进行比较。当它准备好实际修改DOM时，它将只做最少的操作。没有减缓布局的额外危险！状态改变时重新渲染整个app的这两个问题我们一定要记住吗？

都过去了。

将状态映射到DOM

只有虚拟DOM的渲染和比较才是React中神奇的部分。它出色的性能是我们拥有简化排列架构的基础。有多简单？

React组件都是幂等函数(幂等运算的特点是任何多次执行的影响与一次执行的影响相同)。他们可以在任何实时点描述你的用户界面。~皮特亨特，反应：反思最佳实践

简单幂等函数。

整个React组件就是这么一回事，真的。它将当前应用程序状态映射到DOM。而且你还拥有JavaScript的所有能力来描述你的UI——循环、函数、范围、组合和模块——而不是一个蹩脚的模板语言。

var Comment list=react . create class({ render : function(){ var Comment nodes=this . props . data . map(function(Comment)){ return(Comment author={ Comment . author } { Comment . text }/Comment)；});return (div类名=' comment list ' { comment nodes }/div)；}});var comment box=react . create class({ render : function(){ return(div class name=' comment box ' h1 comments/h1 comment list data={ this . props . data }//div)；}});react . render(CommentBox data={ data }/，document . getelementbyid(' content '))；立即开始使用React

一开始反应可能有点令人生畏。它提出了一个太大的范式转变，总是有点让人不舒服。然而，当你开始使用它时，它的优势就会变得明显。

React文档非常出色。你应该根据教程来试试。我相信如果你给它一个机会，你一定会爱上她的。

快乐编码！