在开发人员晚宴上通过React虚张声势

如果您正在考虑使用React，但对资源的数量感到不知所措，已经放弃抵抗噪音，或者只是想了解事物的状态，请继续阅读。 如果您已经使用过React，讨厌React，仍然想抵制React……无论如何，请阅读本周末聚会的悬崖笔记。

有点反应过度

关于这个主题，可能尚无任何东西可以写。 读取很棒的反应仓库中的所有资源都相当于完成整个《大英百科全书》大炮。 耗时，令人印象深刻且具有启发性。 但是，我们只有到周六才能避免尴尬，编码教程不会涵盖所有可能出现的流行语。

请告诉我什么是React

Ben Backbone说：“它只是MVC中的V，所以只有它的1/3。”

您说：“我发现与MVC进行比较既无益又不直观，我与Lego一起玩，并专注于制作适合任何地方的漂亮积木”。

这是一个构建块：

({ someText }) => <div>{ someText }</div>

React不是一个框架，它是一个库，它允许您组合这些构建基块来构建可维护的交互式界面。

现在您可能想知道为什么React如此令人生畏，为什么滚动条比您希望的高得多……好吧，像露营一样，您不能随便吃惊地走进树林，您需要这个……这个……以及这个…

我想要的JSXmas就是你

艾伦·安格拉（Alan Angular）说：“您正在将HTML放入JS中，并且正在混合各种疑虑”。

您说：“您喝醉了Alan，回家……但是，这是表达标记的一种令人愉快的方式，可以将标记转换为很多东西，就像HTML一样，因此我不必学习新的DSL，而实际上我唯一关心的是展示我的数据视图”。

是的， JSX可能首当其冲受到仇恨，但这确实使React脱颖而出，并已被其他库所采用。 不再需要低级地摆弄DOM，检查属性或担心跨浏览器怪癖。 我可以编写看起来像HTML的怪异东西，但也可以使用旧的JS来操纵它 。

虚拟DOM，DOM，DOM，DOM，DOM

爱德华·恩伯（Edward Ember）说：“闪光器引擎重绘的速度比虚拟DOM快得多”。

您说：“虽然性能对我来说很重要，但我很少/从未构建过需要渲染10k不断变化的列表项的应用程序。 如果这项技术能够满足社区，稳定性，可维护性，可测试性方面的要求，那么它的步伐可能不会太慢​​。”

与DOM进行交互的速度相对较慢，因为与内存中的JS相比，在给定的操作中它通常占用最多的时间。 React团队开发了虚拟DOM（VDOM），以使他们能够快速比较状态更改，以最大程度地减少需要完成的缓慢工作量。

我不懂艺术，但是我知道我喜欢什么

Charlotte CSS说：“内联样式是互联网上所有存在的问题。 不：之前/之后：不完整的@media打印支持，未干燥的代码，混合问题[艾伦+1] 、:悬停等额外开销，我需要继续吗？”。

您认为，“与他们甚至没有严格的内容安全策略一起工作相比，这一切都显得苍白*，很高兴她没有提到这一点。”

您说：“沙漠之前有很多夸张。 无论如何，伪选择器都是一个hack，我不喜欢使用它们，我喜欢树木，DRY是我不喜欢毯子式CSS的原因，再次，我只是出于预期目的使用表示层。

好的，因此您不必在React中使用内联样式，您可以大胆地尝试使用CSS模块 （如果您在HTML中使用长类名）， 可以使用许多CSS内联工具之一，也可以只使用BEM 。

我强烈建议您放手一搏，这意味着您组件的内容和样式紧密相关（这是您想要的），并且可以放心放置在任何地方。 开发人员不会偶然踩到彼此的脚，并且没有任何令人费解的命名约定必须被教导并且必须受到监管。 JS还擅长为动画制作繁重的工作。

*要避免出现这种细微的皱纹， 可以使用Shadow DOM，查看react-shadow或maple以获得想法。

你'我' 流向同一个方向

Kevin Knockout说：“通过两种方式的数据绑定，您可以以很少的样板代码获得高度交互的界面”。

您说：“单向数据流令人头疼，而在一个方向上进行调试和测试则更加令人愉悦，尤其是对于没有副作用的纯函数而言”。

因此，我们以类似于HTML的形式编写了具有自己受保护样式的构建块，并且它们仅在需要时才更新DOM，但是如何使它们显示内容呢？ 通过使用具有参考透明性的幂等渲染函数，它们的纯洁程度当然就像未驱动的雪花；-)

如果您只记得聚会的一件事，那就是这个核心概念， React组件只是函数 。 如果您给他们相同的输入，他们应该返回相同的输出，则通过props传递此数据。 但是，组件也可以保持自己的状态 ，应使用儿童手套进行处理 。

理想情况下，在React应用程序中，您需要一个事实来源，即智能组件 （它们了解数据以及如何传递数据）和愚蠢的组件（一无所知并按所告诉的去做）。 您的应用程序的大部分应该由笨拙的组件（工蜂）组成，并由高阶组件编排数据以传递给它们。

由Redux欺骗

杰里米·jQuery（Jeremy jQuery）说：“ React的问题是，您需要三天的时间来尝试15种Flux实现 ，才能得出结论，您实际上并不知道哪个是最好的。 你一个人走，又花了一天写我在10分钟内所做的事情。”

您说：“是的，它有点像Facebook（FB）上的瑰宝，将它留给社区来制定模糊的哲学，我完全同意。 尽管现在有了Flux实现，但是我的代码易于推理，可测试并且可以扩展”。

开源社区（OSC）的优点在于，最终将出现一个最佳解决方案，因此向OSC提出建议并不是一件坏事。 FB自己以许多不同的方式进行助焊剂，那是什么？

从本质上讲，这是我们涵盖的单向数据流的机制。 视图执行一个动作 ，该动作通过调度程序来更新商店 ，该商店将更新您的高级组件和后续子组件。 总是一种方式，总是可以预测的 。

今年早些时候，一个叫丹的厚脸皮的快乐小伙子把东西放在一起聊了起来。 人们喜欢它，它在GitHub上的知名度超过银河系，因此他全职致力于它。 这就是所谓的Redux ，它是我推荐的实现。 它并不完全是Flux，但开箱即用的开发工具在时间旅行和撤消/重做等方面非常出色，这要归功于只能通过纯reducer进行存储更新。

我永远不会为你改变

在此关头，人们对港口和奶酪都太忙了，但是如果他们要问不可变性，那么这是一个高层次的观点。

当我们的React应用程序中的状态发生变化时，在再次检查DOM差异之前，将检查所有属性是否存在差异。 进行深度相等性检查非常昂贵，因此与VDOM的区别也很大。 幸运的是，我们可以使用不可变数据为React提供帮助。 如果组件的属性没有变化，并且它们是不可变的对象，则当前属性值和下一个属性值将具有相同的引用，这意味着我们可以在shouldComponentUpdate中进行快速的浅层相等性检查。 React 生命周期的这一部分将减少VDOM的差异化工作，从而节省时间。

借助Redux的reducer，您可以立即使用此概念，采用以前的状态，并根据操作的有效负载创建全新的状态。 这是不变性和重复主题的第二个好处； 它使您的应用程序可预测。 没有错误，因为某件事意外更改了原本不打算或与之有生意的其他事物。

告诉我要走哪条路

爱德华·恩伯（Edward Ember）说：“我可以在几分钟内完成我的项目，并拥有我所需的一切，我发现React太轻巧了”。

您说：“对我来说，使用很多都可以很好地完成一件事情的库/构建块（UI微服务）是高度可维护的，并且易于将来证明。”

所以React没有配备路由器，但是Michael Jackson配备了路由器。 这是React中实际的路由方式，并且是任何单页面应用程序（SPA）的虚拟需求。 现在，我们有了Promises，fetch API，服务工作者，Web工作者，本地存储， JWT和intl等。您可以在本地构建SPA ，几乎不需要大型框架*，而只需几个polyfill。

*不是说框架本身是不好的

让那个接力棒

您说：“我已经有了这个SPA所需的全部东西，我的杯子是空的，这篇文章太长了，没有可辨认的tl; dr，我要在星期六之前整理一下干洗”。

我说：“我告诉您说什么，不是反过来，而是……有最后一个可选内容，然后我们需要讨论您将如何将所有这些放在一起。”

Redux竭尽全力地说明了如何执行异步操作以及如何通过包括中间件在内的各种方式为应用程序添加数据。 Neal Netflix弹出，说： “让我们冷静一下，看看Falcor ” ，您说， “实际上听起来不错，但我将首先介绍Relay和GraphQL ” 。

FB在构建移动本机应用程序，移动Web应用程序和其他Web产品套件时遇到问题。 当REST无法削减数据时，如何协调跨这些平台的极其复杂的数据同步并使用相同的语言？ 因此，我们有了GraphQL（与Graph数据库无关），这与Flux只是一个具有很多实现（ 包括JS ）的概念。

GraphQL是一种允许前端开发人员控制其数据要求的语言。 没有自定义的REST端点，没有打扰各个后端团队以发送额外的字段，只需索取带有可选参数的数据片段，它将返回给您。

继电器然后挂接由容器和路由，您的GraphQL终点的方式您反应的组分。 这种相当复杂的婚姻导致开箱即用地进行乐观更新，查询批处理和数据同步幸福……只要您拥有GraphQL服务器……和模式……以及能够绕过中继突变和时髦的查询语言……

昨晚浅层渲染改变了我的生活

Roberto Reacto说：“ Facebook使用Jest来测试其组件，这就是我所使用的”。

您说：“这太慢了，太复杂了。 它真的很喜欢嘲笑一切。 浅渲染并测试所有东西”。

如果FB确实确实使用Jest，我只能称赞他们的耐心，但是您很少会在会议电路上看到它。 当我阅读本文时 ，我顿悟了，剩下的就是历史了。

这是测试前端的最佳方法。 没有DOM，几乎没有依赖关系，只需破解Mocha和Assert ，您将拥有可以依靠的坚如磐石的 超快速单元测试。 通过测试各个运动部件，您将获得很长的路要走，这只剩下一些轻量级的功能冒烟测试，以确认相互作用，很好。

建立它，他们会来的

Graham Grunt在吃完一片冷西兰花后吃了一口，说道：“如何在没有构建工具的情况下构建应用程序？”。

您说：“有了节点，npm脚本和模块加载器，我的工作流程大大减少了，但功能却异常强大”。

我的另一个关键是读这个 ，然后我用的WebPack为我的选择，但武器JSPM和Browserify是完美的替代品，或任何东西，让你：

• 热装：因为我们是超级懒惰的开发者，时间就是金钱
• Babel集成：出于我们将要介绍的原因
• 缩小，资产/供应商管理，资源哈希：因为您想要一小块缓存破坏了JS来运行您漂亮的应用程序

我想让B-abel使用ES2015

Oscar Old-School说：“自2009年以来，我一直在使用ES5，传统的浏览器不支持ES2015，JS中的类！ 规格每年更改一次，诸如Object.observe之类的分阶段主张在您使用它们时会被丢弃，Babel放弃对常用功能的支持以及三个点是什么 ……？”。

您说：“对于一个年纪这么大的人，您对所有这些事情都非常熟悉，并且您提出了一些好的要点。 正如您提到的Babel一样，您知道我们可以向下移植到在所有现代浏览器中运行的ES5。 您不必使用ES2015中的所有功能，如果您使用建议的功能，就会遇到麻烦。 这三个点也很棒，传播着爱。

因此，以前是6to5成名的，当时它是由一个小孩子在他的历史课上写的（直到他发现Dolly少工作了三个小时），Babel才是JS转译器，除非您喜欢更多的Gallic工具 。

这不是必需的（例如TypeScript不是用于Angular 2的；-)，但是在ES2015中编写所有代码（针对辅助项目的阶段建议）只会使您的生活变得更好。 一旦开始破坏，您将永远不会停止。

是的，原则上最好避免使用类，最好是继承而不是继承，但是…如果只扩展一次，并且使用惯用的本机代码可以使您的React组件更具可读性……也许我们就顺其自然了……

同构服务器端呈现通用JavaScript

艾莉·安德森（Ally Anderson）说：“ JavaScript是互联网上所有存在问题的地方。 这些动态网站尚未进行SEO优化，您想要多少个嵌套元素！？”。

您说：“的确，不应将JS用于所有内容，但是我构建的内容需要交互性和出色的UX，但我仍然关心正常的降级和渐进式增强。 这就是为什么我在服务器端使用语义元素和表单发布来呈现尽可能多的内容的原因，从而使我免费获得SEO。”

通常，当人们使用同构和通用时，它们表示服务器端渲染，这是React的目标，它将其主引擎从react-dom和react-dom / server中分离出来。

作为一个小警告，不要盲目地渲染服务器端，因为上镜的时间更快。 根据情况，往返，延迟，浏览器和硬件等可能不是这种情况。

Gah，我的代码中有皮棉了……哦，还有一些口香糖

无需就此争论不休，在会议上达成了普遍共识，并点了点头（甚至来自Alan），在共享代码库上进行协作势在必行。 在分号和缩进的代码审查期间不应浪费时间； 它们应该与意图和架构有关。

现在，代码质量和代码样式之间存在区别，质量侧重于代码最佳实践，而样式侧重于……使用分号等对代码进行样式化。 例如，您可以使用JSCS和JSHint拆分这些作业，但目前， lint世界的宠儿是ESLint 。

对于React，我使用Airbnb的配置 ， 该 配置将其用于Reacty位。 将此粘贴在您的测试后脚本中，并合并PR，就像它们过时了一样。

用过的情况

Sally Static说：“我不会将React用于静态站点，没有真正的互动，我可以从Jekyll获得所需的一切”。

您说：“您尝试过盖茨比吗？ 您确定您不想在生活中重新加载吗？”。

可能会争辩说，对所有内容使用React都是过大的，如果不需要交互和通过42kb JS进行VDOM，则不应使用它。 但是…React不仅与VDOM有关，还与可测试样式的Lego积木有关。 如果您要做的事情不仅仅只是琐碎的事，而且您不介意编写一些JS，我建议您使用React *。

*或任何其他具有组件哲学的库，但是本文是关于React的优点的;-)

开始的结尾

React具有庞大的社区和生态系统，可以补充单一责任库，这意味着您可以将组件放到现有站点中，这是使用庞然大物框架无法实现的，或者是从头开始编写整个应用程序。

React已经占领了世界¹ ，WordPress即将全部使用React ² ，您必须使用React ³ 。 如果您正在寻找一种可靠的，可以完成一件事的，不受限制的组件库，那么希望本文为您提供了下个月到google / sitepoint的足够链接和单词。

就像在90年代编码时那样，它具有整页刷新（尽管优化了客户端的代码），内联样式（尽管不是必需的）和内联事件（尽管有一个根事件 ）……和“ JS中的HTML”，但是这没有什么错⁴ 。

1. 它没有
2. 还不...还
3. 您没有，但是;-)是个好主意
4. 90年代有很多错误，这个结论使用了自由创作许可

From: https://www.sitepoint.com/bluff-your-way-through-react/