There are a thousand Hamlets in a thousand people's eyes. ----- 威廉·莎士比亚

免责声明：以下充满个人观点，辩证学习

React 目前开发以函数组件为主，辅以 hooks 实现大部分的页面逻辑。目前数栈的 react 版本是 16.13.1，该版本是支持 hooks 的，故以下实践是 hooks 相关的最佳实践。

前置理解

首先，应当明确 React 所推崇的函数式编程以及 f(data) = UI 是什么？

函数式编程

函数式编程是什么？这里的函数并非 JavaScript 中的函数，或任何语言中的函数。此处的函数是数学概念中的函数。让我们来回忆一下数学中的函数是什么。

[](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22f13b8f14b84d098857623c9d56971a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)

在数学概念中，函数即一种特殊的

映射

，如何理解

映射

？

以一元二次方程为例， f(x) 是一种映射关系，给定一个的 x ，则存在 y 与之对应。

我们将一元二次方程理解为一个黑盒，该黑盒存在一个输入，一个输出，在输入端我们给入一个值 x = 2 则输出端必然会给出一个 y = 4 。

f(data)=UI

在了解了数学中函数的概念后，将其概念套用到 React 中，我们就可以明白 f(data)=UI 到底指什么意思？

结论：个人理解，将当前组件内部的所有逻辑视为一个黑盒，该黑盒有且仅有一个输入，有且仅有一个输出，输入端为 props，输出端则是当前组件的 UI ，不同的输入会决定不同的输出，就像把 x = 1 和 x = 2 给到所得到的结果是不一样的一样。而将这样的组件组合起来就是每一个页面，即 React 应用。