React
文章平均质量分 84
C+ 安口木
https://github.com/ytanck/
生命不息,coding不止...
展开
-
什么是虚拟DOM?如何实现一个虚拟DOM?
虚拟 DOM ()这个概念相信大家都不陌生,从React到Vue,虚拟DOM为这两个框架都带来了跨平台的能力(和Weex实际上它只是一层对真实DOM的抽象,以JavaScript对象 (VNode节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中,虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性,不同框架对这三个属性的名命可能会有差别创建虚拟。原创 2024-01-16 09:58:27 · 1156 阅读 · 0 评论 -
React函数组件使用Effect Hook(副作用钩子)
如果你熟悉 React class 的生命周期函数,你可以把useEffectHook 看做(挂载完成),(更新完成) 和(即将销毁前) 这三个函数的组合。Did : 做了… Will: 将要…。不管你知不知道这些操作,或是“副作用”这个名字,应该都在组件中使用过它们。在 React 组件中有两种常见副作用操作:**需要清除的 **和。我们来更仔细地看一下他们之间的区别。原创 2023-12-27 10:15:36 · 1682 阅读 · 0 评论 -
React中super() 和 super(props) 有什么区别?
在React中,类组件基于ES6,所以在中必须使用super在调用super过程,无论是否传入propsReact内部都会将porps赋值给组件实例porps属性中如果只调用了super(),那么this.props在super()和构造函数结束之间仍是undefined。原创 2023-12-26 10:11:54 · 703 阅读 · 0 评论 -
说说你对Redux的理解?其工作原理?
React是用于构建用户界面的,帮助我们解决渲染DOM的过程而在整个应用中会存在很多个组件,每个组件的state是由自身进行管理,包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享如果让每个组件都存储自身相关的状态,理论上来讲不会影响应用的运行,但在开发及后续维护阶段,我们将花费大量精力去查询状态的变化过程这种情况下,如果将所有的状态进行集中管理,当需要更新状态的时候,仅需要对这个管理集中处理,而不用去关心状态是如何分发到每一个组件内部的redux。原创 2023-12-26 10:10:16 · 725 阅读 · 0 评论 -
React Router有几种模式?实现原理?
在单页应用中,一个web项目只有一个html页面,一旦页面加载完成之后,就不用因为用户的操作而进行页面的重新加载或者跳转,其特性如下:改变 url 且不让浏览器像服务器发送请求在不刷新页面的前提下动态改变浏览器地址栏中的URL地址。原创 2023-12-25 10:18:40 · 526 阅读 · 0 评论 -
面试官:说说你对React Router的理解?常用的Router组件有哪些?
react-router-native:基于 react-router,加入了 react-native 运行环境下的一些功能。react-router-dom: 基于 react-router,加入了在浏览器运行环境下的一些功能。作为顶层组件包裹其他组件后,页面组件就可以接收到一些路由相关的东西,比如。组件的作用适用于当匹配到第一个组件的时候,后面的组件就不应该继续匹配。等前端路由的原理大致相同,可以实现无刷新的条件下切换显示不同的页面。用于路由的重定向,当这个组件出现时,就会执行跳转到对应的。原创 2023-12-25 10:15:45 · 1033 阅读 · 0 评论 -
说说对React refs 的理解?应用场景?
Refs在计算机中称为弹性文件系统(英语:Resilient File System,简称ReFS)React中的Refs提供了一种方式,允许我们访问DOM节点或在render方法中创建的React元素本质为返回的组件实例,如果是渲染组件则返回的是组件实例,如果渲染dom则返回的是具体的dom节点。原创 2023-12-21 09:56:42 · 997 阅读 · 0 评论 -
说说对React Hooks的理解?解决了什么问题?
组件式开发选择合适的css解决方案尤为重要在这一方面,vue使用css而在react中,引入CSS就不如Vue方便简洁,其引入css的方式有很多种,各有利弊。原创 2023-12-21 09:53:55 · 1250 阅读 · 0 评论 -
说说 React 生命周期有哪些?
新版生命周期整体流程如下图所示:旧的生命周期流程图如下:其实这三个方法仍然存在,只是在前者加上了UNSAFE_前缀,如,并不像字面意思那样表示不安全,而是表示这些生命周期的代码可能在未来的react版本可能废除。原创 2023-12-20 09:56:53 · 1260 阅读 · 0 评论 -
React Jsx转换成真实DOM过程?
在react源码中,虚拟Dom转化成真实Dom整体流程如下图所示:使用React.createElement或JSX编写React组件,实际上所有的 JSX 代码最后都会转换成React.createElement(…) ,Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理,并获取defaultProps对默认props进行赋值,并且对传入的孩子节点进行处理,最终构造成一个虚拟DOM对象。原创 2023-12-19 10:00:35 · 1046 阅读 · 0 评论 -
如何提高React组件的渲染效率的?在React中如何避免不必要的render?
在实际开发过程中,前端性能问题是一个必须考虑的问题,随着业务的复杂,遇到性能问题的概率也在增高除此之外,建议将页面进行更小的颗粒化,如果一个过大,当状态发生修改的时候,就会导致整个大组件的渲染,而对组件进行拆分后,粒度变小了,也能够减少子组件不必要的渲染。原创 2023-12-19 09:57:20 · 437 阅读 · 0 评论 -
面试官:说说react中引入css的方式有哪几种?区别?
组件式开发选择合适的css解决方案尤为重要在这一方面,vue使用css而在react中,引入CSS就不如Vue方便简洁,其引入css的方式有很多种,各有利弊。原创 2023-12-18 10:59:09 · 151 阅读 · 0 评论 -
面试官:你在React项目中是如何使用Redux的? 项目结构是如何划分的?
在前面文章了解中,我们了解到redux是用于数据状态管理,而react是一个视图层面的库如果将两者连接在一起,可以使用官方推荐库,其具有高效且灵活的特性通过redux将整个应用状态存储到store中,组件可以派发dispatch行为action给store其他组件通过订阅store中的状态state来更新自身的视图。原创 2023-12-18 10:57:54 · 46 阅读 · 0 评论 -
说说对React高阶组件的理解?应用场景?
高阶函数(Higher-order function),至少满足下列一个条件的函数在React中,高阶组件即接受一个或多个组件作为参数并且返回一个组件,本质也就是一个函数,并不是一个组件上述代码中,该函数接受一个组件作为参数,返回加工过的新组件高阶组件的这种实现方式,本质上是一个装饰者设计模式。原创 2023-12-15 10:03:30 · 276 阅读 · 0 评论 -
React受控组件和非受控组件的理解?应用场景?
受控组件,简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据这时候当我们在输入框输入内容的时候,会发现输入的内容并无法显示出来,也就是input标签是一个可读的状态这是因为value被所控制住。当用户输入新的内容时,并不会自动更新,这样的话input内的内容也就不会变了如果想要解除被控制,可以为input标签设置onChange事件,输入的时候触发事件函数,在函数内部实现state的更新,从而导致input框的内容页发现改变因此,受控组件我们一般需要初始状态和一个状态更新事件函数。原创 2023-12-15 09:57:51 · 210 阅读 · 0 评论 -
React中组件之间如何通信?
由于React是单向数据流,主要思想是组件不会改变接收的数据,只会监听数据的变化,当数据发生变化时它们会使用接收到的新值,而不是去修改已有的值因此,可以看到通信过程中,数据的存储位置都是存放在上级位置中。原创 2023-12-13 16:34:45 · 644 阅读 · 0 评论 -
React中类组件和函数组件的区别?
类组件,顾名思义,也就是通过使用ES6类的编写形式去编写组件,该类必须继承如果想要访问父组件传递过来的参数,可通过this.props的方式去访问在组件中必须实现render方法,在return中返回React。原创 2023-12-13 16:33:23 · 276 阅读 · 0 评论 -
React构建组件的方式有哪些?区别?
组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式在React中,一个类、一个函数都可以视为一个组件在。原创 2023-12-12 09:58:14 · 316 阅读 · 0 评论 -
React事件绑定的方式有哪些?区别?
跟上述方式三一样,能够避免在renderrender() {return (原创 2023-12-12 09:57:05 · 226 阅读 · 0 评论