![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 62
感谢上Di_123
感谢上Di的En典
展开
-
reactHook实现EventBus
react,EventBus,ReactHook中使用EventBus,同步调用和异步调用。原创 2022-06-22 16:46:21 · 2531 阅读 · 0 评论 -
JS 实现滚动定位和点击button跳转
最近在开发项目的时候,有一个交互上的需求,就是滚动内容区域的不同模块,要高亮显示上方模块对应的button,用到的是react+TS开发的项目,具体的代码如下:1.滚动定位到具体的tab下面的方法是关键的一个方法,就是获取一组button具体对应的id/** * 设置第二个tab的active的key * scrollTop + clientHeight == scrollHeight,说明滚动到最底部了,把值设置成20px * @param scrollTop * @param do原创 2021-10-25 14:58:13 · 1152 阅读 · 0 评论 -
react 父子组件的执行顺序
这里一定要注意一下,是先执行子组件,然后再执行父组件相关的代码。原创 2021-10-12 17:09:21 · 1808 阅读 · 0 评论 -
webstorm启动报错Load error: undefined path variables
启动webstorm时,会报如下错误:出现这个问题的原因是由于less的环境没有设置好,请看解决方法:1.打开设置的面板,如下所示:2.重启webstorm,再次打开就没有此错误了原创 2021-08-19 09:40:11 · 2479 阅读 · 0 评论 -
useEffect使用技巧
useEffect如果第二个参数的数组不为空,传了多个参数的情况下,使用总结。如果第二个传了多个参数,如何查看是那个参数发生了变化呢?请看代码:// 在一个正常的Hooks函数中,有如下代码,此代码实现的原理就是通过useRef来达到缓存的目的 const [a, setA] = useState(); const [b, setB] = useState(); const [c, setC] = useState(); const myRef = useRef({a, b, c})原创 2021-04-20 10:39:19 · 1133 阅读 · 2 评论 -
使用Hooks的注意事项
在使用Hooks的过程中,需要注意的两点是: 不要在循环,条件或嵌套函数中调用Hook,必须始终在React函数的顶层使用Hook。这是因为React需要利用调用顺序来正确更新相应的状态,以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook,就容易导致调用顺序的不一致性,从而产生难以预料到的后果。 只能在React函数式组件或自定义Hook中使用Hook。 为了避免我们无意中破坏这些规则,你可以安装一个eslint插件:npm install eslint-plugin-原创 2021-02-08 20:33:49 · 2123 阅读 · 0 评论 -
useMemo和useCallback的区别及使用场景
useMemo和useCallback都是reactHook提供的两个API,用于缓存数据,优化性能;两者接收的参数都是一样的,第一个参数表示一个回调函数,第二个表示依赖的数据。共同作用在依赖数据发生变化的时候,才会调用传进去的回调函数去重新计算结果,起到一个缓存的作用两者的区别useMemo 缓存的结果是回调函数中return回来的值,主要用于缓存计算结果的值,应用场景如需要计算的状态 useCallback 缓存的结果是函数,主要用于缓存函数,应用场景如需要缓存的函数,因为函数式组件每..原创 2020-11-23 16:43:37 · 35462 阅读 · 0 评论 -
ReactDOM.createPortal使用实例
最近在看React的官方文档,补习一下有关React的知识,这篇文章就介绍一下如何使用ReactDOM.createPortal来实现弹框组件的改造;比较初级,比较通俗易懂。Portal ,将子节点渲染到存在于父组件以外的 DOM 节点。ReactDOM.createPortal(child, container)第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 fragment。第二个参数(container)是一个 DOM 元素。上面的这句话引.原创 2020-11-23 11:17:24 · 7271 阅读 · 0 评论 -
React:refs转发和useImperativeHandle
具体的使用范例,可以参考官方API:Refs转发,本人也是看了官方API以后自己所学习理解领悟的给记录一下,如果有不正确的地方,可以在文章下方的评论区参与评论,然后指正出来!欢迎各位来评论吧!refs是用来绑定元素的,一定要注意:React中的props是无法传递ref的,ref实际上并不是props,他就像key一样,是专门处理的;使用非常简单,见下列代码吧:import React from 'react'import { Button } from 'antd'function M.原创 2020-11-19 14:21:07 · 208 阅读 · 0 评论 -
react中的context,provider使用步骤
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。具体详见:context官方API本篇文章只是详细的把我个人的学习日志给记录下来相当于又会了一个react相关的知识点,具体这些API可以参看官方API,已经写得很详细了;与context相关的API共有以下几个: React.createContext Context.Provider Class.contextType Context.Consumer C原创 2020-11-18 16:22:01 · 12262 阅读 · 0 评论 -
antd Pro@4踩坑记录
1.proTable具体有关这个可以访问ProTable的官方:antd proTable,这个可以看一下;利用这个开发后台管理系统,效率特别高,而且还没有冗余代码;具体请看: columns const columns: ProColumns<TableListItem>[] = [ { title: 'ID',//表格的表头 dataIndex: 'id',//对应你的字段名称 valueType: 'text',//原创 2020-11-17 17:42:33 · 1871 阅读 · 5 评论 -
React+antdPro4+TS(typescript)相关(知识点)踩坑记录
最近公司新开了项目,是后台管理系统,在技术选型上选择的时候,选择了react,然后整体的框架选择的是antd pro@4+这个脚手架搭建出来的单页面应用,要是想要仔细了解antd pro 可以看一下他的官方文档:antd pro,此次开发整体的技术栈包括:antd@4.7.3,react@16.8.6,管理数据流采用的是dva@2.4.0,另外还应用了umi@3.2.0,前端后端的数据交互,用的是umi-request,这个umi-request本质上来说是fetch,而目前特别流行的前后端交互工具axio原创 2020-11-16 13:12:56 · 2327 阅读 · 0 评论