react
文章平均质量分 62
蓝莓味柯基
这个作者很懒,什么都没留下…
展开
-
React——useEffect和自定义useUpdateEffect
useEffect 是React的一个内置Hook,用于在组件渲染后执行副作用(例如数据获取、订阅或手动更改DOM)。它将在第一次渲染后和每次更新后都会执行。相比之下,useUpdateEffect 不是React内置的Hook,但这个名称通常被用于自定义Hook,其行为类似于 useEffect,但它,只会在依赖项更新时执行。这可以通过跟踪组件是否已经挂载来实现。在这个自定义 useUpdateEffect 中,我们使用了 useRef 来追踪组件是否是首次渲染。原创 2024-07-22 14:34:37 · 609 阅读 · 0 评论 -
Reacr报错:Hooks can only be called inside the body of a function component.
比如你可能正在使用尚不支持 Hooks的版本react-dom(< 16.8.0) 或(< 0.59)。如果违反这些规则,可能会看到此错误。还有一种情况比较少见,原创 2024-07-18 11:44:24 · 261 阅读 · 0 评论 -
React -- useState状态更新异步特性——导致获取值为旧值的问题
请注意,设置键盘事件监听的 useEffect 中的依赖数组被设置为空([]),意味着这个 effect 只在组件挂载时添加事件监听器,并且在组件卸载时移除。在 React 的 useEffect 钩子中使用事件处理器时,如果事件处理器引用了组件的状态或属性,并且这些状态或属性在函数定义时的值被固定下来,那么我们就说这个事件处理器是一个闭包,并且它“捕获”了定义它时的环境。当时的场景,主要是为了设置一个esc快捷键,esc快捷键的逻辑功能和按钮为“Done”的时候点击效果是一样的。使用useRef记录值。原创 2024-07-08 10:54:40 · 1160 阅读 · 1 评论 -
Reac--组件动态的类名书写
在实际应用中,有的时候需要根据变量动态调整元素样式。原创 2024-07-04 16:15:05 · 210 阅读 · 0 评论 -
React--两种常见的组件嵌套方式
在父组件中直接使用子组件。在父组件的实现内部引入并使用子组件。这两种方式在代码结构和组织上有所不同,但功能上并没有本质区别。外部嵌套: 组件可以接收任意子组件内容,提供了更大的灵活性和组合性。内部嵌套: 组件内部固定包含 Copyright 组件,结构更加固定和简单。原创 2024-06-21 10:29:28 · 578 阅读 · 0 评论 -
React组件卸载的几种情况
React 组件的卸载(unmounting)阶段是指组件从DOM中被移除的过程。原创 2024-06-19 14:46:20 · 477 阅读 · 0 评论 -
React <> </>的用法
在 React 中,使用 表示一个空标签或片段(Fragment),这是一个简洁的方式来包裹一组子元素而不在 DOM 树中添加额外的节点。空标签在 JSX 语法中是一种简写形式,相当于 React.Fragment。它的主要作用是允许你在不引入额外 DOM 元素的情况下返回多个子元素。减少不必要的 DOM 元素:如果你只是想包裹一组元素而不希望在 DOM 树中添加额外的或标签,可以使用片段。它使得 JSX 结构更清晰,避免了嵌套过多的容器元素。原创 2024-06-14 10:50:31 · 574 阅读 · 0 评论 -
react+vite创建
默认情况下,Vite将会在本地的3000端口启动应用程序(如果该端口已被占用,Vite会尝试使用下一个可用端口)。打开你的终端(在macOS或Linux系统中)或命令提示符/PowerShell(在Windows系统中)。这样你就完成了使用Vite和React初始化项目的基础设置,现在你可以开始开发你的React应用了。确保你的机器上已安装了Node.js。这里的my-react-app是你想要创建的项目名称,你可以更改为任何你喜欢的名称。使用Vite提供的模板来创建一个新的React项目。原创 2024-06-06 13:29:36 · 383 阅读 · 0 评论 -
React -- memo允许你的组件在 props 没有改变的情况下跳过重新渲染。
使用 memo 将组件包装起来,以获得该组件的一个 记忆化 版本。通常情况下,只要该组件的 props 没有改变,这个记忆化版本就不会在其父组件重新渲染时重新渲染。但 React 仍可能会重新渲染它:记忆化是一种性能优化,而非保证。Component:要进行记忆化的组件。memo 不会修改该组件,而是返回一个新的、记忆化的组件。它接受任何有效的 React 组件,包括函数组件和 forwardRef 组件。原创 2024-06-04 11:46:05 · 976 阅读 · 1 评论 -
react通过onChange传输select的value数据
当 Select 组件的选项变更时,如果组件本身就是设计为直接传递新的值(在这种情况下是选定的车位 ID)给 onChange 回调函数,那么便不需要从事件对象中提取该值。在你的代码中,store.getState().setTargetParkingSpace 准备好接收该 ID,并且被用作 onChange 的回调。这种行为意味着 Select 组件的实现方式是预期其 onChange 属性将一个值传递给回调函数,而不是传递一个完整的事件对象。这在一些UI库中很常见,尤其是那些旨在简化表单处理的库。原创 2024-05-11 09:54:00 · 385 阅读 · 0 评论 -
react-mosaic-component-一个React库--窗格布局
react-mosaic-component是一个React库,用于创建可调整大小和可拖动的窗格布局。这通常用于构建复杂的用户界面,其中需要多个工作区或面板,用户可以根据需要重新排列或调整它们的大小。例如,它可以在IDEs或数据分析应用程序中找到应用。只有在项目的依赖项中已经添加了react-mosaic-component包之后,上述导入语句才能正确工作。从名为react-mosaic-component的npm包中引入三个组件:Mosaic,MosaicWindow和MosaicZeroState。原创 2024-04-29 09:42:12 · 843 阅读 · 0 评论