- 博客(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命令,千万不能忘
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
原创 Mac电脑上升级nodejs
第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀疑这个工具的名字,是他是他就是他,他的名字就是 "n"第四步,安装最新版本的node.js。
2023-10-30 15:09:52
452
原创 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
翻译 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
原创 Jenkins admin的默认的密码忘记了
在linux上装了jenkins之后的几天,再次打开发现amidn的密码给忘了。如果是默认密码为修改过直接可以这样:cat /var/lib/jenkins/secrets/initialAdminPassword访问Jenkins页面,输入管理员admin,及刚才的密码;进入后可更改其他管理员密码;如果是修改过默认密码1.删除Jenkins目录下config.xml文件中下面代码,并保存文件。[java] view plain copy<useSecurity>true<
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
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅