React基础：声明式编程

秒速五厘米 2022-03-25 10:49 384阅读 0赞

主要的编程范式有：

*  命令式编程（Imperative Programming）
 *  声明式编程（Declarative Programming）
 *  函数式编程（Funational Programming）
 *  面向对象编程（Object-oriented Programming）
 *  ...

React推行的是声明式编程的思想，下面来对比学习下**命令式编程**与**声明式编程**，理解其中区别，以便于掌握React。

### 命令式编程 ###

命令式编程描述代码如何工作，告诉计算机一步步地执行、先做什么后做什么。

比如，去酒吧点一杯酒，指挥服务员：

*  从架子上取下一个玻璃杯；
 *  把杯子放在酒桶前；
 *  打开酒桶开关，直到酒杯满；
 *  把杯子递给顾客；

这就是按照声明式方式点一杯酒的，需要告知服务员如何给顾客提供一杯酒。

这里有一个代码示例，编写一个函数，处理传入包含大写字符串的数组，返回包含相同小写字符串的数组。

toLowerCase(['FOO', 'BAR']);  // ['foo', 'bar']

命令式函数实现：

const toLowerCase = arr => {
        const res = [];
        for (let i = 0, len = arr.length; i < len; i++) {
            res.push(arr[i].toLowerCase());
        }
        return res;
    }

> 首先，创建一个空数组用于保存结果，然后遍历输入数组的所有元素，将每项元素的小写值存入空数组中，然后返回结果数组；

### 声明式编程 ###

声明式编程表明想要实现什么目的，应该做什么，但是不指定具体怎么做。

声明式点一杯酒，只要告诉服务员：我要一杯酒即可；

声明式编程实现`toLowerCase`:

const toLowerCase = arr => arr.map(
        value => value.toLowerCase();
    )

> 输入数组的元素传递给`map`函数，然后返回包含小写值的新数组

### 对比 ###

相对比而言，声明式编程

*  更加简洁、易懂，利于大型项目代码的维护；
 *  无须使用变量，避免了创建和修改状态；

### React中的声明式 ###

示例：带有标记的地图

JavaScript 实现

这是在JavaScript中命令式创建地图、创建标记以及在地图上添加标记的步骤；

React组件中显示地图的方式：

声明式编程方式使得React组件很容易使用，最终的代码简单易于维护。

来源：[http://blog.lideguang.com/article/detail/react-declarative-programming][http_blog.lideguang.com_article_detail_react-declarative-programming]

[http_blog.lideguang.com_article_detail_react-declarative-programming]: http://blog.lideguang.com/article/detail/react-declarative-programming

React基础：声明式编程

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 SparkSQL声明式

相关 react 编程式导航和声明式导航

相关编程基础概念：命令式编程和声明式编程

相关 vue学习-1：编程范式：命令式开发和声明式开发

相关 javascript函数式编程基础

相关 React学习之 -- 函数式编程

相关函数式编程（基础部分）

相关声明式事务

相关 React基础：声明式编程

相关 react特性-声明式编程