框架虽好, 但我们要知道为什么要使用它.
保持冷静. 拥抱进化.
当 React 发布时, 许多人只看了一眼 JSX 并且失去了兴趣. 这些尖括号在 JavaScript 中有什么作用?! 关注点分离怎么样? Facebook 是否从社区中学到了什么?
像许多人一样, 我对 React 的 JSX 的初步反应至少可以说是持怀疑态度. 虽然我喜欢 JSX, 但无论何时我将它介绍给新的开发人员, 我都觉得我正在炫耀我的丑陋宝贝.
尽管最初的戏剧性, 我已经意识到 JSX 毕竟不是一个激进的想法. 事实上, 它只是硬币的另一面. 这是一个自然的进化过渡. 要理解为什么, 历史课是有序的.
第 1 阶段: 不引人注目的 JavaScript
还记得 jQuery 的美好时光吗? 不引人注目的 JavaScript 时代盛开. 我们的 html 是纯 HTML. 我们的 JavaScript 是纯 JavaScript. 我们的担忧是完全分开的.
我们写这样的 HTML:
<a class="hide"> 点击隐藏我 </a>
然后我们写这样的 JavaScript:
$('.hide').click(function(){$(this).hide();}
这似乎是一个好主意. 我们的 HTML 非常纯净! 但后来我们意识到了一些问题: 呃, 我怎么知道这两行代码是相互关联的呢? 答: 除非我阅读每一行 JavaScript, 否则我不能. 使用此模式, 您无法在不检查每一行 JavaScript 的情况下更改标记行, 以确保您不会破坏选择器. 你知道, 这里没有真正的分离. 当然, JS 和 HTML 都在单独的文件中, 但这两种技术从根本上需要同时更新. 它们必须以锁步方式移动, 否则应用程序将崩溃.
严格区分 HTML 和 JS 实际上导致了难以维护和调试的应用程序. 每次想要更改标记行时, 都不得不担心破坏 jQuery 选择器. 也许如果我们放松对分离关注的宗教信仰, 我们可以减轻一些痛苦吗? 这迎来了第二阶段......
阶段 2: 双向绑定
当前端开发人员在 Knockout 和 Angular 中看到双向绑定时, 这是一个启示. 我们中的许多人抛弃了我们对分离关注点的宗教信仰, 并接受了在 HTML 中声明绑定的力量. 当数据改变时, UI 改变了. 当 UI 改变时, 数据改变了. 太干净了 很简单.
当然, 每个库和框架都有一种完成这项工作的专有方法, 但它们从根本上做同样的事情. 只需考虑在几个流行框架中迭代数组的简单示例:
- // Angular
- <div ng-repeat ="user in users">
- // Ember
- {{#each user in users}}
- // Knockout
- data-bind ="foreach:users"
但有趣的是在这里发挥的作用. 很少有人认识到一个非常基本的问题: 我们正在有效地将 JavaScript 放入 HTML 中. 这不是关注点的分离. 所有这些方法都做同样的事情: 通过添加额外的专有标记, 它们使 HTML 变得更强大. 此标记有效地解析为 JavaScript. 现在我们终于可以通过这种方式将 JS 和 HTML 混合在一起了, 现在是时候让 React 介入并向我们展示硬币的另一面......
第 3 阶段: JSX
React 的 JSX 不是一个彻底的转变. 它只是一个简单实现的成果:
作为一个行业, 我们已经决定: HTML 和 JavaScript 属于一体.
不可否认, 我们并没有大声说出来. 但是拥抱 Angular,Knockout 和 Ember 让我们的新偏好变得清晰. 正如我在上面所提到的, 用 HTML 编写数据绑定代码实际上是将 JS 放入 HTML 中. 但是, 如果我们要混合在一起, 为什么我们应该选择将技术扩展为像 HTML 一样脆弱和松懈? 浏览器从一开始就松散地解释了 HTML. 那么 HTML 是声明数据绑定, 循环和条件逻辑的逻辑基础吗?
Facebook 认识到 JavaScript 是处理这两个混合问题的更合理和更强大的技术. 顿悟归结为:
Angular,Ember 和 Knockout 在您的 HTML 中添加了 "JS".
React 在你的 JS 中放入 "HTML".
这一举措的好处是多方面的, 在你尝试使用 React 和 JSX 之前不一定会受到重视. React 的 JSX 基本上优于上述所有 "Phase 2" 风格框架, 原因如下:
编译时错误
当您在 HTML 中输入拼写错误时, 您通常不知道在哪里搞砸了. 在许多情况下, 这是一个无声的运行时错误. 例如, 如果在使用 Angular 时键入 n-repeat 而不是 ng-repeat, 则不会发生任何事情. 相同的在 Knockout 中的 data-bnd vs data-bind 的故事. 在任何一种情况下, 您的应用程序都会在运行时静默失败. 这令人沮丧.
相反, 当您在 JSX 中输入拼写错误时, 它将无法编译. 忘了关闭那个 < li > 标签? 当您在 HTML 中输入拼写错误时, 您是不是希望获得这样的丰富反馈?
ReactifyError: /components/header.js: Parse Error: Line 23: Expected corresponding JSX closing tag for li while parsing file: /components/header.js
有了 JSX, 这个详细的反馈终于成为现实! 这是一个巨大的胜利. 这种快速反馈回路大大提高了生产率.
充分利用 JavaScript 的全部功能
在 JavaScript 中编写标记意味着您可以在使用标记时享受 JavaScript 的所有功能, 而不是像 Angular 和 Knockout 这样以 HTML 为中心的框架中提供的小型专有子集.
客户端框架不应要求您学习声明循环和条件的专有语法.
React 避免了学习另一种声明循环和基本条件逻辑的专有方法的开销. 正如您在第 2 阶段中所见, 每个双向绑定框架都使用自己的特殊语法. 相比之下, JSX 看起来几乎与 HTML 相同, 它使用简单的'ol JavaScript( it uses plain'ol JavaScript ) 来处理条件和循环之类的东西. 在像 JavaScript 一样分散的生态系统中, 不必学习另一种专有数据绑定语法就是一个不错的胜利.
由于您在与相关 JavaScript 数据相同的文件中编写标记, 因此许多 IDE 将在您引用函数时为您提供智能感知支持. 想想在面向 HTML 的框架中引用函数时, 你经常犯错误的频率.
最后
JSX 并不是一个疯狂的想法. 这是一个自然的进展. 所以尽量不要惊慌失措.
JSX 不是革命性的. 它只是进化的一小步.
像大多数形式的进化一样, 这是一个明显的改进.
来源: http://www.qdfuns.com/article/48044/e548f07b09ec609f9272313ff07dbe49.html