前端组件是一种功能

我们适用于功能的原则也可以适用于组件

Susan Stockwell拍摄的“世界”图片。 该作品包括由废弃的计算机组件制成的世界地图。

听音频版本！

function代表定义操作的基本方式。 它可以接受arguments并产生result 。

result = function(arguments)

您可以用函数形式表示所有内容 。 这是一种心理模型。 一个地图软件开发。

这里有些例子：

通过HTTP加载网页时，可以考虑将检索资源（URL）的命令作为函数，将查询字符串作为参数。 返回的结果表示页面的状态（HTML输出）：

state = getResource(queryString)

在Git中，树的当前状态表示包含某些更改的提交的结果：

currentState = commit(changes)

同样在Git中，存储库的最终状态（您指向的最后一次提交）表示按时间顺序重播自开始以来所有过去提交的所有更改的结果：

finalState = replayAll(pastCommitsInChronologicalOrder);

对于前端组件，有一个类似的模式：

visualRepresentation = renderComponent(attributes)

前端组件可以表示为接受属性并为用户生成视觉表示的渲染函数 。

前端组件是页面的功能。

在HTML中， 组件渲染是通过HTML元素声明的， HTML元素使用浏览器为用户提供视觉表示 。 HTML元素可以包含属性 。

具有属性“类型”和“占位符”的输入元素的HTML代码

用于“输入”渲染功能的伪JavaScript代码 ，其中将结果分配给称为“视觉表示”的变量。 使用包含属性“类型”和“占位符”的对象文字来调用该函数。

在React中，使用JavaScript声明组件渲染， JavaScript操纵DOM来输出HTML ，这允许浏览器向用户提供最终的视觉表示。 这些属性称为props 。

React JSX代码用于“自动建议”元素，其属性“建议列表”是一个数组，而“禁用”是一个布尔值。

用于“自动建议”呈现功能的 伪 JavaScript代码 ，其中将结果分配给名为“ HTML”的变量。 使用对象文字来调用该函数，该对象文字包含属性“建议列表”和“禁用”。

在Angular 1.4中，使用指令从指令定义对象返回的带有restrict: 'E'属性的指令来声明组件渲染 。 restrict: 'E'定义强制指令在标记中声明为HTML元素。 输出为HTML ，它允许浏览器提供最终的视觉表示 给用户。 该组件还具有属性 。

属性为“ title”的“进度条”元素的角度代码 。

用于“进度条”呈现功能的 伪 JavaScript代码 ，其中将结果分配给名为“ HTML”的变量。 正在使用包含属性“ title”的对象文字来调用该函数。

从根本上讲，组件都是相同的。

网络的发展方向与软件工程多年以前一样。 它正在重塑构建抽象复杂逻辑部分的小型组件的准则。 一整套似乎丢掉的哲学 。

今天，每个人都称其为Components 。 明天可能会称为其他名称。

最后，每个组件都只是一个产生结果并接受参数的函数：

result = function(arguments)

我们应用于功能的许多原理也可以应用于组件。

让我们以一个无限滚动列表为例，说明如何将组件视为功能可以帮助您构建更好的软件。

在内部，该组件向服务器发送请求，以便每次用户向下滚动时检索其所需的部分内容：

名为“无限滚动列表”的组件的伪声明性代码 ，不使用特定的语法或框架，仅使用开始和结束标签。 没有为其设置属性。

网络请求是一个副作用。 您希望避免处理组件内部的副作用，就像避免在函数内部一样。 而是将其作为参数传递：

名为“无限滚动列表”的组件的伪声明性代码 ，不使用特定的语法或框架，仅使用开始和结束标签。 元素包含一个名为“ fetch”的属性，该属性从网络发出请求，并将结果作为回调传递给组件。

如果组件不向自身内部的服务器请求新数据，而是将其接受为属性，则渲染该组件进行测试将更加容易。 如果组件的名称正确且封装正确，它也将带您朝松散耦合和高内聚性的原则前进（另请参见包装的耦合和内聚意味着什么）。

如果尝试在可能的情况下构建纯函数是一种好的做法，那么对组件执行相同的操作也是一种好的做法。

正如我去年提到的那样 ，网络有一种趋势是完全基于组件。 我不确定谁会成为赢家。 它可以是框架，库或其他内容。 可以肯定的是，无论它是什么，它都必须实现此处介绍的相同类型的接口 。

函数是基础 ，组件遵循相同的模式。 它们也可以遵循相同的原理，就好像它们是页面上下文中的功能一样。

如果您指的是简单功能，以便了解如何构建更好的组件，那么，这并不是硬核函数式编程 ，您将能够创建具有高凝聚力和松散耦合的弹性Web应用程序，这些应用程序可以在时间的考验。

不必因为完全有一个新的组件框架就可以完全重写应用程序而与其他人做同样的事情。

谢谢阅读。 如果您有任何反馈意见，请通过Twitter ， Facebook或Github与我联系。

From: https://hackernoon.com/this-is-how-to-get-the-best-out-of-front-end-components-52ee29dfb4ae