React-Basic Theoretical Concepts笔记

关于React的核心概念。仓库的地址是:React - Basic Theoretical Concepts,写的比较简单,最开始学React的时候看过一遍,但其实完全没有get到任何有效信息,因为当时只是简单的看了一下React的文档,都没怎么真的写过。现在回头重看一遍,有很多启发。我翻译了一下。

Transformation

React最核心的概念是它是一个UI层的数据转换,将一种形式的数据转换成另一种形式的数据。相同的内容总会有相同的呈现。是一个pure function

Abstraction

复杂的UI可以被抽象化成一个个可复用的小的组件。使用起来也是和使用函数一样。

Composition

想要真的拥有可复用的模块,只不断为它们提供外层的容器是不够的,需要将不同的抽象组件组合起来,形成新的组件,从而实现真正的可复用。

State

有一些state应该是专属于某一个组件,而无法被另一个组件共享的。比如滚动页面的位置,这是一个典型的不希望在其他页面中被共享的状态。

Memoization

对于纯函数,当我们知道无论什么时候调用它都能够获得相同的结果时,重复调用就会变成一种浪费。我们可以创建一个记忆版本,用来保存最后一个参数和最终的结果。这样我们就不必为了相同的结果来重复调用了。

Lists

很多UI某种程度上都是列表的变形,每个列表元素会有不同的值,从而构建一种层级结构。我们可以通过map来管理每个元素的状态。

Continuations

当我们使用太多的列表时,需要维护的模板会越来越多。这时我们可以通过延迟函数执行来将一些模板移除到核心逻辑以外,比如通过bind来实现currying,之后通过从外面将数据传入函数的方式来简化核心逻辑。

State Map

前面提到,当有重复的代码逻辑出现时,我们可以通过抽象和组合的方式去避免重复执行相同的内容。我们可以通过将抽象化和传入状态的部分移到更低层级的函数里来实现。

Memoization Map

如果需要memoize一个列表中的多个元素,这样就会变得比较复杂。但是UI又很稳定,每次掉啊用都会得到相同的值,因此我们可以通过传入memoization cache给组合函数来优化。

Algebraic Effects

层层传递一个值有时候并不方便,我们需要有一种更方便的方法来将数据从一个组件传递到另一个组件,同时略过中间层级的组件。React里,这个被称为context