react特性-声明式编程

Posted shyno

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react特性-声明式编程相关的知识,希望对你有一定的参考价值。

网络上有很多关于声明式编程和命令式编程的对比和说明,但是大多都是大同小异,总的来说就是一句话"告诉电脑我要做什么,但是让电脑自己决定怎么做."

1.命令式编程.

   这种编程模式比较常见,也是我们比较好理解的方式.它把完成某个需求的每一步都充分展示出来了,一步一步地指挥计算机做事情.

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

var newArray = []

for(var i = 0; i < array.length; i++) 

  var newNumber = array[i] -1
  newArray.push(newNumber)


console.log(newArray) //=> [0,1,2,3,4]

特点:在执行完之前,计算机并不知道我要做什么,为什么这么做.它只是一步一步地执行了.

2.声明式编程.

  区别于命令式编程,它的特点就是我告诉计算机做什么,但是没有告诉你怎么做.

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

var newArray = array.map(function(n) 

  return n -1
)
console.log(array) //=> [0,1,2,3,4]

 我只告诉计算机,你执行这个map函数就好了,至于我要干嘛我不告诉你,具体怎么做也不告诉你.

3.思路对比.

如果还是不清楚,那我再拿个案例来分析.

命令式编程---------------
var
array = [1,2,3,4,5] var total = 0 for(var i = 0; i < array.length; i++) total *= numbers[i] console.log(total) //=> 120

声明式编程-----------------------
var array = [1,2,3,4,5]

var total = array.reduce(function(sum, n) 

  return sum * n
);
console.log(total) //=> 120
 

说明:相比于命令式编程,声明式编程最大的特点是没有"if"、"for"这类的控制语句,而是直接给一个函数,并且声明一个变量接收函数执行结果,让计算机把数据当作参数放进去执行一遍就行了.

 

4.统一性

到目前为止,很多人说这两个编程范式是对立的.我觉得这并不准确,并不是说声明式编程的思想是尽可能少的代码实现,那命令式就尽可能多.这并不严谨,那如何理解他们的关系呢?

仔细看上面代码对比,你发现差别就是在红色字体处.假如:

先声明一个函数:
function reduce(array,total)
for(var i = 0; i < array.length; i++) 

   total *= numbers[i]
return total

命令式编程--------------- var array = [1,2,3,4,5] var total = 0
var total = reduce(array,total); console.log(total) //=> 120

如果不看函数的声明,是不是很像声明式编程?如果把reduce函数给array的原型,从代码形式上就更像了.当然,我们这里不讨论array.reduce()的具体功能.只是从代码特点上来说:声明式编程就是函数编程思想的一种.其实就是凸显了函数式编程的声明性.

 

结论:声明式编程就是拿来主义,拿已经封装好的纯函数来实现目的.但是实际上执行的步数不见得会比命令式的代码少,有时候甚至会更多.但是,由于这些纯函数有极强的稳定性,所以程序员根本不用考虑内部的具体实现过程.极大地减少了身心负担.

 

以上是关于react特性-声明式编程的主要内容,如果未能解决你的问题,请参考以下文章

[react] 说说你对声明式编程的理解?

React初探之React特性

react 面试指南

前端React面试题总结

前端React面试题总结

React不是真正的响应式编程,Svelte才是