![](https://img-blog.csdnimg.cn/1045daa41cc342cea88b648dcca8b4e6.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
文章平均质量分 70
react相关知识点
夏兮颜☆
虽然很辛苦,但我还是要选择那种滚烫的人生
展开
-
react滚动条怎么位于最底部(类似聊天页面)
j实现滚动条一直是在底部靠的是元素的scrollTop和scrollHeight来实现的,但是在react中是行不通的。当消息较多出现滚动条时,有后续新消息的话总将滚动条滚动到最底部。原创 2023-03-28 19:40:44 · 1727 阅读 · 0 评论 -
react新出来两个钩子函数是什么?和删掉的will系列有什么区别?
这个钩子的意思其实就是再组件更新前获取快照,此方法一般是结合componentDidUpdate使用,getSnapshotBeforeUpdate中返回的值将作为第三参数传递给componentDidUpdate。这个钩子的作用其实就是从props获取衍生的state。三个钩子函数是被废弃,但是不是直接不能用了,而是官方会给出警告并推荐我们在这三个钩子前添加UNSAFE_前缀。为什么被废弃呢,因为使用率并不太高,这三个钩子很容易被误解和滥用,这几个钩子不稳定。原创 2023-03-13 10:00:26 · 83 阅读 · 0 评论 -
为什么React元素有一个$$typeof属性?
之后方法会返回一个对象给你,我们称此对象为React的元素(element),它告诉 React 下一个要渲染什么。你的组件(component)返回一个它们组成的树(tree)。原创 2023-02-20 14:38:07 · 331 阅读 · 0 评论 -
React中的diff算法的原理是什么?
实际上,dif 算法探讨的就是虚拟 DOM 树发生变化后,生成 DOM 树更新补丁的方式。它通过对比新旧两株虚拟 DOM 树的变更差异,将更新补丁作用于真实 DOM,以最小成本完成视图更新。跟Vue一致,React通过引入Virtual DOM的概念,极大地避免无效的Dom操作,使我们的页面的构建效率提到了极大的提升。而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处。diff算法可以总结为二个策略,分别从树、组件及元素三个层面进行复杂度的优化。原创 2023-01-05 09:03:58 · 556 阅读 · 0 评论 -
说说React生命周期中有哪些坑?如何避免?
如何避免坑?”换种思维思考也就是“为什么会有坑?要避免生命周期的坑,就需要先了解React有那些生命周期?在React的不同版本生命周期的钩子函数也大同小异。React的生命周期分为三个阶段,不同的阶段触发不用的钩子函数。接下来我们就一一来看看。原创 2023-02-20 13:59:18 · 231 阅读 · 0 评论 -
说说你对redux中间件的理解?常用的中间件有哪些?实现原理?
当action发出之后,reducer立即算出state,整个过程是一个同步的操作,如果需要异步操作,就需要中间件的支持。中间件(Middleware)是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的。中间件本身是一个函数,该函数接收一个store参数,表示创建的仓库,该仓库并非一个完整的仓库对象,仅包含getState,dispatch。该函数运行的时间,是在仓库创建之后运行。原创 2023-01-31 10:50:25 · 185 阅读 · 0 评论 -
调和阶段setState干了什么?
调和阶段setState干了什么?原创 2023-01-31 10:07:15 · 122 阅读 · 0 评论 -
React中hook之间的区别?
有很多时候,我们在 useEffect 中使用某个定义的外部函数,是要添加到 deps 数组中的,如果不用 useCallback 缓存,这个函数在每次重新渲染时都是一个完全新的函数,也就是引用地址发生了变化,这就会导致 useEffect 总会无意义的执行。原创 2023-01-06 16:41:59 · 78 阅读 · 0 评论 -
说说对React Hooks的理解?解决了什么问题?
可以点击查看官网详解Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。难以重用和共享组件中的与状态相关的逻辑逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的 local state时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面类组件中的this增加学习成本,类组件在基于现有工具的优化上存在些许问题由于业务变动,函数组件不得不改为类组件等等。原创 2023-01-06 15:16:41 · 140 阅读 · 0 评论 -
说说对受控组件和非受控组件的理解?应用场景?
受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据这时候当我们在输入框输入内容的时候,会发现输入的内容并无法显示出来,也就是input标签是一个可读的状态这是因为value被this.state.username所控制住。当用户输入新的内容时,this.state.username并不会自动更新,这样的话input内的内容也就不会变了。原创 2023-01-06 14:50:36 · 118 阅读 · 0 评论 -
说说React render方法的原理?在什么时候会被触发?
render函数里面可以编写JSX,转化成createElement这种形式,用于生成虚拟DOM,最终转化成真实DOM在React 中,类组件只要执行了 setState 方法,就一定会触发 render 函数执行,函数组件使用useState更改状态不一定导致重新render组件的props 改变了,不一定触发 render 函数的执行,但是如果 props 的值来自于父组件或者祖先组件的 state在这种情况下,父组件或者祖先组件的 state 发生了改变,就会导致子组件的重新渲染。原创 2023-01-05 11:41:41 · 180 阅读 · 0 评论 -
Redux中的connect的相关知识点
将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对象 Connect,Connect重新 render 外部传入的原组件 WrappedComponent ,并把 connect 中传入的 mapStateToProps,mapDispatchToProps与组件上原有的 props 合并后,通过属性的方式传给 WrappedComponent。监听store tree变化。connect接受四个参数。原创 2023-01-05 09:54:55 · 2378 阅读 · 0 评论 -
React合成事件基础知识
事件是在编程时系统内发生的动作或者发生的事情,而开发者可以某种方式对事件做出回应,而这里有几个先决条件事件对象给事件对象注册事件,当事件被触发后需要做什么事件触发React并不是将click事件绑定到了div的真实DOM上,而是在document处监听了所有的事件,当事件发生并且冒泡到document处的时候,React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗,还能在组件挂在销毁时统一订阅和移除事开。原创 2023-01-05 09:34:53 · 213 阅读 · 0 评论 -
React 生命周期有哪些不同阶段?每个阶段对应的方法是?
React整个组件生命周期包括从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程constructorgetDerivedStateFromPropsrendercomponentDidMount当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentD原创 2022-12-31 08:11:57 · 89 阅读 · 0 评论 -
react-router6.0新版本 NavLink中activeClassName是无效的
在使用react-router6.0版本,实现一个点击切换样式,使用activeClassName是没有效果的。:是因为6.0版本官方已经不再支持activeClassName这种写法,需要换成动态设置className。原创 2022-12-05 17:01:18 · 466 阅读 · 0 评论 -
React中可以做哪些性能优化
使用 immutable 不可变数据,在我们项目中使用引用类型时,为了避免对原始数据的影响,一般建议使用 shallowCopy 和 deepCopy 对数据进行处理,但是这样会造成 CPU 和 内存的浪费,所以推荐使用 immutable。将 props 设置为数组或对象:每次调用 React组件都会创建新组件,就算传入的数组或对象的值没有改变,他们的引用地址也会发生改变,比如,如果按照如下的写法,那么每次渲染时 style都是一个新对象。我们应该在组件内部创建一个函数,并将事件绑定到该函数本身。原创 2022-12-29 15:08:44 · 338 阅读 · 0 评论