![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 89
主要是关于React技术栈的知识
heiyay
这个作者很懒,什么都没留下…
展开
-
学习篇之React Fiber概念及原理
React Fiber 是 React 框架的一种底层架构,为了改进 React 的渲染引擎,使其更加高效、灵活和可扩展。原创 2023-08-13 17:31:48 · 4319 阅读 · 0 评论 -
react class与hooks区别
如果你已经在使用 Class 组件,迁移到 Hooks 可能需要一些时间和努力。使用 Hooks 时,可以更容易地将逻辑进行拆分和组合,因为逻辑可以在不同的 Hook 中进行封装。Hooks 使得代码重用变得更加容易,可以将逻辑抽象为自定义的 Hook,然后在多个组件中共享。对于已经熟悉 Class 组件的开发者来说,学习和适应 Hooks 可能需要一些时间,因为需要重新学习一种新的编写风格和状态管理方式。在React中,有两种主要的方式来管理组件的状态和生命周期:Class 组件和 Hooks。原创 2023-08-09 19:33:02 · 1360 阅读 · 0 评论 -
React Portals
React Portals(React 门户)是 React 提供的一种机制,用于将组件渲染到 DOM 树中的不同位置,而不受组件层次结构的限制。它允许你将一个组件的渲染内容“传送”到 DOM 结构中的任何位置,通常用于处理一些特殊的 UI 布局需求,如弹出窗口、模态框、通知框等。原创 2023-09-01 17:01:38 · 1494 阅读 · 0 评论 -
理解React页面渲染原理,如何优化React性能?
当使用React编写应用程序时,可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法,但实际上它是一种JavaScript的扩展,用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。你使用JSX语法编写React组件的界面结构。JSX语法并不是浏览器原生支持的,所以需要使用工具将JSX代码转换为浏览器可识别的JavaScript代码。通常会使用Babel这样的工具来进行这种转换。是一个用于创建React元素的函数,它接受标签名、属性和子元素作为参数。原创 2023-08-31 17:41:11 · 1311 阅读 · 2 评论 -
react中受控组件与非受控组件
不要在函数组件主体或 class 组件 render 方法中设置 ref,这可能导致 ref 不一致。输入的值通过状态state来控制,onChange 也会更新状态,所以组件受 React 的控制。函数组件没有实例,它的 ref 会在每次渲染时发生变化,可能导致奇怪的 bug。其值由 React 控制的组件,通常使用 state 来控制和修改组件的值。当ref挂载完成后,ref.current会指向对应的组件或DOM元素。当组件重新渲染时,ref 不会自动变化,需要在组件加载和卸载时手动更新。原创 2023-08-31 20:29:45 · 741 阅读 · 0 评论 -
React Router,常用API有哪些?
react-router-dom还提供了一些自定义Hook,用于在函数组件中访问路由相关信息。原创 2023-09-12 17:35:07 · 456 阅读 · 0 评论 -
什么是redux?如何在react 项目中使用redux?
redux是一种用于管理JavaScript应用程序的状态管理库。它可以与React、Augular、Vue等前端框架结合使用,但也可以纯在JavaScript应用程序中独立使用。redux遵循单项数据流的原则,通过一个全局的状态树来管理应用程序的状态,从而使状态的变化更加可预测和已于维护。原创 2023-07-29 14:18:25 · 1481 阅读 · 0 评论 -
react之自定义hooks
要自定义一个类似于的自定义 Hook,你可以借助 React 的useEffect和useRefHooks 来实现。effect();} else {// 使用示例return (在上述示例中,我们创建了一个名为的自定义 Hook。effect和。在内部,我们使用了useRef来创建一个标记是否已经完成初始渲染的变量isMounted。在useEffect中,我们检查isMounted的值。如果isMounted的值为true。原创 2023-07-01 18:24:48 · 3945 阅读 · 5 评论 -
react+jest+enzyme配置及编写前端单元测试UT
本文主要介绍在react项目中如何结合jes和enzyme编写单元测试代码。配置测试文件,以及测试技巧,如何触发ant design组件和mock掉一些请求及其他影响UT运行的代码。原创 2023-07-12 17:34:10 · 1018 阅读 · 0 评论 -
React、Vue3中父组件如何调用子组件内部的方法
本文介绍在react和vue项目中父组件如何调用子组件的方法原创 2023-07-13 17:32:53 · 2311 阅读 · 0 评论 -
React前端项目生成词云图
词云图(word cloud)是一个常见的可视化技术,可以直观有效地反映文本主题的特征和结构。React 项目中来实现前端词云图,可以使用第三方 JavaScript 词云图库,通过 npm 安装,然后在项目中直接使用。原创 2023-06-30 21:19:44 · 1562 阅读 · 0 评论 -
一篇读懂React、vue框架的生命周期函数
当涉及到前端框架时,React 和 Vue.js 是两个非常受欢迎的选择。它们都提供了强大的工具和功能,帮助开发者构建交互式的、可扩展的应用程序。在这两个框架中,生命周期函数是一个重要的概念,它们允许我们在组件的不同阶段执行特定的代码。React 和 Vue.js 的生命周期函数提供了一种组件生命周期管理的机制,让我们能够在组件的创建、更新和销毁等不同阶段执行特定的操作。这些函数包括在组件实例化、挂载到DOM、更新、卸载等过程中被自动调用,使我们能够在关键时刻对组件进行控制和操作。原创 2023-07-05 16:39:02 · 210 阅读 · 0 评论 -
React、Vue框架如何实现组件更新,原理是什么?
React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式。为了优化性能,两者都采用了虚拟DOM技术。当组件状态发生改变时,它们会使用虚拟DOM进行局部渲染比对,只更新必要的DOM节点,从而避免重新渲染整个组件树。原创 2023-07-15 10:56:11 · 26851 阅读 · 1 评论 -
封装React组件DragLine,鼠标拖拽的边框改变元素宽度
如何实现鼠标拖拽改变元素大小原创 2023-07-13 17:34:42 · 1987 阅读 · 1 评论