自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

FE攻城狮

微信公众号:V8社区

  • 博客(328)
  • 资源 (12)
  • 收藏
  • 关注

原创 说说对React中类组件和函数组件的理解?有什么区别?

两者看起来实现功能是一致的,但是在类组件中,输出this.props.user,Props在 React中是不可变的所以它永远不会改变,但是 this 总是可变的,以便您可以在 render 和生命周期函数中读取新版本。在使用hooks情况下,一般如果函数组件调用state,则需要创建一个类组件或者state提升到你的父组件中,然后通过props对象传递到子组件。因此,如果我们的组件在请求运行时更新。函数组件,顾名思义,就是通过函数编写的形式去实现一个React组件,是React中定义组件最简单的方式。

2023-11-08 15:15:12 299

原创 说说你在React项目是如何捕获错误的?

错误边界是一种 React 组件,这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树。举个例子,在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏,导致整个应用崩溃,这是不应该出现的现象。对于错误边界无法捕获的异常,如事件处理过程中发生问题并不会捕获到,是因为其不会在渲染期间触发,并不会导致渲染时候问题。错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误。

2023-11-08 15:14:02 99

原创 React构建组件的方式有哪些?区别?

在React Hooks出来之前,函数式组件可以视为无状态组件,只负责根据传入的props来展示视图,不涉及对state状态的操作。同样在react hooks出来之前,有状态的组件只能通过继承React.Component这种形式进行创建。React.createClass是react刚开始推荐的创建组件的方式,目前这种创建方式已经不怎么用了。有状态的组件也就是组件内部存在维护的数据,在类创建的方式中通过this.state进行访问。在考虑组件的选择原则上,能用无状态组件则用无状态组件。

2023-11-08 15:10:20 270

原创 在react中组件间过渡动画如何实现?

当in属性置为false时,CSSTransition会给子组件加上xxx-exit和xxx-exit-active的class,然后开始执行动画,当动画结束后,移除两个class,然后添加-enter-done的class。在react中,react-transition-group是一种很好的解决方案,其为元素添加enter,enter-active,exit,exit-active这一系列勾子。当动画执行结束后,会移除两个class,并且添加-enter-done的class。

2023-11-08 15:09:04 396

原创 React事件绑定的方式有哪些?区别?

如果使用一个类组件,在其中给某个组件/元素一个onClick属性,它现在并会自定绑定其this到当前组件,解决这个问题的方法是在事件函数后使用.bind(this)将this绑定到当前组件中。通过ES6的上下文来将this的指向绑定给当前组件,同样再每一次render的时候都会生成新的方法,影响性能。在constructor中预先bind当前组件,可以避免在render操作中重复绑定。这种方式在组件每次render渲染的时候,都会重新进行bind的操作,影响性能。综合上述,方式四是最优的事件绑定方式。

2023-11-08 15:07:12 251

原创 说说对Fiber架构的理解?解决了什么问题?

该实现过程是基于 Fiber节点实现,作为静态的数据结构来说,每个 Fiber 节点对应一个 React element,保存了该组件的类型(函数组件/类组件/原生组件等等)、对应的 DOM 节点等信息。即可以中断与恢复,恢复后也可以复用之前的中间状态,并给不同的任务赋予不同的优先级,其中每个任务更新单元为 React Element 对应的 Fiber节点。从编码角度来看,Fiber是 React内部所定义的一种数据结构,它是 Fiber树结构的节点单位,也就是 React 16 新架构下的虚拟DOM。

2023-11-08 15:03:32 2564 1

原创 2023年前端核心竞争技能大全

ECMAScript 规范发展简介ES6 新增 API 解析ESNext 规范中的 API 解析babel 编译⼯具链的基础介绍使⽤babel实现esnext⾄es5的转换。

2023-11-08 14:58:36 101

原创 git提交commit message须规范统一

|

2023-10-30 15:19:20 352

原创 工作中常用的git命令,千万不能忘

git rm --cached <file-name>(如果要刪除此文件)9 squash commits to one(将多个commits压成一个)10 在最近的commit上追加文件变动。11 撤回部分file的commit。12 恢复reset。

2023-10-30 15:17:51 346

原创 前端知识体系概要

FIS、Webpack、Yeoman、Gulp等配置。Express、KOA1&2基础与实践。JavaScript常见设计模式与实践。JavaScript语言发展与PHP。JavaScript函数式编程与测试。CSS工作流构建CSS Next。7、JavaScript图形学与H5游戏。游戏中的数学、物理、Canvas。NodeJS核心API与源码。前端加密与安全策略与网络安全。Angular4进阶开发实战。1、JavaScript语言新发展。高级前端性能测试、AMP。8、前端跨界AI、VR、iOS等。

2023-10-30 15:17:06 226

原创 前端工程化需要知道的一些知识

工具是前端工程化的实现媒介、规范是工程化的指导方针,工作流程是工程化的外在表现形式以及约束规范的载体。一种可演化、可扩展的服务,服务的目标是解决前端开发及后端协作开发过程中的难点和痛点问题。自动化容器化部署、灰度发布、增量更新(保留多个版本,有利于回滚)大前端(纵向、nodejs)、泛前端(横向\react native)数据结构、算法、抽象能力、架构能力、工程化思维。单元测试、集成测试、仿真环境。编程规范、持续的架构设计 -> 质量、效率。gitflow与版本管理。webhook与自动构建。

2023-10-30 15:16:25 210

原创 react性能优化要点

命中比较 {} === {} 全等比较 不易命中 具有传染性。react.memo 浅比较 容易命中性能优化。2 在子树的根节点使用性能优化API。1 寻找项目中性能损耗严重的子树。3 子树中运用变与不变分离的原则。子组件才有可能命中优化条件。可以使用性能优化API解决。B的props是{}

2023-10-30 15:14:58 64

原创 react面试要点

答: jsx是javascript的一个语法拓展,结构类似xml, jsx主要用于声明元素,但react中并不强制使用jsx.即使使用了,在编译中也会将jsx转换成react.createElement. 所以jsx更像是是react.createElement的语法糖,所以从这里可以看出react团队并不想引入javascript以外的知识体系。其次是模板字符串,模板字符串编写结构会造成多内部嵌套,是整个结构变得复杂,并且是优化代码提示也变的困难重重。这也是React的优势。谈一谈你对react的理解。

2023-10-30 15:14:06 291

原创 react hooks的原理

2 多个react-hooks用什么来记录每一个hooks的顺序的?含义:副作用钩子,用于处理组件中的副作用,用来取代生命周期函数。所谓的"副作用"就是指的是组件中状态或生命周期改变时在useEffect可监听到。3 function函数组件中的useState,和 class类组件 setState有什么区别?1 在无状态组件每一次函数上下文执行的时候,react用什么方式记录了hooks的状态?4 react 是怎么捕获到hooks的执行上下文,是在函数组件内部的?如何应用它优化性能?

2023-10-30 15:13:09 263

原创 yarn的使用方法

MacOS# UpgradeMacOS# Usageyarn inityarn。

2023-10-30 15:12:04 75

原创 webpack常用的插件

常用插件plugin。# 常用loader。

2023-10-30 15:10:49 55

原创 Mac电脑上升级nodejs

第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字,是他是他就是他,他的名字就是 "n"第四步,安装最新版本的node.js。

2023-10-30 15:09:52 452

原创 手写常用的javascript函数

【代码】手写常用的javascript函数。

2023-10-30 15:08:23 72

原创 手写swiper

【代码】手写swiper。

2023-10-30 15:07:18 214

原创 手写javascript的cookies管理代码

【代码】手写javascript的cookies管理代码。

2023-10-30 15:03:00 162

原创 如何避免浏览器控制台console报错?

【代码】如何避免浏览器控制台console报错?

2023-10-30 15:00:05 424

原创 javascript对象深度复制

【代码】javascript对象深度复制。

2023-10-30 14:55:07 47

原创 React Fiber: 从 Reconciliation 到 Concurrent Mode

React Fiber 是 React 中的一种新的协调算法,它的主要目的是提高 React 的性能和可维护性。相比于 Stack Reconciliation,React Fiber 是一种基于链表的、可中断的、可恢复的算法,并且可以处理不同优先级的更新。在 React 中,当组件的 props 或者 state 发生变化时,React 会重新计算组件的 Virtual DOM,并将其与上一次计算的 Virtual DOM 进行比较,找出需要更新的部分,然后将这些部分更新到浏览器中。

2023-08-07 14:30:37 623

原创 chrome extension blocked by admin

Solution:1 win + R- SOFTWARE- Policies- Google- Chrome。

2023-03-02 15:19:31 992

原创 Some knowledge of the brushless motors

If you are building a drone, RC vehicle, or any machine that uses a brushless DC (BLDC) motor, you have likely encountered the concepts of motor poles and motor Kv. Both of these parameters are useful for characterizing your motor and estimating its perfor

2023-02-03 11:04:31 982

原创 获取和恢复monaco editor的undo/redo栈

场景:在使用monaco editor的时候,有时需要销毁之前的实例,创建新的实例。但是这样,新的editor就不能使用之前实例的redo和undo的信息栈。解决办法:可以在销毁之前的实例之前,将editor的model和viewState保存至全局,然后新创建的实例就可以重新使用它们了。缺点:就是将viewState全部存在了内存中(monaco editor有它自己的数据结构),而不能将其序列化使用。

2023-02-01 10:34:14 1718

原创 安全区域适配的几种解决方法

100vh 不适配 iOS safari 导航栏。

2023-01-09 21:00:40 710

翻译 iOS7多任务处理

第11章-中级-多任务Chapter11-IntermediateMultitaskingByPietroRea在上一章中你学习了如何实现后台获取,它可以使你的应用内容及时更新,这样用户每次启动应用时都能看到最新的内容。Inthepreviouschapter,youlearnedhowtoimplementbackgroundfechting,whi...

2022-07-01 10:18:12 629

原创 js同步任务,宏任务,微任务 await promise setTimeout

1、弄清楚执行顺序,就要弄清楚哪里是要进宏任务队列,哪里是要进微任务队列,哪个是同步代码,哪个是异步代码。2、await上面的代码和后面的代码是直接执行的,await下面的代码是要进微任务队列的3、promise的resolve是同步执行的,then里的代码是要进微任务队列的4、setTimeout是进宏任务队列的5、代码先执行同步代码,后执行任务队列6、先执行微任务队列,后执行宏任务队列7、队列秉持先进先出原则!!!...

2022-06-29 16:13:35 669

原创 VS code上跑yarn start报running scripts is disabled on this system错误的解决方法

今天想在vs code的命令框里运行yarn start,因为不想命令框满天飞。结果发现报错了

2022-05-11 17:44:42 1058

原创 windows上跑linux用虚拟机好还是WSL好?

最近在windows上升级Docker desktop, 升级完之后提示支持WSL。 查了一下原来WSL是指windows subsystem for linux, 那么它和虚拟机上的linux有什么区别和优劣势呢?

2022-02-11 10:49:29 36000

原创 解决 TypeScript 引入第三方包,报无法找到模块“XXX”的声明文件错误

问题如下:解决方法方法一:根据报错提示尝试安装该库的TypeScript版本 (该库的 ts 声明文件),也就是在该库的名称前加上 @types/本例子为 npm install -D @types/bpmn-moddle其它库如下:npm install -D @types/XXXoryarn add -D @types/XXX但是,不是所有的第三方库都有 TypeScript 的版本,所以方法一不能保证百分百有效,如果方法一不奏效,那么我们来看一下方法二。方法...

2022-01-12 17:20:43 62335 10

原创 TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”

针对不能将类型“HTMLElement | null”分配给类型“HTMLElement” 错误,可根据实际情况使用!进行处理或者使用as进行断言;出错代码如下:出错原因:可能获取不到container解决办法:1. 使用!2. 使用 as...

2022-01-12 11:40:10 11416

原创 npm全局安装包的原理

在前端工程搭建的时候,可能需要安装一些全局的命令行工具,比如vue-cli。需要注意的是,全局模式并不是将一个模块包安装为一个全局包的意思,它并不意味着可以从任何地方通过require()来引用到它。全局模式这个称谓其实并不精确,存在诸多误导。实际上,-g是将一个包安装为全局可用的可执行命令。它根据包描述文件中的bin字段配置,将实际脚本链接到与Node可执行文件相同的路径下:"bin": {"express": "./bin/express"},事实上,通过全局模式安装的所有...

2021-06-24 14:40:03 614

原创 javascript设计模式之策略模式

概念基本定义:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。策略模式指的是定义一系列的算法,把它们一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来。策略模式的实现并不复杂,关键是如何从策略模式的实现背后,找到封装变化、委托和多态性这些思想的价值。应用在实际开发中,我们通常会把算法的含义扩散开来,使策略模式也可以用来封装 一系列的“业务规则”。只要这些业务规则指向的目标一致,并且可以被替换使用,我

2021-06-14 08:41:30 136

原创 jest中的mock,jest.fn()、jest.spyOn()、jest.mock()

maven有3种生命周期,分别为:1.default2.clean3.sitemaven lifecycle相关的命令1.CLEAN (清理)用于清除之前构建生成的所有文件其中具体为清楚了Target目录中的所有文件,包括该目录i.e:删除了install生成的所有文件2.VALIDATE(验证)用于验证项目是否正确,并且其中有必要信息是否都可用3.COMPILE(编译源代码)编译项目的源代码,主要是java文件一般是编译scr/main/java或是scr/test/java里

2021-06-08 14:40:42 15271 2

原创 js闭包原理及其应用场景

闭包这个概念一直困扰这我,很多时候背了,过段时间又记不住了。之所以这样是因为自己并没有真正理解什么是闭包。很多时候你觉得一个概念很复杂记不住,很有可能是你对这个概念理解错了。很多人会说闭包会zao'c...

2021-06-06 19:37:12 345

原创 react Fiber的理解

Fiber是react的16.8.0版本引进的全新的reconcile逻辑和概念,下图是官方给出的demo例子:

2021-06-06 08:40:46 702

原创 Jenkins admin的默认的密码忘记了

在linux上装了jenkins之后的几天,再次打开发现amidn的密码给忘了。如果是默认密码为修改过直接可以这样:cat /var/lib/jenkins/secrets/initialAdminPassword访问Jenkins页面,输入管理员admin,及刚才的密码;进入后可更改其他管理员密码;如果是修改过默认密码1.删除Jenkins目录下config.xml文件中下面代码,并保存文件。[java] view plain copy<useSecurity>true&lt

2021-03-18 16:53:30 10862

原创 idea自动编译设置

idea默认是没有启用自动编译功能的,所以要我们自己将其打开。首先来到File->Setting –> Build, Execution, Deployment –> Compiler–>勾选Build project automatically:然后按SHIFT+CTRL+A(windows、linux用户)Command+SHIFT+A(mac用户),在弹出框里输入registry,在下拉框中选择register…按enter建,在出来的窗口中确定compiler.au

2021-03-11 10:32:07 10141 1

我所理解的this.pdf

我所理解的this pdf

2019-06-12

A Reference Architecture for Web Browsers.pdf

A Reference Architecture for Web Browsers

2019-06-12

我所理解的从原型到原型链.pdf

我所理解的从原型到原型链

2019-06-12

基于Symbian平台的俄罗斯方块游戏的实现

很现实的一个游戏,

2012-10-04

html5入门文档

html5入门教程,请广大的html5的爱好者来这里下载并学习

2013-07-11

新唐M0数据手册,飞控板

新唐M0数据手册,飞控板

2013-07-11

java web 开发经典

java web structs spring

2014-06-20

统计学精要

统计学精要统计学精要统计学精要统计学精要统计学精要

2014-06-29

html5去掉图片背景颜色

可以将image中的背景颜色变成透明的,实现去背景的功能

2013-07-11

组织设计软件

这是一个纺织学的一个工具,软件简单易用,多谢大家下载

2012-03-26

symbian_系统开发培训

symbian_系统开发培训(精品),这是个很经典的教程,希望大家下载看看!

2012-10-04

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除