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()的具体功能.只是从代码特点上来说:声明式编程就是函数编程思想的一种.其实就是凸显了函数式编程的声明性.

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

原文地址:https://www.cnblogs.com/Shyno/p/11083517.html

时间: 2024-10-14 01:35:32

react特性-声明式编程的相关文章

React初探之React特性

一.声明式开发 与原生DOM.JQuery等命令式编程不同 不通过指令来控制视图变化,是面向数据的编程 通过控制数据,改动数据的方式控制视图的变化,DOM的部分React会帮你自动构建 二.可以与其他框架并存 `ReactDOM.render(<TodoList />, document.getElementById('root'));` 如上,React只控制index.html中id=root部分dom的渲染,其他部分不作控制 可被兼容到其他框架中(只要其他框架不影响它) 三.组件化 每一

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

前言 关于Hook的定义官方文档是这么说的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 简单来说,就是在使用函数式组件时能用上state,还有一些生命周期函数等其他的特性. 如果想了解Hook怎么用,官方文档和阮一峰的React Hooks 入门教程都讲得很清楚了,我建议直接看官方文档和阮大神的文章即可. 本篇博客只讲为什么要用React的Hook新特性,以及它解决了什么问题. 为什么使用Hook?

React(^16.8) 新增特性Hook

Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. hook包含以下函数:useState, useEffect, useContext, useReducer, useMemo, useRef等.引入方式: import {useState, useEffec ...} from 'react'; 1. let [参数名称, 修改参数的方法名] = useState(参数默认值); import React,

前端框架Vue、angular、React的优点和缺点

学习web前端开发中,会有很多的框架,那么目前流行的框架有哪些呢? 一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库. Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统. Vue.js的特性如下:    1.轻量级的框架    2.双向数据绑定    3.指令    4.插件化 优点: 1. 简单:官方文档很清晰,比 Angular 简单易学.  2. 快速:异步批处理方式更新 DOM.  3. 组合:用解

vue,react,angular

一.Vue.js:     其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库.     Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组件系统.     Vue.js的特性如下:    1.轻量级的框架    2.双向数据绑定    3.指令    4.插件化    优点: 1. 简单:官方文档很清晰,比 Angular 简单易学.  2. 快速:异步批处理方式更新 DOM.  3. 组合:用解耦的.可复用的组件组合你的应用程序.

React Hooks简单业务场景实战(非源码解读)

前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 注意:React 16.8.0 是第一个支持 Hook 的版本.升级时,请注意更新所有的 package,包括 React DOM.React Native 将在下一个稳定版本中支持 Hook. 如果说promise是JavaScript异步的终极解决方案,那

React 顶层 API

概览 组件 使用 React 组件可以将 UI 拆分为独立且复用的代码片段,每部分都可独立维护.你可以通过子类 React.Component 或 React.PureComponent 来定义 React 组件. React.Component React.PureComponent 如果你不使用 ES6 的 class,则可以使用 create-react-class 模块来替代.请参阅不使用 ES6 以获取更多详细信息. React 组件也可以被定义为可被包装的函数: React.memo

react hook的todolist

感觉好长时间没写博客一样,app.js代码 import React from 'react'; import { useState } from 'react'; function App() { const [input, setInput] = useState(''); // const [inputList, setInputList] = useState([]); // let submitData=()=>{ let arr=[] arr.push({ value:input }

React Hooks的999999个好处

最近前几个月开始,新项目都开始完全使用typescript+hooks,先不说typescript吧,hooks是真的香?? 1.更好的分离页面和逻辑,重用逻辑的方法 现在前端项目的组件化,一般都是基于最基础的UI组件库(里面也有组件的功能逻辑),加上业务逻辑,封装一个个component,container. 组件是 UI + 逻辑的复用,但逻辑复用能力等于 0. 而在项目中,很难做到轻松的把 UI 和逻辑分开.(这里的逻辑并不是简单的能抽离的那种工具函数).在此之前,React有Mixin(