![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 65
与掉发不共戴天
前端大海,独行舟上独行人
Done is better than perfect!
展开
-
调和阶段setState干了什么?
1.代码中调用 setState 函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。4.在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。3.在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染;原创 2023-01-31 14:30:33 · 205 阅读 · 0 评论 -
2023前端面试题(经典面试题)
在vue中引入了scoped这个概念,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便很多。如果computed属性的属性值是函数,那么默认使用get方法,函数的返回值就是属性的属性值;compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。原创 2023-03-20 21:05:23 · 1397 阅读 · 0 评论 -
React18新特性
React 团队在 2022 年 3 月 29 日正式发布了 React 的第 18 个版本。我将在这篇文章里简单介绍 React 18的新特性,React Concurrent Mode(并发模式)的实现,以及简要的升级指南。原创 2023-03-20 20:21:36 · 441 阅读 · 0 评论 -
路由动画切换( 左移,右移)
2、在入口文件处判断to和from中的index值大小,来进行路由动画的切换。1、 在router路由表中定义meta属性中的index,用index值来判断是左移还是右移。原创 2023-03-15 11:12:48 · 301 阅读 · 0 评论 -
json-server单独使用或者在react中进行使用
在该文件夹下定义db.json文件。原创 2023-03-10 15:32:42 · 599 阅读 · 0 评论 -
受控组件和非受控组件的区别
两者区别1、受控组件受控组件依赖于状态受控组件的修改会实时映射到状态值上,此时可以对输入的内容进行校验受控组件只有继承React.Component才会有状态受控组件必须要在表单上使用onChange事件来绑定对应的事件2、非受控组件非受控组件不受状态的控制非受控组件获取数据就是相当于操作DOM非受控组件可以很容易和第三方组件结合,更容易同时集成 React 和非 React 代码。原创 2023-01-31 09:40:19 · 657 阅读 · 0 评论 -
react新出来两个钩子函数是什么?和删掉的will系列有什么区别?
根据错误信息,可见这个钩子前面得加static关键字,这说明,不是给实例使用的,而是类自身调用的。并且这个钩子内部必须有返回值,返回值是一个state状体对象(返回的对象和组件的state的key:value;这个钩子还是比较常用的。并且点击按钮,count不再 + 1,返回的状态对象影响到了页面的更新(看新版本钩子图可知,它在render前面),并且以返回的状态对象为主。getDerivedStateFromProps钩子有2个参数,可以拿到组件传递的props和当前的组件状态。点击按钮触发页面更新。原创 2023-01-31 14:41:54 · 202 阅读 · 0 评论 -
对React Native的了解?
是一个由Facebook于2015 年 9 月发布的一款开源的,它可以让开发者使用 JavaScript 和 React 来开发跨平台的移动应用。它既保留了 React 的开发效率,又同时拥有 Native 应用的良好体验,加上Learn Once。原创 2023-03-07 21:04:02 · 372 阅读 · 0 评论 -
简述下 React 的事件代理机制?
React 并不会把所有的处理函数直接绑定在真实的节点上。而是把所有的事件绑定到结构的最外层,使用一个统一的事件监听器,这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时,只是在这个统一的事件监听器上插入或删除一些对象。当事件发生时,首先被这个统一的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。这样做的优点是解决了兼容性问题,并且简化了事件处理和回收机制(不需要手动的解绑事件,React 已经在内部处理了)。但是有些事件 React 并没有实现,比如。原创 2023-03-07 20:43:36 · 310 阅读 · 0 评论 -
react的事件机制详解
如上图所示,在JavaScript中,事件的触发实质上是要经过三个阶段:事件捕获、目标对象本身的事件处理和事件冒泡,假设在div中触发了click事件,实际上首先经历捕获阶段会由父级元素将事件一直传递到事件发生的元素,执行完目标事件本身的处理事件后,然后经历冒泡阶段,将事件从子元素向父元素冒泡。document中注册的事件不处理具体的事件,仅对事件进行分发。----------------------------来对比下与原生事件区别----------------------------------原创 2023-01-31 09:30:16 · 1584 阅读 · 1 评论 -
获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部
【代码】获取dom节点与页面顶部的高度 +平滑的自动上拉到页面顶部。原创 2023-03-05 19:37:39 · 230 阅读 · 0 评论 -
vue中使用json-server
1.安装json-server的两个依赖npm -g i json-servernpm install -g json-server2.安装axios依赖npm i axios3.全局导入axios使用src目录下main.js文件内import axios from ‘axios’;4.配置全局默认地址:src目录下main.js文件内axios.defaults.baseURL = ‘http://localhost:8081’5.创建一个json文件夹,json文件夹内新创一个data.jso原创 2023-03-05 19:26:50 · 1378 阅读 · 0 评论 -
react中使用百度地图报错:‘BMapGL‘ is not defined no-undef解决方法
在BMapGL前加个window即可,就出来了原创 2023-03-05 19:18:29 · 1086 阅读 · 0 评论 -
react-draggable实现拖拽详解
在页面中导入react-draggable。2. 初始化开始位置。原创 2023-03-04 19:51:48 · 4916 阅读 · 1 评论 -
说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?
说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?原创 2023-01-06 15:01:53 · 104 阅读 · 0 评论 -
react路由传参的三种方式(易理解)
【代码】react路由传参的三种方式(易理解)原创 2023-03-04 08:37:55 · 741 阅读 · 0 评论 -
React组件之间如何通信?
父组件 => 子组件:Props子组件 => 父组件:兄弟组件之间:不太相关的组件之间:ContextPortalsRedux等。原创 2023-01-31 14:13:48 · 198 阅读 · 0 评论 -
说说你对fiber架构的理解?解决了什么问题?
JavaScript引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待如果 JavaScript 线程长时间地占用了主线程,那么渲染层面的更新就不得不长时间地等待,界面长时间不更新,会导致页面响应度变差,用户可能会感觉到卡顿而这也正是 React 15 的 Stack Reconciler所面临的问题,当 React在渲染组件时,从开始到渲染完成整个过程是一气呵成的,无法中断如果组件较大,那么js线程会一直执行,然后等到整棵VDOM树计算完成后,才会交给渲染的线程。原创 2023-01-31 09:44:55 · 254 阅读 · 0 评论 -
面试题总结4
因为在项目中,可能不同组件会有相同的功能,比如控制元素的显示和隐藏,如果他们的变量和规则也完全相同的话,就可以把这个功能单独提取出来,放在。是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的。为作用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到⽗组件的作⽤域中。兄弟组件之间的传递,则父组件作为中间层来实现数据的互通,通过使用父组件传递。原创 2023-02-20 18:16:13 · 103 阅读 · 0 评论 -
react前端性能优化的手段有那些?
【代码】react前端性能优化的手段有那些?原创 2023-02-20 18:08:05 · 197 阅读 · 0 评论 -
说说React生命周期中有哪些坑?如何避免?
避免生命周期中的坑需要做好两件事:1、不在恰当的时候调用了不该调用的代码;2、在需要调用时,不要忘了调用。那么下面7种情况最容易造成生命周期的坑:追问:React 的请求应该放到哪里?为什么?对于异步请求,应该放到componentDidMount 中去操作,从生命周期函数执行顺序来看,除了componentDidMount 之外还有下面两种选择:所以React 的请求放在 componentDidMount 里是最好的选择。原创 2023-02-20 18:12:49 · 148 阅读 · 0 评论 -
state 和 props 触发更新的生命周期分别有什么区别?
注意:此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染,因为这可能会产生 bug。应该考虑使用内置的 PureComponent 组件,而不是手动编写 shouldComponentUpdate()原创 2023-02-28 21:15:01 · 712 阅读 · 0 评论 -
React循环DOM时为什么需要添加key
所以在每次更新的时候,React需要基于这两颗不同的树之间的差别来判断如何有效的更新UI,如果一棵树参考另外一棵树进行完全比较更新,那么即使是最先进的算法,该算法的复杂程度为 O(n3),其中 n 是树中元素的数量,如果在React中使用了该算法,那么展示1000个元素所需要执行的计算量将在十亿的量级范围,这个开销太过昂贵了,React的更新性能会变得非常低效;在下面这种场景下,key为"星际穿越"和"盗梦空间"的元素仅仅进行位移,不需要进行任何的修改;的不变,这种低效的比较方式会带来一定的性能问题,原创 2023-02-28 20:54:31 · 110 阅读 · 0 评论 -
mongoose + express写自查寻接口时,以递归格式多级查询或aggregate查询
【代码】mongoose + express写自查寻接口时,以递归格式多级查询或aggregate查询。原创 2023-02-27 15:56:23 · 185 阅读 · 0 评论 -
package.json详情解释,且他有什么规则?
我们在开发过程时经常会跟package.json打交道,它主要是描述当前项目的信息,包括项目名称,项目的版本,依赖包,作者,主入口,描述等等。我们安装依赖的时候,也是根据package.json的依赖版本去安装对应的依赖。所以说当接手一个项目的时候,我们首先先去看看它的,通过这个先对这个项目有一个基本的了解。原创 2023-02-26 18:59:31 · 244 阅读 · 0 评论 -
React的状态提升是什么?使用场景有哪些?
状态提升是指,公共父组件统一管理子组件状态的过程。React的状态提升就是用户对子组件操作,子组件不改变自己的状态,通过自己的props把这个操作改变的数据传递给父组件,改变父组件的状态,从而改变受父组件控制的所有子组件的状态,这也是React单项数据流的特性决定的。官方的原话是:共享 state(状态) 是通过将其移动到需要它的组件的最接近的共同祖先组件来实现的。这被称为“状态提升(Lifting State Up)”。原创 2023-02-20 20:33:30 · 915 阅读 · 0 评论