React学习手册

38

｜

第

3

章

</div>

)

render(

<Welcome />,

document.getElementById('target')

)

React

采用了声明式编程风格。这里组件

Welcome

描述了将会被渲染的

DOM

。

render

函

数调用了组件中声明的指令来构建

DOM,

它封装了

DOM

被渲染的具体细节。我们可以

清楚地知道，用户希望在

ID

为

'target'

的元素中渲染

Welcome

组件。

函数式编程基本概念

现在读者已经了解了函数式编程，以及“函数”和“声明式”的意义，接下来我们将

继续介绍函数式编程的核心概念：不可变性、纯函数、数据转换、高阶函数和递归。

不可变性

不可变性就是指不可改变。在函数式编程中，数据是不可变的，它们永远无法修改。

如果用户需要对外公开自己的出生证明信息，但是希望修改或者删除自己的私人信

息，那么有两个选择：用户可以拿一支大号荧光笔将自己的私人信息划掉，或者找一

台复印机。找到一台复印机后，复印一份用户的出生证明文件，然后用大号荧光笔在

该复印件上将自己的私人信息划掉可能是一个更好的办法。这样一来用户就拥有了一

个经过编辑的出生证明文件方便和其他人共享，而且出生证明的原件仍然完好无损。

这也是不可变数据在应用程序中的工作机制。在不修改原生数据结构的前提下，我们

在这些数据结构的拷贝上进行编辑，并使用它们取代原生的数据。

为了了解不可变性的工作机制，让我们看看它是如何修改数据的。现在来考察一个表

示颜色的对象：

let color_lawn = {

title: "lawn", ...