react
文章平均质量分 88
godlike-icy
努力学习,不断超越!
展开
-
React高频面试题100+题,这一篇就够了!
前端React100+道高频面试题原创 2023-10-20 17:40:20 · 259 阅读 · 0 评论 -
【React】高频面试题
在react源码中,虚拟Dom转化成真实Dom整体流程如下图所示:使用React.createElement或JSX编写React组件,实际上所有的 JSX 代码最后都会转换成React.createElement(…) ,Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理,并获取defaultProps对默认props进行赋值,并且对传入的孩子节点进行处理,最终构造成一个虚拟DOM对象。原创 2023-10-20 16:22:43 · 612 阅读 · 0 评论 -
【react】精选5题
React合成事件是React框架提供的一种事件系统,用于处理用户交互和DOM事件。它是对原生浏览器事件的封装和模拟,提供了一致的跨浏览器和跨平台的事件处理机制。React合成事件的特点和好处包括:跨浏览器兼容性:React合成事件对不同浏览器的事件兼容性进行了处理,提供了一致的事件接口,使得开发者不需要关心不同浏览器的差异。性能优化:React合成事件使用了事件委托的方式,将事件监听器添加到父级元素上,减少了事件监听器的数量,提高了性能。原创 2023-10-20 13:02:46 · 473 阅读 · 0 评论 -
【React】面试题5题
但这个会有限制,如果自定义的属性不是 string, number 或者 object,该属性依然会被忽略。</video>在上述代码中,webkitPlaysinline被作为video标签的自定义属性,并设置为true。这样可以达到给video标签设置webkit-playsinline的效果。需要注意的是,设置自定义属性时,React会将驼峰命名法的属性转换为小写和连字符的形式。例如,webkitPlaysinline会被转换为webkit-playsinline。原创 2023-09-14 17:36:51 · 305 阅读 · 0 评论 -
【React】精选5题
自定义 Hook 是一种在 React 中共享逻辑的机制。它可以让你将组件逻辑提取到可重用的函数中,并在函数组件中使用。自定义 Hook 按照一定的命名规则命名,以 “use” 开头,例如 useFetchData 或 useTheme。它们可以使用其他的 React Hook,也可以是纯 JavaScript 函数。命名和定义:为你的自定义 Hook 选择一个有意义的名称,并定义一个函数,遵循 use 开头的命名规则。例如:// ...具体的逻辑。原创 2023-09-11 17:16:10 · 635 阅读 · 0 评论 -
【React】精选5题
受控组件和非受控组件是 React 中关于表单组件的两种不同的实现方式。原创 2023-09-05 14:57:39 · 1039 阅读 · 0 评论 -
【React】精选5题
区别:函数组件比类组件更简洁,没有繁琐的生命周期和状态管理,适用于简单的UI组件。类组件可以拥有自己的状态和生命周期方法,更适合复杂的交互逻辑和数据管理。原创 2023-08-28 19:14:16 · 344 阅读 · 0 评论 -
【React】精选5题
Props:组件的数据流向一般是单向的,父组件通过 Props 将数据传递给子组件。子组件可以通过 this.props 来访问这些数据。父组件也可以通过 Props 向子组件传递函数,使得子组件可以向父组件发送消息。Context:React 的 Context API 可以用于在组件树中共享数据,从而避免 Props drilling(即将 Props 层层传递给深层组件)。原创 2023-08-15 15:54:31 · 1584 阅读 · 0 评论 -
【React】精选5题
React.lazy() 和 React.Suspense 的提出为现代 React 应用的性能优化和工程化提供了便捷之路。React.lazy 可以让我们像渲染常规组件一样处理动态引入的组件,结合 Suspense 可以更优雅地展现组件懒加载的过渡动画以及处理加载异常的场景。原创 2023-08-14 15:58:32 · 478 阅读 · 0 评论 -
【React】精选10题
在 React 中,当组件的状态发生变化时,React 会重新渲染组件。为了提高渲染效率,React 会使用一种叫做 diff 算法(也称为协调算法)来计算出哪些部分需要更新,哪些部分不需要更新。简单来说,diff 算法就是比较两棵树的差异,然后将差异应用到真实的 DOM 树上,从而实现只更新必要的部分,避免全量更新。React 中的 diff 算法具体实现如下:对比两棵树的根节点,如果类型不同,则直接替换整个节点及其子节点,不再进行进一步比较;如果类型相同,则进入下一步。原创 2023-08-11 12:25:31 · 1274 阅读 · 0 评论 -
【React】精选5题
当组件列表中的某个组件的 key 值改变时,React 会将其视为一个新的组件,并重新渲染该组件,而不是仅仅修改其属性。这可以避免不必要的 DOM 操作,提高渲染性能。组件的 key 值是其唯一标识符,帮助 React 识别组件。当组件从列表中移除时,React 可以根据 key 值来判断哪些组件需要被移除。同时,在列表中添加、删除、修改组件时,key 值也可以帮助 React 正确地更新组件的状态,避免出现意外的渲染结果。在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。原创 2023-08-11 10:51:23 · 1238 阅读 · 0 评论 -
【React】精选5题
受控组件是指由 React 组件管理其内部状态的表单元素。这意味着表单元素的值由组件的 state 控制,并通过回调函数来更新状态。当用户与受控组件交互时,组件会更新其状态,并在需要时将新的值传递给表单元素。通过受控组件,你可以实时获取和更新表单元素的值,并在组件的 state 中进行处理。这使得对表单数据进行验证、处理和提交变得更加灵活和可控。另一方面,非受控组件则是由 DOM 自己管理其值的表单元素。在非受控组件中,你需要使用 ref 来获取表单元素的值,并手动处理用户输入的数据。原创 2023-07-21 13:47:03 · 286 阅读 · 0 评论 -
react目录结构
实际开发中也可以简单按照个人风格调整,比如const单独拿出来,不放在文件夹中,因为实际上并没有那么多常量去使用。utils也可以放在最外层而不用放在文件夹中。i18n:i18n国际化,各种语言的翻译。contants:常量文件夹,存放常量。components:存放全局组件。utils:存放一些常用函数的封装。assets:放置原始资源文件。比较全面的react目录结构。router:路由文件夹。pages:页面文件夹。原创 2023-07-21 10:39:10 · 423 阅读 · 0 评论 -
【React】每日精选5题
综上所述,React.memo() 和 JS 的 memorize 函数虽然都是用于提高函数的性能表现,但其适用范围、实现方式、缓存策略和应用场景等方面还是有一定的区别。开发者需要根据具体情况来选择合适的性能优化手段,以提高应用程序的性能和响应速度。原创 2023-07-14 11:34:02 · 1060 阅读 · 0 评论 -
【React】每日精选5题
React每日精选5题原创 2023-07-06 11:03:03 · 635 阅读 · 0 评论 -
【React】react-router v6 基础 (含代码)
几分种学会react-router v6原创 2023-04-14 10:36:09 · 532 阅读 · 5 评论 -
React教程(五):Hooks
hooks本质:一套能够使函数组件更强大更灵活的`钩子`。原创 2023-04-06 16:26:01 · 417 阅读 · 0 评论 -
React教程(四):React组件进阶
组件children属性,props校验,以及React生命周期函数原创 2023-03-31 16:42:04 · 309 阅读 · 1 评论 -
React教程(三):React组件通信
组件通信方式可以归纳为以下几种情况:1. 父子关系(比较常用)2. 兄弟关系- 自定义时间模式产生技术方法 eventBus / 通过共同的父组件通信3. 其他关系 - mbox / redux / 基于hook的方案### 1.父传子原创 2023-03-29 14:42:55 · 479 阅读 · 0 评论 -
React教程(一):React基础
一个专注于构建用户界面的javascript库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内最流行的的js前端框架。概念:JSX是javascript XML(HTML)的缩写,表示在JS代码中书写HTML结构。作用:在React中创建HTML结构(页面UI结构)优势:1)采用类似HTML的语法,降低学习成本,即会用HTML就会JSX2)充分利用JS自身的可编程能力创建HTML结构。原创 2023-03-23 14:46:12 · 791 阅读 · 1 评论 -
React教程(二):React组件基础
React 允许你将标记、CSS 和 JavaScript 组合成自定义“组件”,即应用程序中可复用的 UI 元素。原创 2023-03-27 18:50:21 · 639 阅读 · 1 评论 -
快速理解React钩子函数之useRef
useRef 返回一个可变的ref对象,它的.cuttent属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内持续存在。形式传入组件,则无论该节点如何改变,React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。如果你将 ref 对象以。原创 2022-10-10 11:13:59 · 514 阅读 · 5 评论