React
文章平均质量分 65
React
前端吕小布
庸人方自扰,自在就好
展开
-
React使用Outlet实现路由跳转时局部刷新页面
应该在父路由元素中用来渲染其子路由元素。这允许在渲染子路由时显示嵌套的 UI。如果父路由完全匹配,则将渲染子索引路由;如果没有索引路由,则不渲染任何内容。第82行插入Outlet组件。原创 2024-05-10 07:03:40 · 1697 阅读 · 0 评论 -
Hooks为什么不能写在条件语句或循环语句里
在本文中,我们讨论了为什么 React 限制 Hooks 必须写在函数的顶部。主要原因是识别 Hooks 并正确管理它们对组件状态的更新非常重要,而将 Hooks 放置在条件语句或循环语句中可能会导致不可预测的结果。因此,遵守这个限制可以确保组件状态的正确性并使代码更易于理解和维护。原创 2023-06-10 06:04:15 · 2088 阅读 · 2 评论 -
浅谈useCallback函数
useCallback 是 React 提供的一个 Hook 函数,用于缓存需要在组件中多次调用的回调函数。它接受两个参数:回调函数和依赖数组。当依赖数组中的任何一个值发生变化时,useCallback 将会返回一个新的回调函数,否则将会返回之前缓存的回调函数。这样可以避免在每次渲染时都重新生成回调函数,从而提高组件的性能。useCallback 是 React 中一个非常有用的 Hook 函数,可以帮助我们缓存需要在组件中多次调用的回调函数。原创 2023-06-07 04:55:58 · 7116 阅读 · 3 评论 -
浅谈useMemo函数
useMemo 是 React 中的一个 Hook,它可以用来缓存计算结果,并在后续的渲染中重复利用这些计算结果。useMemo 接收两个参数:一个函数和一个依赖数组。当依赖数组中的任何一个值发生变化时,useMemo 会重新执行传入的函数,并返回新的计算结果。本文我们浅谈了 useMemo 函数,了解到它可以帮助我们缓存计算结果,提高了组件的渲染性能。要使用 useMemo,我们需要提供一个计算函数,并指定需要监视变化的依赖数组。原创 2023-06-05 05:54:05 · 7658 阅读 · 2 评论 -
浅谈React.memo函数
React.memo 是一个高阶组件,它可以用来包装一个函数组件(Functional Component)并返回一个新的组件。这个新组件会对传入的 props 进行浅比较(Shallow Comparison),如果发现传入的 props 没有发生变化,则直接返回上一次渲染的结果,从而避免不必要的重复渲染过程,提升了组件的渲染性能。否则重新渲染组件。React.memo 和 React.PureComponent 类似,都可以用于优化组件的性能。原创 2023-06-02 00:01:09 · 2587 阅读 · 0 评论 -
React项目支持Less
话不多说,直接分享。原创 2023-01-03 01:51:24 · 578 阅读 · 0 评论 -
如何安装React Developer Tools(超简单)
vue-devtools的安装有三种方法,第一种是通过谷歌应用商店进行安装,第二种是手动安装,第三种是直接下载使用网友分享出来的资源:打开谷歌的更多工具–扩展程序,打开左上角的“主菜单”,点击下面的“打开Chrome网上应用店”,这个应用商店是需要番强的,一般同学是打不开的!能打开的同学搜索React,把第一个扩展程序添加至Chrome即可。下载链接:https://download.csdn.net/download/weixin_43804496/86037025下载压缩包,然后解压,打开谷歌浏览器的扩原创 2022-07-12 01:08:53 · 1297 阅读 · 2 评论 -
如何创建一个React项目(超简单)
1、安装Node.js(官网Node.js下载)2、运行和两条命令(检验是否下载成功Node.js)3、(用npm安装cnpm,将镜像源设置为国内镜像源,国内镜像源由taobao提供,有些软件可能在国外,有的时候可能需要翻墙,你就会下载比较慢,这个时候使用cnpm就比npm快)4、(查看安装的cnpm版本号,用于检查cnpm安装是否成功)5、(安装React的脚手架)6、(创建一个React项目,项目名为my-project。环境是先切换到项目所在目录再执行,如Desktop和F盘)7、8、(这两步跟着它提原创 2022-07-04 16:11:31 · 7824 阅读 · 0 评论