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特性-声明式编程的更多相关文章
- Vue于React特性对比(三)
最近重学React,再次和vue做了对比. 一,为官方插件提供便利的第三方插件横行 React仅仅是一个ui框架.虽然官方提供了redux,react-router:但也有第三方的redux-thun ...
- React 特性剪辑(版本 16.0 ~ 16.9)
Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf ...
- Vue于React特性对比(二)
一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...
- Vue于React特性简单对比(一)
一,对象实体对比 vue的对象实体依然是html,而react的对象实体已经变味jsx,一种新的语法结构. vue的html与react的jsx都可以进行拆分,拆分成更细小的组件,组件之间可以传值. ...
- Vue于React特性对比(四)
新开了一个vue的项目,从vue单页面框架搭建到单点登录接入都是自己负责搞的.然后准备将这套东西迁移到react上.然后有了这篇文章. 1,reactjs分环境打包明显要比vue更为麻烦 vue修改的 ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
- 关于为什么使用React新特性Hook的一些实践与浅见
前言 关于Hook的定义官方文档是这么说的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 简单来说,就是在 ...
- React函数类组件及其Hooks学习
目录 函数类组件 函数式组件和类式组件的区别: 为什么要使用函数式组件? Hooks概念及常用的Hooks 1. useState: State的Hook 语法 useState()说明: setXx ...
- vue,react,angular
一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库. Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...
随机推荐
- C++模板的特化与偏特化
http://cppblog.com/SmartPtr/archive/2007/07/04/27496.html (1) 类模板定义一个栈的类模板,它可以用来容纳不同的数据类型 template & ...
- python字符串截取
python字符串截取 str = 'abcd' str[0:-1],-1表示末尾开始的位置,但是[]操作符不取尾下标所对应的字符: 所以str[0:-1] ---->‘abc' str[0:1 ...
- LeetCode 三数之和 — 优化解法
LeetCode 三数之和 - 改进解法 题目:给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复 ...
- LeetCode 788. Rotated Digits (旋转数字)
X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...
- 利用jQuery Ajax技术实现每隔5秒向某页面传值
有时候我们须要每隔一段时间向某页面传值,比方说聊天室,每隔几秒就像数据库处理页面传值并取回,然后显示在聊天窗体.又或者是每隔一段时间就查询用户最后发言时间到如今是否间隔2分钟.假设是则将用户退出. 这 ...
- 【敬业福bug】支付宝五福卡敬业福太难求 被炒至200元
016年央视春晚官方独家互动合作伙伴--支付宝,正式上线春晚红包玩法集福卡活动. 用户新加入10个支付宝好友,就可以获成3张福卡.剩下2张须要支付宝好友之间相互赠送.交换,终于集齐5张福卡就有机会平分 ...
- 【Spark】Stage生成和Stage源代码浅析
引入 上一篇文章<DAGScheduler源代码浅析>中,介绍了handleJobSubmitted函数,它作为生成finalStage的重要函数存在.这一篇文章中,我将就DAGSched ...
- 让mongodb执行js文件
环境: Linux js代码: 循环删除表中的数据: clear-mongodb-dialog.js print('=========BEGIN=========='); for(var i of [ ...
- UVA1601 The Morning afther Halloween
题目大意 w h (w, h <= 16)的网格有 n ( n <= 3) 个小写字母(代表鬼)其余的是‘#’(代表障碍格) 或 ‘ ’(代表空格. 要求把他们移动到对应的大写字母里.每步 ...
- RK平台Android4.4 添加一个新的遥控器支持以及添加特殊按键【转】
本文转载自:http://blog.csdn.net/coding__madman/article/details/52904063 版权声明:本文为博主原创文章,未经博主允许不得转载. 瑞芯微平台 ...