React
文章平均质量分 89
React
油墨香^_^
想要敲出漂亮的代码, 就要暴露在全世界的眼睛下!
展开
-
React 拖拽排序组件库对比研究
react-dnddnd-kitreact-dnd文档齐全github star星数16.4k维护更新良好,最近一月内有更新维护学习成本较高功能中等移动端兼容情况,良好示例数量中等概念较多,使用复杂组件间能解耦文档齐全github star星数24.8k维护更新良好,最近三月内有更新维护学习成本较高使用易度中等功能丰富移动端兼容情况,优秀示例数量丰富是为垂直和水平列表专门构建的更高级别的抽象,没有提供 react-dnd 提供的广泛功能。转载 2024-05-23 08:48:09 · 358 阅读 · 0 评论 -
2024前端面试实战篇
Dockerfile 的最佳实践」「关于 sed 命令的常见报错和解决方法」Suspense:Suspense 是一个新的 React 组件,它用于处理组件的懒加载过程中可能发生的加载延迟。你可以使用 Suspense 包装一个或多个懒加载组件,并提供一个 fallback 属性,以指定在加载懒加载组件时要显示的占位符。转载 2024-05-21 08:53:57 · 24 阅读 · 0 评论 -
2024前端面试之React原理
React的Fiber架构是一种用于改进React渲染过程的架构。它的目标是提高React的性能和可中断性,使应用程序具有更好的响应性能和用户体验。Fiber架构改进了React的渲染过程的方式,使其可以实现增量渲染和优先级调度,具有以下优点:可中断性:传统的React渲染过程是同步的,一旦开始渲染,就无法中断。这可能会导致长时间的渲染阻塞,影响用户界面的响应性能。Fiber架构通过将渲染过程分解为小的任务单元,使得React可以在任务的边界上中断和恢复渲染过程,以响应更高优先级的任务(如用户交互)。转载 2024-05-20 10:01:07 · 66 阅读 · 0 评论 -
2023前端面试之React基础
在React中,组件是构建用户界面的可重用代码单元。它将界面分解为独立、可组合的部分,每个部分负责管理自己的状态和渲染逻辑。组件可以是函数组件或类组件。函数组件是一个纯粹的JavaScript函数,接收props作为参数,并返回一个React元素用于描述界面的结构和内容。函数组件通常被称为"无状态组件",因为它们没有内部的状态管理,只依赖于传入的props进行渲染。函数组件的定义简单、易于理解,并且在React 16.8之后引入的Hooks使得函数组件可以管理内部状态和其他React特性。;转载 2024-05-20 10:00:47 · 17 阅读 · 0 评论 -
2024前端面试之React阶级
React的异步渲染是指将渲染工作分割成多个小任务,以提高应用程序的响应性能。在异步渲染中,React可以根据优先级和时间分片,将渲染工作分布在多个帧中执行,从而避免阻塞主线程。Time Slicing(时间切片)是React异步渲染的一种技术,它允许React在多个渲染任务之间进行时间切片,使得每个任务的执行时间限制在一个时间片段内,以确保主线程不被长时间占用。这样可以避免用户界面的卡顿和不响应现象。转载 2024-05-20 10:00:26 · 26 阅读 · 0 评论 -
React刁钻的问题
在React中,渲染劫持(Render Hijacking)通常是指在组件渲染过程中,通过一些技术手段修改或干预组件的渲染行为。这可以用来实现各种功能,例如性能优化、状态管理、错误处理等。渲染劫持是一种高级技术,通常需要深入了解React的内部工作原理和生命周期方法。以下是一些常见的渲染劫持技术和用例:高阶组件 (Higher-Order Components - HOCs):HOCs是一种通过接受一个组件并返回一个新组件的函数,从而包装组件并改变其渲染行为的技术。转载 2024-05-09 16:53:56 · 21 阅读 · 0 评论 -
React面试模拟题
高阶组件(Higher-Order Component,HOC)是React中的一种高级技术,它是一个函数,接受一个组件作为参数并返回一个新的包装组件。高阶组件用于增强或修改现有组件的行为,而不需要修改原始组件的代码。这是一种重要的设计模式,通常用于代码复用、逻辑分离和横切关注点(cross-cutting concerns)的处理。// 高阶组件函数render() {// 原始组件// 使用高阶组件包装原始组件// 在应用中使用包装后的组件return (" />转载 2024-05-09 16:53:39 · 22 阅读 · 0 评论 -
拒绝面试唯唯诺诺(React面试题25k字)
在 Redux 中,定义 action 是通过创建一个普通的 JavaScript 对象来完成的。type:这是一个字符串,用于描述 action 的类型,通常是一个唯一的标识符,表示你想执行的操作。payload(可选):这是一个包含与 action 相关数据的属性。它可以是任何类型的数据,如字符串、数字、对象等,具体取决于你的应用需求。// 定义 action 类型// 创建一个 action 创建函数,它返回一个 action 对象return {转载 2024-05-09 16:52:39 · 41 阅读 · 0 评论 -
React每日面试题
比如我们要在b和c节点中间插入一个节点f,jquery会将f这个节点后面的每一个节点都进行更新,比如c更新成f,d更新成c,e更新成d,这样操作的话就会特别多,而加了key的react咋不会频繁操作dom,而是优先采用移动的方式,找到正确的位置去插入新节点;如果某组件A转移到同层B组件上,那么这个A组件会先被销毁,然后在B组件下重新生成,以A为根节点的树整个都被重新创建,这会比较耗费性能,但实际上我们很少跨层移动dom节点,一般都是同层横向移动;如果对比前后,组件的类型相同,则暂时认为此组件不需要更新;转载 2024-05-09 16:49:45 · 38 阅读 · 0 评论 -
2024前端真实面试题
DSBridge 的原理类似于其他类似桥接库,如WebView JavaScript Bridge(WebViewJavascriptBridge)、React Native Bridge 等,它们都提供了一种在 Web 应用和原生应用之间进行通信的方式,从而实现了混合应用的开发。为了提高性能,应尽量减少回流和重绘的次数。Object 对象的 getOwnPropertyNames 方法,获取到对象中的属性名,存到一个数组中,返回数组对象,我们可以通过判断数组的 length 来判断此对象是否为空。转载 2024-05-07 08:51:00 · 23 阅读 · 0 评论 -
2024前端真实面试题(二)
MVVM(Model-View-ViewModel)和 MVC(Model-View-Controller)都是软件设计模式,用于组织和架构应用程序的代码。它们之间的主要区别在于如何组织和管理用户界面的代码。转载 2024-05-07 08:50:36 · 24 阅读 · 0 评论 -
2024前端真实面试题(蚂蚁外包)
闭包(Closure)是指一个函数包含了对其外部作用域中变量的引用,即使在该函数外部作用域执行完毕后仍然可以访问这些变量。闭包允许你在一个函数内部访问另一个函数的变量,这在许多编程语言中是一种强大的特性。保护私有变量:闭包允许你创建一个包含私有数据的函数,这些数据对外部是不可见的。这在模块化编程中非常有用,可以防止外部代码直接访问和修改内部状态。count++;// 输出 1// 输出 2实现数据封装:闭包可以用于创建类似于面向对象编程中的对象实例。转载 2024-05-07 08:49:58 · 90 阅读 · 0 评论 -
2024 React 面试问答
Fiber是 React 16 中引入的新的协调引擎(reconciliation algorithm)或渲染架构,它主要的目标是提高 React 应用的性能,尤其是动画、布局和手势等场景的性能。Fiber 能够为 React 的渲染和更新提供更好的可预测性,并能够利用分块更新(chunking)、暂停、中止或重用工作的能力,以及为不同类型的更新分配优先级。转载 2024-05-07 08:48:00 · 14 阅读 · 0 评论 -
2024 React 面试问答十连
在性能、可预测性、浏览器兼容性和代码可维护性方面都具有一些优势。因此,在某些情况下,使用 MessageChannel 可能会比使用 Promise 更有优势。转载 2024-05-07 08:44:40 · 63 阅读 · 0 评论 -
memo、useMemo、useCallback 你真的用明白了吗
memo:父组件重新渲染,没有被 memo 包裹的子组件也会重新渲染被 memo 包裹的组件只有在 props 改变后,才会重新渲染memo 只会对新旧 props 做浅比较,所以对于引用类型的数据如果发生了更改,需要返回一个新的地址memo 并不是用的越多越好,因为缓存本身也是需要开销的。转载 2024-05-06 08:56:32 · 637 阅读 · 0 评论 -
React高阶组件(HOC)的入门及实践
高阶组件不是组件,它是一个将某个组件转换成另一个组件的纯函数。高阶组件的主要作用是实现代码复用和逻辑抽象、对state和props进行抽象和操作、对组件进行细化(如添加生命周期)、实现渲染劫持等。在实际的业务场景中合理的使用高阶组件,可以提高开发效率和提升代码的可维护性。高阶组件的实用性使其频繁地被大量React.js相关的第三方库,如的connect方法、等所使用,了解高阶组件对我们理解各种React.js第三方库的原理很有帮助。高阶组件有两种实现方式,分别是属性代理和反向继承。转载 2024-05-06 08:56:08 · 21 阅读 · 0 评论 -
2024前端真实面试题(React)
render() {return (Titlerender() {return (转载 2024-05-06 08:55:42 · 60 阅读 · 0 评论 -
2024 React面试问答(Penta Kill)
React 应用的性能优化是一个重要的课题。通过使用 React Profiler、Chrome DevTools 等工具,开发者可以快速找到 React 应用的性能瓶颈,并进行针对性的优化,从而提高应用的性能。转载 2024-05-06 08:55:19 · 17 阅读 · 0 评论 -
React面试题(一)
为了实现其组件化的目的,而不引入更多的概念(比如Vue引入了模板语法,这就是新的概念,学习成本会比较高),使用人们熟悉的js语法的扩展更加适用。而通过 VNode,同样更新 10 个 DOM 节点,虚拟 DOM 不会立即操作 DOM,而是将这 10 次更新的 diff 内容保存到本地的一个 js 对象中,最终将这个 js 对象一次性 attach 到 DOM 树上,避免大量的无谓计算。组件化:将界面成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,构成整体页面,提高代码的复用率和开发效率。转载 2024-05-06 08:54:57 · 15 阅读 · 0 评论 -
Nginx 反向代理与负载均衡
当我们有一个服务器集群,并且服务器集群中的每台服务器的内容一样的时候,同样我们要直接从个人电脑访问到服务器集群服务器的时候无法访问,必须通过第三方服务器才能访问集群这个时候,我们通过第三方服务器访问服务器集群的内容,但是我们并不知道是哪一台服务器提供的内容,此种代理方式称为反向代理公司会建立很多的服务器,这些服务器组成了服务器集群,然后,当用户访问网站的时候,先访问一个中间服务器,再让这个中间服务器在服务器集群中选择一个压力较小的服务器,然后将该访问请求引入选择的服务器。转载 2023-08-21 09:19:47 · 66 阅读 · 0 评论 -
React-JSX是什么?它和JS有什么区别
jsx通过babel转义时,调用了React.createElement函数,它接收三个参数,分别是type元素类型,props元素属性,children子元素。如下图所示,从jsx到真实DOM需要经历jsx->虚拟DOM->真实DOM。如果组件首字母为小写,它会被当成字符串进行传递,在创建虚拟DOM的时候,就会把它当成一个html标签,而html没有app这个标签,就会报错。组件首字母为大写,它会当成一个变量进行传递,React知道它是个自定义组件就不会报错了。转载 2023-08-04 08:43:27 · 538 阅读 · 0 评论 -
React面试题(一)
为了实现其组件化的目的,而不引入更多的概念(比如Vue引入了模板语法,这就是新的概念,学习成本会比较高),使用人们熟悉的js语法的扩展更加适用。而通过 VNode,同样更新 10 个 DOM 节点,虚拟 DOM 不会立即操作 DOM,而是将这 10 次更新的 diff 内容保存到本地的一个 js 对象中,最终将这个 js 对象一次性 attach 到 DOM 树上,避免大量的无谓计算。组件化:将界面成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,构成整体页面,提高代码的复用率和开发效率。转载 2023-08-04 08:42:54 · 54 阅读 · 0 评论 -
react中useState多次定义并且每次调用都可以一一对应的原理
在这种情况下,每个状态变量和更新函数都被封闭在其对应的 useState 调用中,使得它们能够在组件的生命周期内保持不变。通过这种机制,React 能够维护组件中多个状态的独立性,并确保每个状态变量与其对应的更新函数正确匹配,从而实现了状态的管理和更新。第一次调用 useState 返回的状态变量和更新函数是与 count 相关联的,而第二次调用返回的则是与 name 相关联的。当你调用状态的更新函数时,React 会使用内部的机制将新的状态值与对应的状态变量关联起来,并触发组件的重新渲染。转载 2023-08-04 08:42:19 · 344 阅读 · 0 评论 -
2023前端面试之React原理
React的Fiber架构是一种用于改进React渲染过程的架构。它的目标是提高React的性能和可中断性,使应用程序具有更好的响应性能和用户体验。Fiber架构改进了React的渲染过程的方式,使其可以实现增量渲染和优先级调度,具有以下优点:可中断性:传统的React渲染过程是同步的,一旦开始渲染,就无法中断。这可能会导致长时间的渲染阻塞,影响用户界面的响应性能。Fiber架构通过将渲染过程分解为小的任务单元,使得React可以在任务的边界上中断和恢复渲染过程,以响应更高优先级的任务(如用户交互)。转载 2023-08-04 08:41:33 · 88 阅读 · 0 评论 -
2023前端面试之React基础
在React中,组件是构建用户界面的可重用代码单元。它将界面分解为独立、可组合的部分,每个部分负责管理自己的状态和渲染逻辑。组件可以是函数组件或类组件。函数组件是一个纯粹的JavaScript函数,接收props作为参数,并返回一个React元素用于描述界面的结构和内容。函数组件通常被称为"无状态组件",因为它们没有内部的状态管理,只依赖于传入的props进行渲染。函数组件的定义简单、易于理解,并且在React 16.8之后引入的Hooks使得函数组件可以管理内部状态和其他React特性。;转载 2023-08-04 08:40:55 · 71 阅读 · 0 评论 -
2023前端面试之React阶级
React的异步渲染是指将渲染工作分割成多个小任务,以提高应用程序的响应性能。在异步渲染中,React可以根据优先级和时间分片,将渲染工作分布在多个帧中执行,从而避免阻塞主线程。Time Slicing(时间切片)是React异步渲染的一种技术,它允许React在多个渲染任务之间进行时间切片,使得每个任务的执行时间限制在一个时间片段内,以确保主线程不被长时间占用。这样可以避免用户界面的卡顿和不响应现象。转载 2023-08-04 08:40:18 · 98 阅读 · 0 评论 -
Vue3中 router 带来了哪些变化?
*转载 2023-08-07 08:58:30 · 540 阅读 · 0 评论 -
Javascript 面试核心考点
为什么呢 —— 因为this是执行上下文环境的一部分,而执行上下文需要在代码执行之前确定,而不是定义的时候。转载 2023-09-13 09:08:57 · 69 阅读 · 0 评论 -
页面可视化搭建工具技术要点
页面可视化搭建工具在业务中的落地, 需要根据不同的业务场景进行业务组件和页面模板的自定义开发. 这对页面可视化搭建工具提出3个要求:页面可视化搭建工具要支持业务现有的前端框架.避免后续组件和模板自定义开发时的工作量和割裂感. 我们是希望复用现有前端框架组件, 而不是用另一个前端框架重写一遍.组件和模板的编写方式需遵循较简单的编写约定, 避免开发人员难上手和写起来不舒服.自定义模板和组件和在开发模式下进行调试和测试.转载 2023-08-07 09:01:55 · 145 阅读 · 0 评论 -
使用高阶函数实现类的扩展设计
通过继承我们可以很好地实现方法的重写,也可以利用如super这样的关键字,同时也不需要考虑doWork是保护方法还是公开方法,使得Component类完全不需要为了扩展而进行额外的设计,所有的扩展均在外部的工厂(create函数)实现,更好地进行了逻辑的解耦。一个非常简单的案例即日志的记录。所谓扩展,即一个可组合的组件,用于嵌入到目标的生命周期中,对目标的行为进行额外的处理使得目标拥有不同的表现。即我们的扩展接受一个类的构造函数(也是类本身),返回另一个类,其作用是通过继承对类进行一定的转换。转载 2023-08-07 09:01:25 · 87 阅读 · 0 评论 -
深入高阶函数应用之柯里化
函数柯里化又叫部分求值,维基百科中对柯里化 (Currying) 的定义为:在数学和计算机科学中,柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数,并且返回接受余下的参数而且返回结果的新函数的技术。用大白话来说就是只传递给函数一部分参数来调用它,让它返回一个新函数去处理剩下的参数。使用一个简单的例子来介绍下,最常用的就是 add 函数了。// 木易杨// 传入多个参数,执行 add 函数// 假设我们实现了一个 currying 函数,支持一次传入一个参数。转载 2023-08-21 09:18:16 · 88 阅读 · 0 评论 -
Vue 组件数据通信方案总结
Vuex 实现了一个单项数据流,通过创建一个全局的 State 数据,组件想要修改 State 数据只能通过 Mutation 来进行,例如页面上的操作想要修改 State 数据时,需要通过 Dispatch (触发 Action ),而 Action 也不能直接操作数据,还需要通过 Mutation 来修改 State 中数据,最后根据 State 中数据的变化,来渲染页面。所以,如果采用的是我代码中注释的方式,父级的 name 如果改变了,子组件this.name 是不会改变的,仍然是。转载 2023-08-21 09:20:30 · 73 阅读 · 0 评论 -
深入理解图片和框架的原生懒加载功能
这个新功能着实让我激动。原生懒加载功能的发布近在眼前,会对全球互联网通信产生非凡影响。就算它只能改变启发式技术的一小部分,老实说我仍不明白为何人们不给予足够的关注。想想吧,随着在不同的 Chrome 平台中逐渐推广、auto值成为默认选项,世界上最流行的浏览器即将对视口外的图片和框架应用懒加载技术。决堤般的通信量会大面积击溃那些健壮性不足的网站,而且,蜂拥而至的图片探测请求也会伤及网络服务器。转载 2023-08-21 09:21:18 · 130 阅读 · 0 评论 -
如何让你的 JS 写得更漂亮
因为JS最终都会被解释成汇编的语言,汇编语言变量的类型肯定是要确定的,你把一个整型的改成了字符串,那解释器就得做一些额外的处理。但是上面代码的执行输出是4,4,4,4,并且不是想要输出:0,1,2,3,所以每个task就不能取到它的index了,这是因为闭包都是用的同一个i变量,i已经变成4了,所以执行闭包的时候就都是4了。把i赋值给了k,由于k它是一个function的一个参数,每次执行函数的时候,肯定会实例化新的k,所以每次的k都是不同的变量,这样就输出就正常了。上面的+号把字符串转成了整数。转载 2023-09-14 16:55:37 · 72 阅读 · 0 评论 -
如何实现 React 中的状态自动保存?
属性当作方法来使用,我们就有手动控制渲染的行为的可能,关键代码在此处 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js#L41-L72。的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击查看其详情,进入详情页,去管理不同的页面,而在切换页面时,路由将会卸载掉未匹配的页面组件,所以上述列表页例子中,转载 2023-09-13 09:11:00 · 337 阅读 · 0 评论 -
动手实现一个 react-redux
我们知道 mapStateToProps 和 mapDispatchToProps 的作用是什么,但是目前为止,我们还不清楚,这两个参数应该是一个什么样的格式传递给 connect 去使用。这部分内容,我们当然可以自己在应用中编写相应代码,不过很显然,这些代码在每个应用中都是重复的。有个小小的问题,尽管这逻辑是重复的,但是每个组件需要的数据是不一样的,不应该把所有的状态都传递给组件,因此我们希望在调用。时,需要依据组件自身的属性进行处理,因此,可以将组件自身的属性也传递给。,没有进一步进行性能优化等。转载 2023-09-13 09:11:39 · 46 阅读 · 0 评论 -
React 函数式组件性能优化指南
本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。对于性能瓶颈可能对于小项目遇到的比较少,毕竟计算量小、业务逻辑也不复杂,但是对于大项目,很可能是会遇到性能瓶颈的,但是对于性能优化有很多方面:网络、关键路径渲染、打包、图片、缓存等等方面,具体应该去优化哪方面还得自己去排查,本文只介绍了性能优化中的冰山一角:运行过程中 React 的优化。转载 2023-09-13 09:11:59 · 133 阅读 · 0 评论 -
如何全方位优化你的超大型 React 应用
手写React优化脚手架带项目react-ssr的源码手写Node.js原生静态资源服务器跨平台Electron的demoCSR。转载 2023-09-13 09:12:20 · 49 阅读 · 0 评论 -
8 个问题带你进阶 React
babel 在编译的过程中会判断 JSX 组件的首字母, 如果是小写, 则为原生 DOM 标签, 就编译成字符串. 如果是大写, 则认为是自定义组件. 编译成对象.背景: 由于浏览器它将 GUI 描绘,时间器处理,事件处理,JS 执行,远程资源加载统统放在一起。如果执行 js 的更新, 占用了太久的进程就会导致浏览器的动画没办法执行,或者 input 响应比较慢。react fiber 使用了 2 个核心解决思想:让渲染有优先级可中断。转载 2023-09-13 09:12:33 · 28 阅读 · 0 评论 -
useHooks~小窍门
Hooks是React 16.8新增的一项特性,可以让你在不使用class的情况下去使用state和React的其他功能。这篇文章提供了简单易懂的案例,帮助你去了解hooks如何使用,并且鼓励你在接下来的项目中去使用它。但是在此之前,请确保你已经看了hook的官方文档。转载 2023-09-13 09:12:51 · 131 阅读 · 0 评论