声明式(Declarative)编程与命令式(Imperative)编程

[felix-cao]

主要的编程范式有：

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

React 采用声明式编程范式

• 命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。

• 声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

一、命令式编程

命令式编程描述代码如何工作，告诉计算机一步步地执行、先做什么后做什么。 比如，做晚饭，你指挥你的保姆：

• 水龙头放水洗米
• 将米放入电饭锅
• 插入插头
• 启动电饭锅煮饭按钮
• 洗菜

......

这就式命令式编程，告诉保姆如何去做事。 举个例子:

// 命令式关注如何做（how）

var num = [1,2,3,4,5];
var square = [];

for(var i = 0; i < num.length; i++) {
  var newNum = num[i] * num[i];
  square.push(newNum);
}
console.log(square) //=> [1,4,9,16,25]

遍历整个数组，取出每个元素，乘以它自己，然后把新的数值放入新数组，每次都要操作这个平方运算，直到计算完所有元素。

二、声明式编程

声明式编程声明想要达到什么目的，但是不指定具体做的步骤。 做晚饭，怎么做，做什么饭菜，那是保姆的事，做好了我尽管吃就是了。

// 声明式关注做什么（what）

var num = [1,2,3,4,5]

var square = num.map(function(n) {
  return n * n
})
console.log(square) //=> [1,4,9,16,25]

map 函数所作的事情是将直接遍历整个数组的过程归纳抽离出来，让我们专注于描述我们想要的是什么(what)。

相对比而言，声明式编程

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

Reference

React 核心思想之声明式渲染