函数式编程——为什么现在主流的前端框架都开始使用函数式编程

已于 2022-04-23 15:47:37 修改
阅读量1.4k 收藏
点赞数
分类专栏： js vue 文章标签： javascript vue.js reactjs angular
于 2022-04-23 13:25:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xliang111/article/details/124362734
版权
js 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

在这里插入图片描述

一、编程方案分类

1、面向过程-先做这个，在做那个，然后做什么
2、面向对象-把功能组织成对象，然后想着操作作为对象的方法
3、函数式编程-把功能分解为一系列独立的函数，通过函数间互相调用来完成功能

二、为什么用函数式编程

1、函数式编程能提高复用性和可扩展性
2、完美贴合Tree-shaking：通过文档流的引入，判断是否使用某个方法，从而减少代码体积，而面向对象的编程方案无法记录；这也是为什么现在的前端框架都开始使用函数式编程的最主要原因
3、JS对于面向对象的实现不太好，所以为什么我们要使用对我们前端不好的方向，而不去拥抱我们前端最擅长的方向

三、如何写好函数式编程

1、保证纯函数-一个函数的返回结果只依赖于他的参数，同样的输入必定有同样的输出
2、减少函数副作用-函数副作用就是，会影响外部的数据，如全局变量

9级浪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【我的前端】面向 JavaScript 开发：前端必学的4种函数式编程技术
生产队的刘同学
08-31 661
函数式编程技术是现代 Wed 开发中的热门话题，欢迎大家学习~
vue3为什么是函数式模式
weixin_38222276的博客
06-02 162
组合大于继承 组合好处是便于扩展， 优点是灵活的扩展性 缺点是，函数之外要些一些代码 继承的缺点，父类发生更改，所有子类都会更改。 继承相当于堆积木，组合相当于拆积木
前端开发之函数式编程实践
JNPF快速开发平台的博客
05-15 171
1、ES6中的map、filter、reduce等函数2、React类组件 -> 函数式组件+hooks、Vue3中的组合式API3、RxJS、Lodash和Ramda等JS库4、中间件/插件，如Redux中的applyMiddleware中间件实现函数式编程是一种编程范式，它将程序抽象为函数和数据结构，通过函数调用来实现程序的功能，并且函数可以作为参数传递给其他函数。在 JavaScript 中，函数式编程可以实现面向对象编程的一些功能，比如抽象、封装、继承和多态等。
为什么纯函数式编程无法成为主流？
极道Jdon的技术博客
06-19 227
编程可以从冯诺依曼风格中解放出来吗？使用一种函数式风格及程序代数替代它？冯诺依曼风格是一种语句与表达式的编程风格，而函数式编程风格是建立在使用组合形式创建程序的基础上。这和哲学观有关了，也许宇宙是基于状态的，而不是基于函数的。 编程语言是为了代表现实，并根据您的意愿操作它：面向对象和过程编程都使用函数来操作状态。 而在纯函数式语言中，您使用函数和未命名的变量来呈现状态。 问题是当你相互调用程序时，你总是用状态而不是函数来进行调用。从 API 到存储数据，因为它允许...
linux 函数式编程,函数式编程为何越来越受到重视
weixin_36228334的博客
05-07 104
本帖最后由 robin 于 2014-4-9 14:02 编辑 函数式编程受到越来越多的关注，软件架构师Neal Ford分析了其中的原因。Neal Ford首先强调，函数式编程的特点之一是存在强大的抽象，它隐藏了许多日常操作的细节(比如迭代)。用抽象来处理迭代等任务，使得需要维护的代码变得更少，因此可能出现错误的地方也就更少。Java 开发人员习惯于框架 级别的重用；在面向对象的语言中进行重用所...
主流编程语言优劣考共13页.pdf
11-13
它以面向过程编程为主，强调函数作为程序的基本单位，具有以下特点： 1. **优点** - 面向过程：以函数为中心，简洁高效。 - 靠近硬件：提供了对机器的直接控制，执行效率高。 - 通用性：C语言编写的库广泛应用于...
cs50w2020:CS50的使用Python和JavaScript进行Web编程（2020）
03-16
【标题】"CS50w2020:CS50的使用Python和JavaScript进行Web编程（2020）" 提供了一个深入学习Web开发的课程，它结合了两种主流的编程语言——Python和JavaScript，帮助学生掌握构建现代Web应用的基础技能。...
frame-sourceCode:如市面主流的框架：Jquery，Vue，源代码解读
03-23
本主题将深入探讨两个广为使用的JavaScript框架——jQuery和Vue，通过源代码解读，我们可以更好地理解它们的工作原理，从而提升我们的编程技能。 **jQuery源代码解读** jQuery自2006年诞生以来，一直是前端开发的...
百度前端研发笔试卷-教程与笔记习题
05-18
5. **前端框架**：考虑到百度的技术栈，可能会涉及React、Vue、Angular等主流框架的基础知识和应用。 6. **版本控制**：Git的使用是现代开发流程中的基本技能，可能会有版本控制相关的问题。 7. **性能优化**：...
前端开源库-rapydscript-ng
08-29
**前端开源库——Rapydscript NG：Pythonic JavaScript的优雅解决方案** 在现代Web开发中，前端库和框架扮演着至关重要的角色。它们为开发者提供了更高效、更易维护的工具，以构建交互性强、用户体验良好的Web应用...
为什么函数式编程在Java中很危险？
12-22
摘要：函数式编程这个不温不火的语言由来已久。有人说，这一年它会很火，尽管它很难，这也正是你需要学习的理由。那么，为什么函数式编程在Java中很危险呢？也许这个疑问普遍存在于很多程序员的脑中，作者Elliotte对此发表了一些见解，我们一起来看看他是怎么说的。 　　在我的日常工作中，我身边的开发者大多是毕业于CS编程院校比如MIT、CMU以及Chicago，他们初次涉及的语言是Haskell、Scheme及Lisp。他们认为函数式编程是一种自然的、直观的、美丽的且高效的编程样式。但奇怪的是，我和我的同事并没有为Haskell、Scheme、Lisp、Clojure、Scala而编程，这个行业
函数式编程 - 实现响应式框架
weixin_33858249的博客
10-18 141
前言 函数式响应式编程框架我们应该也用得比较多了，如ReactiveCocoa、ReactiveX系列(RxSwift、RxKotlin、RxJava)，这些框架内部实现都是基于函数式编程的思想来构建的。还记得前不久面试的时候面试官有问道:“有阅读过ReactiveCocoa的源码吗？有没有看过其中的核心函数bind？你知道这个函数如何实现的吗？”。在回答这个问题时，如果面试者只是单纯的看过RAC...
js框架开发之旅--函数式编程
iteye_8029的博客
10-16 105
函数式编程首先让人想到了面向过程过程编程。自从面向对象的编程出现之后，面向过程编程也只有在编程入门的教程中才能用的到。 让我们先看一下函数式编程的特点： 专注于解决具体问题。 把函数作为一等公民，并且可以作为变量来使用。 避免数据的声明和变化。 想Erlang和Haskell都是函数式编程语言。js不是严格的函数式语言，但是比起Ruby，Python和Java它包含有更多函数式编程的特性。...
函数式web框架
weixin_30493401的博客
09-08 108
函数式web框架 转载于:https://www.cnblogs.com/stormy/p/11488266.html
快速了解函数式组件为什么比对象类组件性能更加优秀
qq_37174991的博客
08-02 711
函数式组件和普通对象类组件的差异
好书丨为什么函数式编程最近才崛起
程序人生的博客
06-14 5923
点击上方“程序人生”，选择“置顶公众号”第一时间关注程序猿（媛）身边的故事小贴士参与文末话题讨论，有机会获得赠书~导语：函数式编程并不是新概念，实际上，在计算机科学出现之...
&&前端&&函数式编程
men_shuangshuang的博客
11-13 324
函数式编程是一种方案简单、功能独立、对作用域外没有任何副作用的编程范式。 1）功能独立——不依赖于程序的状态（比如可能发生变化的全局变量）； 2）纯函数——同一个输入永远能得到同一个输出； 3）有限的副作用——可以严格地限制函数外部对状态的更改。 函数式编程术语 Callbacks 是被传递到另一个函数中调用的函数。 你应该已经在其他函数中看过这个写法，例如在 filter 中，回调函数告诉 JavaScript 以什么规则过滤数组。 函数就像其他正常值一样，可以赋值给变量、传递给另一个函数，或从其它函数返
编程语言的发展趋势及未来方向（3）：函数式编程
weixin_34362991的博客
05-06 138
这是Anders Hejlsberg（不用介绍这是谁了吧）在比利时TechDays 2010所做的开场演讲。由于最近我在博客上关于语言的讨论比较多，出于应景，也打算将Anders的演讲完整地听写出来。在上一部分中，Anders阐述了他眼中声明式编程的理念及DSL，并演示C#中一种内部DSL的形式：LINQ。在这一部分中，Anders谈及了声明式编程的另一个重要组成部分：函数式编程，并使用.NET平...
函数式编程的数据结构
细雨潜行
08-27 1020
概述 常用数据结构容器类型 序列Seq 序列之List 序列之Vector 常用操作 概述 面向对象语言通常为各个领域建立对等类来实现其业务，而函数式编程则倾向于使用核心数据结构和算法来实现业务逻辑。 通常数据结构被定义为：相互之间存在一种或多种特定关系的数据元素的集合。也即，Data_Structure=(D, R)，其中D为数据的有限集，而R则为关系的有限集。
基于react用函数式编程封装一个前端打印模板
最新发布
05-26
首先，我们需要安装一个库来帮助我们在前端打印模板。我推荐使用 react-to-print 库，它可以将 React 组件转换为可打印的 HTML。 ```sh npm install react-to-print ``` 接下来，我们可以编写一个简单的组件来展示打印内容。这个组件将在页面上显示一个按钮，当用户点击该按钮时，它将打印一个预定义的文本。 ```jsx import React from 'react'; import { useReactToPrint } from 'react-to-print'; function PrintTemplate() { const componentRef = React.useRef(); const handlePrint = useReactToPrint({ content: () => componentRef.current, }); return ( <div> <h1>打印模板</h1> <p>这是一个可打印的模板。</p> <button onClick={handlePrint}>打印</button> <div style={{ display: 'none' }}> <div ref={componentRef}> <h1>打印模板</h1> <p>这是一个可打印的模板。</p> </div> </div> </div> ); } export default PrintTemplate; ``` 在这个组件中，我们使用了 `useReactToPrint` 钩子来创建一个函数，该函数在用户点击按钮时触发打印。我们还使用了 `useRef` 钩子来获取要打印的内容的引用，并将其传递给 `useReactToPrint` 函数。 最后，我们在页面上渲染了一个按钮和一个隐藏的 `div` 元素，该元素包含要打印的内容。当用户点击按钮时，`useReactToPrint` 函数将调用 `content` 属性中的函数，并将其传递给 `printJS` 库来打印。 这就是一个基于 React 和函数式编程的前端打印模板。你可以根据自己的需要修改它来满足你的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值