![](https://img-blog.csdnimg.cn/direct/93edbe3a978c41d7bbba0fc52a29c970.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React杂谈基础与进阶
文章平均质量分 58
基础决定成败,越是基础的东西,越要注意,这都是react进阶的前提。技术交响,欢迎互动 ~
Amore0525
人间有味是清欢
展开
-
React中使用usePrevious的意义是什么,为啥要用它
如上面代码,prevOption 和 prevClickEvent 使用 usePrevious 自定义 Hook 来存储前一个值的变量,作用是比较当前的 option 和 onClick 值与上一次的值是否相等。如果相等,则表示没有发生改变,不需要更新图表。通过比较前后值,可以避免不必要的更新和重复渲染,提高代码的性能和效率。usePrevious 是一个自定义 Hook,用于记录上一次的状态,以便在下一次渲染时进行比较。这对于需要比较前后值的场景非常有用,例如图表的更新和事件监听器的添加。原创 2024-07-13 09:21:09 · 397 阅读 · 0 评论 -
谈谈在专栏【React+TS前台项目实战】项目中用到的Typescript定义方式
今天不讲实战,来讲一下我们专栏【React+TS前台项目实战】中用到的Typescript用法,比起网上那些直接概念式地讲,通过实战我们更能加深对Typescript方面相关知识的理解。函数返回类型为promise,这个在Button组件的封装中使用了。上面就是专栏【React+TS前台项目实战】目前为止主要用到的类型声明定义的方式,接下来会继续这个专栏文章的发布,还会继续用到其他方式进行类型声明定义,请持续关注。原创 2024-06-30 12:16:05 · 996 阅读 · 0 评论 -
如何使用styled实现嵌套组件继承父组件Props以及样式定义
当使用styled-components将属性传递给嵌套组件时,可以通过将属性和样式定义应用于嵌套组件的父组件来实现。然后,通过组件继承或组件的props传递,属性和样式定义将被传递到嵌套组件中。// 引入styled-components库// 引入子组件总之,使用styled-components将属性和样式定义传递给嵌套组件实现了代码切割分离,看起来也简洁写,可以保持代码的可读性和可维护性。原创 2024-06-29 09:50:44 · 218 阅读 · 0 评论 -
一步步教你在React中使用requestAnimationFrame实现动画,提升性能!
有时候我们要做一个组件的动画效果,想到的就是用css来控制,但是会有一些缺点,只能实现一些简单的动画效果,无法实现更复杂的动画效果;动画帧无法控制。如果想实现复杂和较精确的动画效果,就需要用requestAnimationFrame,它可以实现更好的性能和更好的灵活动画控制。而且可根据浏览器刷新率来决定每帧的执行时间,保证了动画的流畅性。接下来我们使用requestAnimationFrame来实现一个动画效果,元素透明度从0到1显示后,清除该元素,前面有讲过,这里做个详细分析,教你一步步学会使用。原创 2024-06-19 09:11:23 · 563 阅读 · 0 评论 -
浅聊useRoutes必须结合BrowserRouter使用的原因
要解决这个问题,就必须确保你的组件中有一个 组件包裹着使用 useRoutes 钩子的组件。组件负责为整个应用程序提供路由上下文。原创 2024-06-15 17:03:31 · 355 阅读 · 0 评论 -
React中使用 ts 后,craco库配置别名时需要注意什么?
我们都知道craco库可以用来覆盖react配置,如设置别名等。但是在项目使用 Typescript 后,我们需要额外配置,否则会造成编译报错。项目初始化与配置在使用 craco库时,需要同时在 tsconfig.json 文件中配置别名,因为 craco库是用于配置 Webpack 的别名,而不是 TypeScript 的别名。TypeScript 的别名是在 tsconfig.json 文件中配置的,而 Webpack 的别名可以通过craco库进行配置。原创 2024-06-05 16:48:24 · 801 阅读 · 0 评论 -
浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别
在现在的react开发中,我们经常会使用的一些比较型的hook,都是为了提升性能,起到优化的目的。但是不能为了用而用,这东西不是用的越多越好,要视情况而定。下面讲几个常用的,并对比之间的区别。原创 2024-06-04 15:47:17 · 499 阅读 · 0 评论 -
React ahooks库和React Query库使用场景分析
ahooks和react-query都是好用的react库,但它们有一些关键的区别。ahooks 是一个 React Hooks 库,主要是对react的hook函数进行高级封装,使得项目用起来更加方便;react-query 是一个用于管理应用程序数据和状态的库,它专注于处理数据获取和缓存,还提供了一些特性,例如自动缓存、自动重试、分页等。接下来会从几个问题来具体说说场景使用问题 ~(1)使用 ahooks 还是 react-query 取决于具体需求和项目的复杂度。原创 2024-06-03 13:21:45 · 1291 阅读 · 0 评论 -
React Router v5 和 v6 中,路由对象声明方式有什么区别?
【代码】React Router v5 和 v6 中,路由对象声明方式有什么区别?原创 2024-06-02 14:05:32 · 464 阅读 · 0 评论 -
React路由参数path不再支持正则?比较v5和v6写法的差异性
在React16 Router 5 的时候,路由对象的path是可以使用正则匹配的。但是在React17 Router 6出来的时候,path参数不再支持正则表达式。这是因为在React Router 6中,路由匹配逻辑被重写,使用了一种更快更简单的路径匹配算法。在这里,将会对两种方式进行比对,毕竟有些老项目还是会用router v5的。原创 2024-06-01 09:51:32 · 434 阅读 · 0 评论 -
使用styled-components | xxx.module.scss 提高代码质量
styled-components是一种受欢迎的CSS库,可以在React项目中处理样式问题,简化CSS的编写和组织。test.module.scss是scss的模块化写法,通过这种方式可以帮助管理样式并减少样式冲突,使样式代码更加可视化和可阅读。原创 2024-05-31 10:06:43 · 488 阅读 · 0 评论