React
文章平均质量分 73
晚时之秋
好看的皮囊千篇一律,有趣的灵魂万里挑一
展开
-
说说你对immutable的理解?如何应用在react项目中?
在做react性能优化的时候,为了避免重复渲染,我们会在shouldComponentUpdate()中做对比,当返回true执行render方法。在使用redux过程中也可以结合Immutable,不使用Immutable前修改一个数据需要做一个深拷贝。使用 Immutable可以给 React 应用带来性能的优化,主要体现在减少渲染的次数。如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。Immutable,不可改变的,在计算机中,即指一旦创建,就不能再被更改的数据。原创 2023-02-23 09:37:46 · 192 阅读 · 0 评论 -
说说react 中jsx语法糖的本质?
jsx本质就是下面这个函数React.createElement的语法糖,所有的jsx语法都会最终经过babel.js转化成为React.createElement这个函数的函数调用。JSX 语法的本质:并不是直接把 JSX 渲染到页面上,而是内部先转换成了 createElement 形式,再渲染的。children)函数。config以对象键值对的形式表示当前element的属性,如css属性,元素内置属性等等。如果是HTML标签,直接写字符串类型的标签名即可,如’div’,‘span’,'a’等。原创 2023-01-06 20:07:14 · 113 阅读 · 0 评论 -
说说Connect组件的原理是什么?
这个函数允许我们将 store 中的数据作为 props 绑定到组件上由于更改数据必须要触发action, 因此在这里的主要功能是将 action 作为props 绑定到 组件上Provider就是react-redux中的一个组件, Provider 做的事情也简单, 它就是一个容器组件, 会把嵌套的内容原封不动作为自己的子组件渲染出来. 它还会把外界传给它的 props.store 放到 context。原创 2023-01-06 19:38:43 · 109 阅读 · 0 评论 -
说说你对@reduxjs/toolkit的理解?和react-redux有什么区别?
React中使用react-redux、@reduxjs/toolkit状态管理工具react官方推出的redux绑定库,react-redux将所有组件分为两大类:UI组件和容器组件,其中所有容器组件包裹着UI组件,构成父子关系。容器组件负责和redux交互,里面使用redux API函数,UI组件负责页面渲染,不使用任何redux API。容器组件会给UI组件传递redux中保存对的状态和操作状态的方法Redux 官方强烈推荐,开箱即用的一个高效的 Redux 开发工具集。原创 2022-12-31 01:19:49 · 2139 阅读 · 0 评论 -
说说 Real DOM和 Virtual DOM 的区别?优缺点?
而通过VNode,同样更新10个DOM节点,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地的一个js对象中,最终将这个js对象一次性attach到DOM树上,避免大量的无谓计算。当你在一次操作时,需要更新10个DOM节点,浏览器没这么智能,收到第一个更新DOM请求后,并不知道后续还有9次更新操作,因此会马上执行流程,最终执行10次流程。创建虚拟DOM目的就是为了更好将虚拟的节点渲染到页面视图中,虚拟DOM对象的节点与真实DOM的属性一一照应。原创 2022-12-31 00:59:51 · 183 阅读 · 0 评论 -
说说React diff的原理是什么?
通过key可以准确地发现新旧集合中的节点都是相同的节点,因此无需进行节点删除和创建,只需要将旧集合中节点的位置进行移动,更新为新集合中节点的位置。跟Vue一致,React通过引入Virtual DOM的概念,极大地避免无效的Dom操作,使我们的页面的构建效率提到了极大的提升。如果是同一个类的组件,则会继续往下diff运算,如果不是一个类的组件,那么直接删除这个组件下的所有子节点,创建新的。当ABCD节点比较完成后,diff过程还没完,还会整体遍历老集合中节点,看有没有没用到的节点,有的话,就删除。原创 2022-12-31 00:44:09 · 121 阅读 · 0 评论 -
说说React Jsx转换成真实DOM过程?
在react源码中,虚拟Dom转化成真实Dom整体流程如下图所示:使用React.createElement或JSX编写React组件,实际上所有的 JSX代码最后都会转换成React.createElement(…) ,Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理,并获取defaultProps对默认props进行赋值,并且对传入的孩子节点进行处理,最终构造成一个虚拟DOM对象。原创 2022-12-31 00:36:15 · 371 阅读 · 0 评论 -
说说对受控组件和非受控组件的理解?应用场景?
如果想要解除被控制,可以为input标签设置onChange事件,输入的时候触发事件函数,在函数内部实现state的更新,从而导致input框的内容页发现改变。这时候当我们在输入框输入内容的时候,会发现输入的内容并无法显示出来,也就是input标签是一个可读的状态。如果选择非受控组件的话,控制能力较弱,表单数据就由DOM本身处理,但更加方便快捷,代码量少。受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据。非受控组件,简单来讲,就是不受我们控制的组件。原创 2022-12-30 20:50:28 · 143 阅读 · 0 评论 -
说说React的事件机制?
React 上注册的事件最终会绑定在document这个 DOM 上,而不是 React 组件对应的DOM(减少内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)React 自身实现了一套事件冒泡机制,所以这也就是为什么我们 event.stopPropagation()无效的原因。React 通过队列的形式,从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件 SyntheticEvent。原创 2022-12-30 20:11:53 · 385 阅读 · 0 评论 -
说说 React中的setState执行机制
通过点击按钮触发onclick事件,执行this.setState方法更新state状态,然后重新执行render函数,从而导致页面的视图更新。从上面可以看到setState第一个参数可以是一个对象,或者是一个函数,而第二个参数是一个回调函数,用于可以实时的获取到更新之后的数据。对同一个值进行多次 setState, setState 的批量更新策略会对其进行覆盖,取最后一次的执行结果。当需要修改里面的值的状态需要通过调用setState来改变,从而达到更新组件内部数据的作用。原创 2022-12-30 20:03:36 · 208 阅读 · 0 评论 -
为什么React元素有$$typeof属性?
因此,即使在更奇特的条件下,此修复也不会阻止在应用程序的不同部分之间传递可信元素。当然,你可能不希望像这样编写它们 - 但这对于优化编译器,在工作程序之间传递UI元素或者将JSX与React包解耦是有用的。尽管如此,错误的成本很高,每次将用户编写的字符串插入输出时,记住它都很麻烦。React可以随着时间的推移提供更多保护,但在许多情况下,这些都是服务器问题的结果,无论如何都应该在那里修复。仍然,转义文本内容是合理的第一道防线,可以捕获大量潜在的攻击。知道像这样的代码是安全的,这不是很好吗?原创 2022-12-09 07:36:18 · 280 阅读 · 0 评论 -
说说React render方法的原理?在什么时候会被触发?
render函数里面可以编写JSX,转化成createElement这种形式,用于生成虚拟DOM,最终转化成真实DOM在React 中,类组件只要执行了 setState 方法,就一定会触发 render 函数执行,函数组件使用useState更改状态不一定导致重新render组件的props 改变了,不一定触发 render 函数的执行,但是如果 props 的值来自于父组件或者祖先组件的 state在这种情况下,父组件或者祖先组件的 state 发生了改变,就会导致子组件的重新渲染。原创 2022-12-09 07:37:00 · 283 阅读 · 0 评论 -
说说你对事件循环的理解?
从上面我们可以看到,同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。上述过程的不断重复就。上面的例子中,await 会阻塞下面的代码(即加入微任务队列),先执行 async外面的同步代码,同步代码执行完,再回到 async 函数中,再执行之前阻塞的代码。宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合。当前宏任务执行完成后,会查看微任务的事件队列,然后将里面的所有微任务依次执行完。原创 2022-12-08 17:18:22 · 548 阅读 · 0 评论 -
说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
(Middleware)是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的。redux-thunk中间件会判断你当前传进来的数据类型,如果是一个函数,将会给函数传入参数值(dispatch,getState)在上篇文章中,了解到了Redux整个工作流程,当action发出之后,reducer立即算出state,整个过程是一个同步的操作。在上面的学习中,我们了解到了redux-thunk的基本使用。原创 2022-12-08 17:01:42 · 146 阅读 · 0 评论 -
React性能优化的手段有哪些?
在前面文章中,我们了解到类组件通过调用setState方法, 就会导致render,父组件一旦发生render渲染,子组件一定也会执行render渲染。但是react的默认做法是调用所有组件的render,再对生成的虚拟DOM进行对比(黄色部分),如不变则不进行更新。React凭借virtual DOM和diff算法拥有高效的性能,但是某些情况下,性能明显可以进一步提高。从上图可见,黄色部分diff算法对比是明显的性能浪费的情况。原创 2022-12-08 16:51:42 · 223 阅读 · 0 评论 -
说说对Fiber架构的理解?解决了什么问题?
该实现过程是基于 Fiber节点实现,作为静态的数据结构来说,每个 Fiber 节点对应一个 React element,保存了该组件的类型(函数组件/类组件/原生组件等等)、对应的 DOM 节点等信息。即可以中断与恢复,恢复后也可以复用之前的中间状态,并给不同的任务赋予不同的优先级,其中每个任务更新单元为 React Element 对应的 Fiber节点。,Fiber是 React内部所定义的一种数据结构,它是 Fiber树结构的节点单位,也就是 React 16 新架构下的虚拟DOM。原创 2022-12-08 16:45:33 · 118 阅读 · 0 评论 -
说说你对Redux的理解?其工作原理?
createStore可以帮助创建 storestore.dispatch 帮助派发 action , action 会传递给 storestore.getState 这个方法可以帮助获取 store 里边所有的数据内容store.subscrible 方法订阅 store 的改变,只要 store 发生改变store.subscrible 这个函数接收的这个回调函数就会被执行。原创 2022-12-08 16:28:22 · 149 阅读 · 0 评论 -
React中组件之间如何通信?
我们将组件间通信可以拆分为两个词:回顾Vue,组件是vue中最强大的功能之一,同样组件化是React的核心思想相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信组件间通信即指组件通过某种方式来传递信息以达到某个目的父组件向子组件传递由于React的数据流动为单向的,父组件向子组件传递是最常见的方式父组件在调用子组件的时候,只需要在子组件标签内传递参数,子组件通过props属原创 2022-12-04 22:06:23 · 1437 阅读 · 0 评论 -
说说对React Hooks的理解?解决了什么问题?
解决长时间使用和维护react过程中常遇到的问题原创 2022-12-04 21:29:50 · 180 阅读 · 0 评论 -
说说 React 生命周期有哪些不同阶段?每个阶段对应的方法是?
生命周期(Life Cycle)的概念应用很广泛,特别是在经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程这里主要讲述react16.4之后的生命周期,可以分成三个阶段:1. constructor()2. getDerivedStateFromProps()3. render()4. componentDidMount()5. shouldComponentUpdate()6. getSnapshotBeforeUpdate(原创 2022-12-04 20:00:19 · 453 阅读 · 0 评论 -
web前端面试题(面试题大全)
常见面试题(1)常见面试题(2)常见面试题(3)常见面试题(4)常见面试题(5)常见面试题(6)常见面试题(7)常见面试题(8)原创 2022-12-03 12:26:56 · 909 阅读 · 2 评论 -
说说对React的理解?有哪些特性?有哪些优势?
React的一些理解React的特性React的优势原创 2022-12-03 11:45:46 · 267 阅读 · 0 评论 -
常见的面试题
是以next()函数为分割点,先由外到内执行Request的逻辑,然后再由内到外执行Response的逻辑,这里的request的逻辑,我们可以理解为是next之前的内容,response的逻辑是next函数之后的内容,也可以说每一个中间件都有两次处理时机。(Middleware)在计算机中,是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的。,是一种网络传输协议,位于OSI模型的应用层。原创 2022-12-02 15:04:08 · 114 阅读 · 0 评论