Absorbed_zhang-CSDN博客

原创 react梳理之Hooks(二)

昨天没有梳理完的今天接着梳理userContext()userReducer()useMemo()useCallback()4. userContextuserContext的作用userContext就是context的接收方式不同,在前边的react传值梳理中我们就已经说过,有一种方式就是context传值,context在react中就如字面含义一样,是我们react使用中的一种容器,通过React.createContext来创建一个容器ContextObj,容器作为标签Co.

2022-03-30 02:08:19 344

原创 react梳理之Hooks

梳理的知识点按时间线来的,在16.8之前,react的函数式组件还只是一个函数式组件,局限性非常的大,但是在17以后就再也不同了,react的函数式组件真正的翻身农奴把歌唱了,因为拥有了’外挂’,也就是Hooks,react的hooks,也就是钩子,作用就是在函数式组件内部把需要的功能钩进来,来完成一些像是钩子函数像是状态一样之前无法使用的东西Hooksreact的hooks其实就是内置功能性函数的使用,新版本的react有一些内置的函数,可以在函数式组件中去使用,究其根本其实就是应用一些比如于闭包.

2022-03-28 23:36:41 538

原创 react梳理之react-redux

我们上一篇文章梳理了flux的架构模式和redux,这章我们来梳理react-redux.顺便补充一下redux开发过程中的规范或者说惯例一.actionsType.js的补充在上个章节中我们说actionsType.js只是为了代码美观和报错,实际上这个确实只有这两点用途,但是我们没有说具体原因代码美观:我们在进行dispatch的时候会传递一个type,上一篇也说了这是规范,调用必须这样,那我们这个type传递的字符串会越来越多,因为我们代码逻辑复杂之后我们的dispatch会非常的多,那我.

2022-03-27 06:11:37 328

原创 react梳理之redux

react状态管理,其实可以用很多东西,flux和react一同和facebook成长起来,但是flux数据模式是可以和react区分开来理解的,flux前端架构模式有很多应用的工具,我们既然是react梳理,我们就梳理一下redux和redux-react,有一些不了解的人会觉得,这俩不是一样的东西吗,不一样哦,看起来一样,实际上不一样的,redux-react看名称就知道是适用于react的,但是redux是适用于所有地方的一. 什么是fluxFlux的核心思想就是数据和逻辑永远单向流动众所.

2022-03-26 05:46:14 1021

原创 react梳理之组件通信(传值)

react组件的通信属于开发基础知识,今天来梳理一下,当然rudex还按老规矩排除在外,如同上篇文章的hooks一样,单独梳理一.react组件常用的通信情景父子组件通信兄弟组件通信(非父子组件)1.父子组件通信props传值props传值算是react中最基本的传值方式,如果使用或者学习过vue的会了解到,props也是vue的父子组件基本的传值方式,通过父组件使用子组件的时候绑定值,在子组件中接收props值来完成,props是一个对象,对象内接收了父组件通过键值对方式传递的值,在.

2022-03-23 00:54:32 3102

原创 react梳理之函数式组件

函数式组件的基本意义就是,组件实际上是一个函数,不是类一.react的类组件前端概念中的类前端中实际上是没有类也没有继承的,但是我们后来也有了前端独有的一种类的模式,实际上我们都知道是语法糖class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; .

2022-03-21 23:34:48 2721

原创 react梳理之(非)受控组件

react开始梳理,不会从最基本的创建一个react项目开始,只是梳理一些概念,今天简单梳理一个较为简单的概念,就是受控组件与非受控组件一.react的非受控组件1.什么叫非受控组件我们从两个字入手,那就是组件,受控与非受控是从组件的角度出发来说出的概念,字面意思就是组件时不被控制的,不被谁控制,当然是不被父组件控制,那么不受控制的组件有什么特性,就是一切逻辑只与自身有关,与其他的组件没有通信与交集在HTML当中，像,, 和这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中.

2022-03-21 22:53:48 1664

原创 vue与react的diff算法

我们都知道的一件事,就是vue和react框架,核心算法都是diff算法,啥叫diff算法可能有一部分人都是没有深究的,今天梳理一下vue和react的diff算法,也说一下有啥区别什么叫虚拟dom,就是原本我们在页面上展示的dom结构叫做dom树,我们把数据和将要渲染的代码模拟dom结构生成的对象类型的数据结构,就叫虚拟dom树,将真实的DOM的数据抽取出来，以对象的形式模拟树形结构,我们先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个.

2022-03-20 09:06:46 7202 1

原创 webpack梳理之babel(.babelrc)

我们前端开发对于babel应该都是非常熟悉的,当然了,也有可能现时下会有一些不熟悉的人,随着互联网的发展,很多人用到的都是架构组或者进部门以前已经撸好的框架,脚手架肯定也都是完善的,那么有一部分人如果刚入行就直接空中楼阁去做业务的话,那还真有可能链bable都不太了解本来是在梳理loader的时候把babel-loader的配置一笔带过了,但是我后来发现,可能有人不知道babel的原理,所以还是梳理一下,算是查漏补缺1.什么是babelbabel本质上就是编译器,或者通俗点讲就叫翻译软件,能力.

2022-03-19 03:31:32 1213

原创算法梳理之时间空间复杂度

算法优劣是有专门的标准的,这些其实大学中都有学过,也不是很难,就是时间复杂度和空间复杂度,来精确描述出一个算法在耗费时间和耗费空间上的优劣一.时间复杂度时间复杂度的计算其实不是真正算法执行的时候所用的时间,因为我们在不同的环境中执行相同的代码,因为硬件的不同导致我们运行的环境差异,从而导致同样的计算方法可能得出不同的结论,更往底层追究的话,其实就算完全一样的硬件也不会每次都完完全全一样的时间,所以我们时间复杂度的计算其实是从代码执行的次数来看的,这样就能更公平的看出算法的优劣了不管怎么说,我们还.

2022-03-17 23:38:08 361

原创算法梳理之排序

前言:我一直在犹豫要不要做一些算法的梳理,因为什么犹豫呢,就是因为算法与前端的重要性而言,其实没有那么重要,为什么,前端是展示在用户直面的区域的,那么前端实际上是要尽量优化一些计算的,前端也不善于处理数据,这根本原因在于我们的引擎是内嵌在浏览器的且注定我们只能去单线程跑代码逻辑前端有很多的优越性,例如展示,这也是前端的核心,但是前端其实也有很多的局限性,这就导致了我们会尽量的去优化代码,减少代码量减少请求减少计算我一直认为当一个前端把能抛弃的东西全部抛弃只做展示来用的时候才是最优的,当然随着前端的发.

2022-03-17 02:50:47 150

原创 webpack梳理之常用plugin(优化)

常用pluginclean-webpack-pluginpurifycss-webpackDLLPluginIgnorePlugin1.clean-webpack-plugin这个插件,总体来说是用于每次打包之前删除dist文件夹内上次打包的内容的,打包没那么只能,他是不能自主判断你两次打包是否是重复的是否是需要重新来打包的,特别是你用了哈希值这样的文件后缀之后,话说回来,这个插件踩坑的人可算是不少,满坑满谷的都是踩坑的,我预估是之前的官方文档可能有问题,但是现在npm文档已经没有问题了,

2022-03-16 00:45:20 1046

原创 webpack梳理之常用plugin(一)

loader梳理完毕,虽说不太满意但是我会在后续的梳理中把没说到的东西补一些,今天开始梳理常用plugin,今天先从项目中正在使用的开始梳理常用pluginhtml-webpack-pluginuglifyjs-webpack-pluginmini-css-extract-pluginoptimize-css-assets-webpack-plugin1.html-webpack-pluginhtml-webpack-plugin在官方文档中的解释是简化了 HTML 文件的创建，以.

2022-03-15 00:08:23 2647

原创 webpack梳理之常用loader(二)

昨天梳理了webpack的常用loader没有完全梳理完毕,今天梳理剩下的常用loader目录9.url-loader10.html-withimg-loader11.vue-loader12.eslint-loader13.json-loader14.script-loader15.markdown-loader16.cache-loader常用loader使用9.url-loaderurl-loader 功能类似于 file-loader，但是在文件大小小于options内.

2022-03-13 03:06:51 882

原创 webpack梳理之常用loader(一)

我们知道webpack的基本配置和四个配置的核心概念之后,其实远远不够,我们需要知道常用的loader都有什么能力,不然真的遇到问题之后,连常用loader都不了解,全靠网上去搜索,是很麻烦的一件事,就像是解决问题可以,但是也要知道解决问题的门路,不需要背下来,但是一定要对很多loader有所印象有所了解常用loader目录1.style-loader2.css-loader3.sass-loader4.postcss-loader5.babel-loader6.ts-loader7..

2022-03-12 03:09:58 3088

原创 webpack梳理之基本配置

webpack实际上我觉得很多人都是,会用,会配,但是来点系统的知识,也懒得记也记不住,我也是这样,会用,但是实际上并没有什么系统性的梳理过,那我觉得还是要挑战一下的,慢慢的从头梳理一下下,可能会有差错,希望看到的可以毫不犹豫地指出来,毕竟我也是菜狗,谢谢谢谢1.webpack概念(1) 什么是wabpack本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(depende.

2022-03-11 01:11:25 1326

原创梳理过程联想到的函数柯里化

函数柯里化网上的解释是:柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。我的理解是,柯里化就是分步执行逻辑,传入参数进去会执行此次调用的逻辑且返回下次逻辑调用的函数,这样的方式能够是使我们一连串的逻辑分布执行完毕,甚至是在第一步执行完毕之后执行很多其他的代码逻辑之后,再接着执行下一步逻辑柯里化极简例子var add = function.

2022-03-09 23:13:31 162

原创设计模式梳理之适配器模式

适配器模式，将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器概念什么是适配器,还是从名称本事出发去理解,前边我有说过,设计模式的名称其实就是设计模式中心思想的总结,适配器,用来做适配的东西,为什么做适配呢,为原来两个不匹配的东西做适配,方式是怎样的呢,用最形象的一个比喻来说,就是转接头举个栗子:我有一个装修良好的屋子,里边设施一应俱全,我开始打扫卫生,借用了一个邻居的吸尘器,邻居很奇葩,是一个极其离谱且无聊的"发明家",.

2022-03-09 22:25:29 161

原创设计模式梳理之装饰器模式

其实每个设计模式的名字都非常准确的表达了中心思想,装饰器模式,那中心思想就是装饰,装饰什么呢,装饰我们原有的类或者方法,使类和方法拥有更多的能力和可能性,完成一些原本没能力完成的事情,或者说把原本的事情完成的更出色我们看下装饰器模式的定义:装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装。基础装饰器装饰器,作为装饰,要做的就是要锦上添花,有的人会问,那我继承下来超类,自己再添加一些.

2022-03-09 03:53:30 270

原创设计模式梳理之单例模式

单例模式,从字面意思来看,比较容易理解,单个实例的模式,这也是单例模式的主要思想,思想大概主题时限制一个类只能有一个实例化对象,大概意思就是,通过判断来分析是否存在实例化对象,存在则返回已实例化的对象,如果不存在则实例化且返回对象,但是也并不是所有的单例模式思想都要从构造函数观点出发,不是实例也可以体现出单例模式的优点基础单例模式这里说的基础的单例模式实际上与网上大部分文章讲的不一样其实不从类出发,更容易理解,这里说一下单例模式的主要优点,第一个优点就是,解决全局变量的污染,我们在开发的过程中,.

2022-03-07 23:09:35 574

原创设计模式梳理之代理模式

梳理总是由易到难,代理模式又是不难理解的一种模式,因为做前端的小伙伴都是常用代理,那今天梳理一下所谓的代理模式什么是代理模式代理模式我们十分常见,不光说我们生活中所见的所谓的代理模式,经纪人,秘书,律师,包括投资经理,都属于是代理模式的体现,再看我们代码中实际体现的,host,服务器代理i请求,vue双向绑定的核心,VPN工具,这些都属于代理,那么代理身上有什么样的共性呢,那就是为一个对象找一个替代对象，以便对原对象进行访问,至于为什么要有一个替代对象,我们从上述的例子出发来看,为什么有经纪人秘书投.

2022-03-06 23:52:48 102

原创设计模式梳理之原型模式

这篇实际上应该叫做,“原来原型也算模式”原型模式,这个东西其实能完全吃透原型链的都很容易理解,我们先说一下js的原型链原型链1.万物皆对象js从古老的流传就有一句话叫万物皆对象,但是都是对象,那能一样吗,肯定不一样,我们可以区分为普通对象和函数对象对象我们都知道,啥叫函数对象,顾名思义,你看到的所有的函数都叫函数对象,但是其实不仅如此,准确来说,new Function出来的都是函数对象,有人就问了,我创建一个函数直接function fun(){},那也没new啊,你没new,有人替你ne.

2022-03-05 02:52:17 463

原创设计模式梳理之观察者模式

观察者模式的基本概念:目标和观察者是基类，目标提供维护观察者的一系列方法，观察者提供更新接口。具体观察者和具体目标继承各自的基类，然后具体观察者把自己注册到具体目标里，在具体目标发生变化时候，调度观察者的更新方法。观察者模式是不是看着糊里糊涂的,一般人不太喜欢看太过专业的术语来理解文本内容,那我们就通俗的说一下观察者模式故名思意就是观察,我自己去看着某个东西的某种变化,举个例子,我看着我正在炸的面丸子,看是否熟了,那这里我自己就是观察者,面丸子就是被观察者,那么大家是不是可以同时观察,我爸妈都过.

2022-03-04 00:21:37 208

原创设计模式梳理之工厂模式

工厂模式是一种用来创建对象的设计模式。我们不暴露对象创建的逻辑,而是将逻辑封装在一个函数内,那么这个函数可以成为工厂。工厂模式根据抽象程度的不同可以分为：1.简单工厂 2.工厂方法 3.抽象工厂

2022-03-02 23:30:38 373

原创 “vue3.0梳理“之Web Components

Web Components跟vue3.0没有什么关系,但是为什么我放在了vue3.0的梳理之中,是因为在vue3.0出现的时候,我是看vue3.0的文档才发现的这个东西,可能是跟我学习面不够广有关,我在之前没有关注到这个东西,今天梳理这个也更多是流于概念,实用性不高,但是很重要1.Web Components是什么Web Components 是一套技术，允许创建可重用的定制元素（封装在代码之外）并且可以在web应用中使用它们看到这句话实际上很令人有一点疑惑,“一套技术”,“允许创建可重用元素.

2022-03-01 22:00:28 923 2

小张的博客