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

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特性-声明式编程的更多相关文章

  1. Vue于React特性对比(三)

    最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...

  2. React 特性剪辑(版本 16.0 ~ 16.9)

    Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf ...

  3. Vue于React特性对比(二)

    一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...

  4. Vue于React特性简单对比(一)

    一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...

  5. Vue于React特性对比(四)

    新开了一个vue的项目,从vue单页面框架搭建到单点登录接入都是自己负责搞的.然后准备将这套东西迁移到react上.然后有了这篇文章. 1,reactjs分环境打包明显要比vue更为麻烦 vue修改的 ...

  6. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

  7. 关于为什么使用React新特性Hook的一些实践与浅见

    前言 关于Hook的定义官方文档是这么说的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 简单来说,就是在 ...

  8. React函数类组件及其Hooks学习

    目录 函数类组件 函数式组件和类式组件的区别: 为什么要使用函数式组件? Hooks概念及常用的Hooks 1. useState: State的Hook 语法 useState()说明: setXx ...

  9. vue,react,angular

    一.Vue.js:     其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库.     Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...

随机推荐

  1. MVC之查询demo

    上篇已经说过怎样建立MVC项目.这次主要讲述样例的实现. 其基本的功能就是从数据库中查询一些基本信息. 前边我们已经将实体引入到了项目中,这时Model目录中已经出现了我们建立的newsSystem. ...

  2. 【Cocos2dx游戏开发】Cocos2d-x简介

    一.简介 最近在做一个Android下的卡牌游戏--<九州幻想>开发项目,而我们使用的引擎是Cocos2dx,所以想要写写笔记来记录一下项目中的收获.当然首先稍微介绍一下Cocos2d-x ...

  3. 在InternetExplorer.Application中显示本地图片

    忘记了,喜欢一个人的感觉 Demon's Blog  »  程序设计  »  在InternetExplorer.Application中显示本地图片 « 对VBS效率的再思考——处理二进制数据 Wo ...

  4. phpstorm安装和调试

    首先: phpstorm是用JAVA开发的,所以在安装之前须要先安装jdk sudo apt-get install default-jdk 从官网上下载phpstorm 的linux版本号 http ...

  5. Linux下一款可以使用命令行的pdf阅读器

    Zathura是linux下一款用命令行控制打pdf阅读器,并且基本打使用方法和vim很相似.对于喜欢键盘操作的用户来说的确是一个不错的选择. ubuntu下的安装命令: sudo apt-get i ...

  6. Android MaoZhuaWeiBo 好友动态信息列表数据抓取 -3

    前面2篇把大致的开发说的几乎相同了,接下来说说粉丝动态消息列表或时间线数据的抓取与解析显示,我将他所有写在了一个 类里.并以封装类对象的形式存储数据.以下看看基本的服务代码: 粉丝动态消息列表数据抓取 ...

  7. Levenberg–Marquardt algorithm

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFubWVuZ3dlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  8. 批量将网页转换成图片或PDF文档技巧分享

    工作中我们有时要将一些批量的网页转换成图片或者PDF文档格式,尽管多数浏览器具有滚动截屏或者打印输出PDF文档功能.可是假设有几十上百张网页须要处理,那也是要人命的.所以我一直想找一款可以批量处理该工 ...

  9. java反射中getDeclaredMethods和getMethods的区别

    getDeclaredMethods()          返回 Method 对象的一个数组,这些对象反映此 Class 对象表示的类或接口声明的所有方法,包括公共.保护.默认(包)访问和私有方法, ...

  10. git subtree 拆分split repository

    subtree出现,是为了取代submodule http://wenku.baidu.com/link?url=ola85Z5tIXJpxCjLTk-dcO81ayXLs68_y6dsmXIa0ni ...