React 如何重新思考最佳实践

        是目前最流行的用于构建 Web 应用程序的前端 JavaScript 库。它是一个开源 JavaScript 库，用于构建用户界面。它根据用户要求呈现 UI，并且可以很好地与任何堆栈配合使用。在本文中，我们将介绍 React 如何重新思考 Web 开发中的一些最佳实践。

关注点分离

        将关注点分离（SoC）的是一个 软件开发的最根本的原则。该原则指出，不要将您的程序编写为一个完整的块，而是将代码分解成块，这些块是最终确定的系统小块，每个块都能够完成一个简单的不同工作。

        关注点分离旨在减少耦合并增加内聚性。

        耦合是程序中每个模块依赖另一个模块的程度。这很有帮助，因为孤立的问题很容易处理，而且模块很可能是可单元测试的。耦合的增加意味着模块相互依赖，一个模块的任何更改都可能导致其他模块的级联更改，这将是调试的噩梦。

        内聚是模块的元素属于一起的程度。这很重要，因为功能方面的元素必须有意义。内聚性的降低使代码更难维护。找出根据需要在何处进行更改并不容易。

模板鼓励糟糕的关注点分离

        JavaScript 模板是指用 JavaScript 语言实现的客户端数据绑定方法。在模板中，您将在一个文件中具有显示逻辑，在另一个文件中具有标记。显示逻辑和标记不可避免地紧密耦合且高度内聚。我们可以观察到，模板实际上是独立的技术，而不是关注点。最重要的是，他们故意削弱了力量。

• 让我们以车把中的 Partial 功能为例：模板通常依赖于原始抽象。“部分”用于重用模板。它们基本上是可以包含在其他模板中的迷你模板。这种方法的缺点是重用的子模板获取父模板在当前范围内的所有变量。
• 像“Each”这样的流控制抽象： “Each”遍历序列的每一项，并以传统的模板语言发出一些标记。缺点是很难改变它遍历列表的方式。你没有编程语言的力量，但有模板语言的力量，这种力量被故意削弱。
• 发明许多 JavaScript 中已经存在的新概念：指令是向 AngularJs 中的元素添加额外行为的类。它创建了许多在 JS 中已经存在的概念。该框架不知道如何为您分离您的关注点。它应该只为用户提供正确执行它的工具。而不是框架本身的语言。

React——一个高度内聚和松散耦合的库

        React 使用混合标记和显示逻辑的组件。与模板语言不同，标记和逻辑可以合并到与应用程序更好地匹配的单个组件中。此外，组件显示抽象、组合和表现力。

• 抽象：可以使用 JavaScript 函数或类创建组件。它们是单元可测试和 lintable 的。
• 组成：它们是可重复使用的。
• 表现力：他们使用正则 JavaScript 表达式。

        React 使用名为 React DOM 的库来确保跨站点脚本的安全性，该库用于生成 DOM。该库会自动对输入进行转义，因此 HTML 也会被转义，从而确保 XSS 的安全。

        还有一个可选的预处理器，允许用户使用类似于 HTML 的语法进行开发，称为JSX。它使设计人员更容易贡献代码。

        React 确保模板的可访问性和 JavaScript 的强大功能。

虚拟 DOM

        构建 UI 很困难，因为有太多状态需要通过网页进行管理。有很多 UI 元素、设计迭代、用户输入等。

        随时间变化的数据是万恶之源。

        当数据发生变化时，我们不能再仅仅刷新页面。目前，这不是一个可行的解决方案，并且从用户体验的角度来看也很烦人。

        另一方面，React 在更改时重新渲染整个组件。组件是在任何时间点描述用户界面的幂等函数。React 通过在 Class 组件和功能组件中的用户定义函数的情况下使用 setState 函数来隔离数据更改。现在的问题是贵吗？

        React 通过使用称为虚拟 DOM 的东西来实现这一点。虚拟 DOM 使重新渲染速度更快。它针对性能和内存占用进行了优化。

        在每次更新时，React 都会构建一个新的虚拟 DOM 子树并将其与旧的进行比较。然后它计算最小的 DOM 更改集并将它们放入队列中，然后批量执行所有更新。

        它很快是因为 DOM 很慢并且 react 计算最小的 DOM 操作批量读取和写入以获得最佳 DOM 性能。

        这些是 React 重新思考 Web 开发最佳实践的一些方式。这篇文章基于Pete Hunt在 2013年的一次演讲。这是很有见地的，因为大多数关于 React 的教程都涉及如何而不是为什么。七爪网源码交易平台_成品网站源码_小程序源码-七爪网