数码资讯
深入理解Javaｓｃｒｉｐｔ反应框架的原则
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
如果你问我两个月前的反应，我可能会说。
我的模板是HTML中的Javaｓｃｒｉｐｔ做一些疯狂的事，JSX很奇怪！开枪杀了它！
那是因为我不明白。
我发誓，反应在正确的轨道上，请听我说。
OD老MVC
交互式应用程序中所有邪恶的根源是管理状态。
传统的方式是MVC架构，或者一些变体。
MVC表明你的模型是唯一的真理来源——所有的国家都住在那里。
视图来自模型，必须保持同步。
当模式改变时，没有视图。
最后，用户交互被控制器捕获，该控制器更新模型。
到目前为止，一切都很好。
当模型改变时呈现视图。
看起来很简单，首先，我们需要描述视图-它如何将模型状态转换成DOM，然后我们将更新模型并重新播放整个页面。更重要的是，它不是那么快。不幸的是，它不是那么直接，因为有两个原因：
DOM实际上有一个特定的状态，比如文本输入框中的内容。如果您完全取消DOM以再次呈现，则将丢失此类内容。
DOM操作（如删除和插入节点）速度非常慢。频繁的渲染会导致严重的性能问题。
如果我们避免这些问题，我们保持模型和视图同步。
数据绑定
在过去的三年中，最常用的多框架功能用来解决这个问题的是数据绑定。
数据绑定可以自动保持模型和视图的同步。通常，对象和DOM。用Javaｓｃｒｉｐｔ表示
它将通过允许在应用程序中的各个块之间声明依赖性来包装同步。状态的变化将在应用程序中传播，并且所有依赖项都将自动更新。
让我们看看它在一些著名的框架中是如何工作的。
基因敲除
敲除提倡使用MVVM（模型视图的视图模型）的方法，帮助你实现视图的一部分：
视图（模板）
第一名：
最后的名字：
你好,!
/ /视图（显示数据和逻辑…）
VaR模型=功能（第一，最后）{
this.firstname = ko.observable（第一）；
this.lastname = ko.observable（上）；
this.fullname = ko.purecomputed（函数（）{（）
击倒轨道自动依赖。它知道 /，这取决于FirstName和LastName，因为这些被评估时，这。
返回this.firstname（）++ this.lastname（）；
}，这个）；
}；
情况就是这样。这里的输入值在跨度上都是变化的，你从来不需要编写代码来绑定它。
但是等等，模型不是真理的来源吗视图模型得到它的状态吗它怎么知道模型已经改变了有趣的问题。
角
角描述以保持模型和视图同步的方式进行数据绑定。
但…视图应该直接处理模型，使它们很快成为紧密耦合的吗
不管怎样，让我们有义务来看看Hello World的例子。
视图（模板）
名称：
你好（{ } } {你好。全名）！
控制器
Angular.module（'helloapp，{ }）
控制器（'hellocontroller，函数（）{（）{
var =这个；
hello.fullname =函数（）{
返回hello.firstname + hello.lastname；
}；
}）；
从这个例子中，它看起来像控制器有状态，并且有类似于模型的行为——或者假设一个视图模型假设模型在其他地方，那么它是如何保持与控制器的同步的呢
我的头开始有点痛。
数据绑定问题
数据绑定在小示例中效果很好，但是随着应用程序的规模变大，您可能会遇到以下问题。
声明的依赖性很快将被引入循环中。
要处理的最常见的问题是处理状态变化的副作用。
您可以预测当模型发生变化时会发生什么变化。当依赖性发生变化时，很难推断出任何可以以任意顺序执行的代码的问题的原因。
模板和显示逻辑被人为地分离。
这个观点扮演什么角色它扮演着向用户显示数据的角色，视图模型扮演什么角色，它扮演向用户显示数据的角色有差别吗不!
毫无疑问，模板已经将计数Pete Hunt
最后，视图组件应该能够运行它的数据并以其需要的格式显示数据。
很简单，{一} } { #，NG的重复和DataBind =foreach这些在一些初级和常规替代Javaｓｃｒｉｐｔ是坏的，他们没有走的更远。所以他们不给你提供过滤器或映射。
数据绑定是一种应该再次呈现的小技术。
圣杯是什么不再是我们讨论的名单。每个人都想要得到的是渲染整个应用程序的状态发生变化时，我们不需要处理所有的麻烦问题的根源：国家总是随时间的变化。给定任何特定的状态，我们可以简单地描述应用程序是什么样子的。
嗯，问题很清楚，Dude，我希望一些大公司能够成为一个超级天才的开发小组来真正解决这个问题…
拥抱脸谱网的反应
事实证明他们已经做到了，反应实现了一个虚拟的DOM，一个给我们带来圣杯的武器。
什么是虚拟DOM
很高兴你能问这个问题，让我们来看一个简单的反应例子。
VaR你好= react.createclass（{
渲染：函数（）{
返回这个{道具}；
}
}）；
react.render（，document.getelementbyid（'container'））；
这是反应组件的所有API。您必须有一个渲染方法。
好的，但这是什么意思，这不是Javaｓｃｒｉｐｔ！是的，不是。
你的新伙伴，JSX
此代码是用JSX，它是Javaｓｃｒｉｐｔ的超集，是用来定义的语法成分包含。上面的代码将被编译成Javaｓｃｒｉｐｔ，所以它将成为：
VaR你好= react.createclass（{用户名：你好
渲染：函数（）{
返回react.createelement（div
}
}）；
react.render（react.createelement（你好，{姓名：世界}），document.getelementbyid（'container'））；
你理解代码，这些对象构成的虚拟DOM实现createElement呼叫。
很简单：反应首先将应用程序的整个结构组装到内存中，然后将该结构更改为一个真正的DOM节点并将其插入到浏览器的DOM中。
好的，但什么是这些奇怪的createElement函数编写HTML的目的
虚拟DOM很快
正如我们已经讨论过的，DOM的操作是如此之远，以至于必须在尽可能短的时间内完成。
反应的虚拟DOM使两个DOM结构的比较能够快速地进行，并能准确地发现它们之间正在发生什么变化。通过这种方式，反应可以计算DOM需要更新的最小变化。
老实说，与两个DOM树相比，反应可以找到它将执行的最小操作集：
如果一个基于文本的输入框被呈现，反应将知道它有什么，并且它不接触那个输入框。不会有损失的状态！
它并不比虚拟DOM开销要贵，所以我们要做的就是比较它，当它准备对DOM做真正的改变时，它只会做最少的操作！
所以，我们要记住关于整个程序重新描绘的两题时的状态变化
一切都过去了。
将状态映射到DOM
只有在反应中对虚拟DOM进行渲染和比较是一个神奇的部分，它的出色性能是简化了大量排序体系结构的基础。
反应组件是幂等函数（一个幂等操作的特征是相同的效果，即多个执行的效果与单个执行的效果相同）。它们可以在任何实时点描述您的UI。重新考虑Pete Hunt和反应的最佳实践：
一个简单的幂等函数。
整个响应组件都是这样的，真的，它将当前的应用程序状态映射到DOM，并且还拥有Javaｓｃｒｉｐｔ来描述UI的所有功能——循环、函数、范围、组合、模块——而不是一个不好的模板语言。
设计react.createclass（{ var =
渲染：函数（）{
无功commentnodes = this.props.data.map（功能（评论）{）
返回（
{注释，文本}
）；
}）；
返回（
{ commentnodes }
）；
}
}）；
无功commentbox = react.createclass（{
渲染：函数（）{
返回（
评论
）；
}
}）；
React.render（
，
document.getelementbyid（'content'）
）；
今天，开始使用反应
最初的反应是有点让人望而生畏，它提出了一个模式上的转变，它确实有点太大了，有点不舒服。但是，当你开始使用它时，优势就变得清晰了。
反应文档非常优秀。你应该在教程中试试，我敢肯定，如果你给它一个机会，你一定会爱上她。
幸福的代码！
我的模板是HTML中的Javaｓｃｒｉｐｔ做一些疯狂的事，JSX很奇怪！开枪杀了它！
那是因为我不明白。
我发誓，反应在正确的轨道上，请听我说。
OD老MVC
交互式应用程序中所有邪恶的根源是管理状态。
传统的方式是MVC架构，或者一些变体。
MVC表明你的模型是唯一的真理来源——所有的国家都住在那里。
视图来自模型，必须保持同步。
当模式改变时，没有视图。
最后，用户交互被控制器捕获，该控制器更新模型。
到目前为止，一切都很好。
当模型改变时呈现视图。
看起来很简单，首先，我们需要描述视图-它如何将模型状态转换成DOM，然后我们将更新模型并重新播放整个页面。更重要的是，它不是那么快。不幸的是，它不是那么直接，因为有两个原因：
DOM实际上有一个特定的状态，比如文本输入框中的内容。如果您完全取消DOM以再次呈现，则将丢失此类内容。
DOM操作（如删除和插入节点）速度非常慢。频繁的渲染会导致严重的性能问题。
如果我们避免这些问题，我们保持模型和视图同步。
数据绑定
在过去的三年中，最常用的多框架功能用来解决这个问题的是数据绑定。
数据绑定可以自动保持模型和视图的同步。通常，对象和DOM。用Javaｓｃｒｉｐｔ表示
它将通过允许在应用程序中的各个块之间声明依赖性来包装同步。状态的变化将在应用程序中传播，并且所有依赖项都将自动更新。
让我们看看它在一些著名的框架中是如何工作的。
基因敲除
敲除提倡使用MVVM（模型视图的视图模型）的方法，帮助你实现视图的一部分：
视图（模板）
第一名：
最后的名字：
你好,!
/ /视图（显示数据和逻辑…）
VaR模型=功能（第一，最后）{
this.firstname = ko.observable（第一）；
this.lastname = ko.observable（上）；
this.fullname = ko.purecomputed（函数（）{（）
击倒轨道自动依赖。它知道 /，这取决于FirstName和LastName，因为这些被评估时，这。
返回this.firstname（）++ this.lastname（）；
}，这个）；
}；
情况就是这样。这里的输入值在跨度上都是变化的，你从来不需要编写代码来绑定它。
但是等等，模型不是真理的来源吗视图模型得到它的状态吗它怎么知道模型已经改变了有趣的问题。
角
角描述以保持模型和视图同步的方式进行数据绑定。
但…视图应该直接处理模型，使它们很快成为紧密耦合的吗
不管怎样，让我们有义务来看看Hello World的例子。
视图（模板）
名称：
你好（{ } } {你好。全名）！
控制器
Angular.module（'helloapp，{ }）
控制器（'hellocontroller，函数（）{（）{
var =这个；
hello.fullname =函数（）{
返回hello.firstname + hello.lastname；
}；
}）；
从这个例子中，它看起来像控制器有状态，并且有类似于模型的行为——或者假设一个视图模型假设模型在其他地方，那么它是如何保持与控制器的同步的呢
我的头开始有点痛。
数据绑定问题
数据绑定在小示例中效果很好，但是随着应用程序的规模变大，您可能会遇到以下问题。
声明的依赖性很快将被引入循环中。
要处理的最常见的问题是处理状态变化的副作用。
您可以预测当模型发生变化时会发生什么变化。当依赖性发生变化时，很难推断出任何可以以任意顺序执行的代码的问题的原因。
模板和显示逻辑被人为地分离。
这个观点扮演什么角色它扮演着向用户显示数据的角色，视图模型扮演什么角色，它扮演向用户显示数据的角色有差别吗不!
毫无疑问，模板已经将计数Pete Hunt
最后，视图组件应该能够运行它的数据并以其需要的格式显示数据。
很简单，{一} } { #，NG的重复和DataBind =foreach这些在一些初级和常规替代Javaｓｃｒｉｐｔ是坏的，他们没有走的更远。所以他们不给你提供过滤器或映射。
数据绑定是一种应该再次呈现的小技术。
圣杯是什么不再是我们讨论的名单。每个人都想要得到的是渲染整个应用程序的状态发生变化时，我们不需要处理所有的麻烦问题的根源：国家总是随时间的变化。给定任何特定的状态，我们可以简单地描述应用程序是什么样子的。
嗯，问题很清楚，Dude，我希望一些大公司能够成为一个超级天才的开发小组来真正解决这个问题…
拥抱脸谱网的反应
事实证明他们已经做到了，反应实现了一个虚拟的DOM，一个给我们带来圣杯的武器。
什么是虚拟DOM
很高兴你能问这个问题，让我们来看一个简单的反应例子。
VaR你好= react.createclass（{
渲染：函数（）{
返回这个{道具}；
}
}）；
react.render（，document.getelementbyid（'container'））；
这是反应组件的所有API。您必须有一个渲染方法。
好的，但这是什么意思，这不是Javaｓｃｒｉｐｔ！是的，不是。
你的新伙伴，JSX
此代码是用JSX，它是Javaｓｃｒｉｐｔ的超集，是用来定义的语法成分包含。上面的代码将被编译成Javaｓｃｒｉｐｔ，所以它将成为：
VaR你好= react.createclass（{用户名：你好
渲染：函数（）{
返回react.createelement（div
}
}）；
react.render（react.createelement（你好，{姓名：世界}），document.getelementbyid（'container'））；
你理解代码，这些对象构成的虚拟DOM实现createElement呼叫。
很简单：反应首先将应用程序的整个结构组装到内存中，然后将该结构更改为一个真正的DOM节点并将其插入到浏览器的DOM中。
好的，但什么是这些奇怪的createElement函数编写HTML的目的
虚拟DOM很快
正如我们已经讨论过的，DOM的操作是如此之远，以至于必须在尽可能短的时间内完成。
反应的虚拟DOM使两个DOM结构的比较能够快速地进行，并能准确地发现它们之间正在发生什么变化。通过这种方式，反应可以计算DOM需要更新的最小变化。
老实说，与两个DOM树相比，反应可以找到它将执行的最小操作集：
如果一个基于文本的输入框被呈现，反应将知道它有什么，并且它不接触那个输入框。不会有损失的状态！
它并不比虚拟DOM开销要贵，所以我们要做的就是比较它，当它准备对DOM做真正的改变时，它只会做最少的操作！
所以，我们要记住关于整个程序重新描绘的两题时的状态变化
一切都过去了。
将状态映射到DOM
只有在反应中对虚拟DOM进行渲染和比较是一个神奇的部分，它的出色性能是简化了大量排序体系结构的基础。
反应组件是幂等函数（一个幂等操作的特征是相同的效果，即多个执行的效果与单个执行的效果相同）。它们可以在任何实时点描述您的UI。重新考虑Pete Hunt和反应的最佳实践：
一个简单的幂等函数。
整个响应组件都是这样的，真的，它将当前的应用程序状态映射到DOM，并且还拥有Javaｓｃｒｉｐｔ来描述UI的所有功能——循环、函数、范围、组合、模块——而不是一个不好的模板语言。
设计react.createclass（{ var =
渲染：函数（）{
无功commentnodes = this.props.data.map（功能（评论）{）
返回（
{注释，文本}
）；
}）；
返回（
{ commentnodes }
）；
}
}）；
无功commentbox = react.createclass（{
渲染：函数（）{
返回（
评论
）；
}
}）；
React.render（
，
document.getelementbyid（'content'）
）；
今天，开始使用反应
最初的反应是有点让人望而生畏，它提出了一个模式上的转变，它确实有点太大了，有点不舒服。但是，当你开始使用它时，优势就变得清晰了。
反应文档非常优秀。你应该在教程中试试，我敢肯定，如果你给它一个机会，你一定会爱上她。
幸福的代码！
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。