![](https://img-blog.csdnimg.cn/20190302212103382.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 65
react框架的一些知识
问白
网易高级前端开发工程师
展开
-
使用Ant Design Anchor组件的一个坑
因为使用的是hash路由,所以在页面使用这Anchor组件时,就会自动的去react-router这个组件中去寻找对应的路由,而不是去页面找对应的锚点,所以就会报找不到的错误。在使用Ant Design@4.21.3版本中Anchor组件时,遇到一个问题。点击左侧菜单锚点时,页面总报错没有找到对应的路由。将hash路由换成history路由即可解决。最终修复完之后效果就正常了。原创 2023-04-05 20:13:09 · 413 阅读 · 0 评论 -
React函数组件中的闭包陷阱
在React中有 Class & Function 两种类型的组件,在使用上会有一些区别,典型的就是函数组件是有闭包状态,没有上下文的this,而Class 类型的组件具有指向上下文的this。1、问题场景看一个场景。在一个页面中,有两个按钮,一个按钮点击会自增count变量的只,另一个alert按钮点击之后会在3s之后弹出count的值。正常的话使用函数组件来实现这个功能,先点击若干次自增count的按钮,再点击alert按钮(此时此刻count的有个值val1),然后接着继续点击自增按钮原创 2021-03-25 10:46:48 · 4982 阅读 · 1 评论 -
React Hook的用法: memo + useCallback (四)
React Hook的用法React.memo作用React.memo的作用主要是用于缓存组件,使得组件可以按照业务的需求决定是否来更新的效果,比如业务场景中常见的一个场景,在页面的底部有一个版权说明,一般这是各个模块页面所公用的一个组件,但这个组件基本就是一个静态的文案描述,如果父组件数据变化更新的时候这个抽象出来的版权组件也无需更新,这样可以达到减少页面性能开销的目的。在线示例下面设...原创 2020-03-17 21:56:34 · 5873 阅读 · 1 评论 -
React Hook的用法: Ref + useMemo + 自定义Hook(三)
React Hook的用法Ref Hook这个Hook的作用是可以通过他来获取到Dom元素节点,使用起来非常方便。关键代码如下:const xxxEle = useRef(initialValue);useRef返回一个ref变量,并接受一个初始值 initialValue 这个传入的初始值会复制给useRef返回变量的 .current 属性上(这里就是 xxxEle.current...原创 2020-03-16 16:52:15 · 8024 阅读 · 1 评论 -
React Hook的用法: Contex + Reducer(二)
React Hook简述通过上篇文章我们知道使用 State Hook 和 Effect Hook 可以让函数组件也能够具有自己的状态和在组件的各个阶段提供钩子暴露给开发者使用(点击我查看 State 和 Effect Hook)实际在业务开发过程中我们往往会结合Redux来实现组件的传值和全局转态管理,这里就来分享一下使用Hook来实现组件的传值以及状态管理。Context HookC...原创 2020-03-14 20:36:28 · 4177 阅读 · 0 评论 -
React Hook的用法: State + Effect(一)
React Hook简述React Hook 是React 16.8 这个版本新增的一个特性。在此之前我们编写React组件一般大多数都是用 class组件,而非函数组件,因为函数组件不具有class组件的状态,生命周期这些概念,这就使得在使用函数组件的时候有很多掣肘。而class组件与函数组件相比明显略笨重,很多不必要冗余的模板代码,而且还有this的问题,要么使用箭头函数,要么每次需要bi...原创 2020-03-14 16:30:46 · 4806 阅读 · 1 评论 -
React中的key与index
React中的key与index描述在react 开发过程中,遇到循环渲染一个列表组件的时候,往往会给渲染的子组件添加一个key属性,来提高性能,这里涉及两个问题,第一个是为什么添加key属性。第二个是怎么添加key属性。之所以添加key属性,究其根本是因为react 中的 diff算法。而在业务开发过程中特别是使用map, forEach 等遍历函数的时候往往随手就将index做为...原创 2020-03-13 13:37:33 · 6660 阅读 · 0 评论 -
使用Ant Design Form表单验证遇到一个坑
问题描述在用蚂蚁 Ant Design 表单验证的时候在render 函数中按照文档来引入const { getFieldDecorator } = this.props.form;结果总是给我报TypeError: Cannot read property ‘getFieldDecorator’ of undefined这么一个错误,看官网上面也没对这个有明确的说明,问题解决之后记录一...原创 2019-03-19 16:28:50 · 8570 阅读 · 3 评论 -
react-router页面刷新之后嵌套路由找不到的坑
刷新之后嵌套路由找不到最近遇到一个react路由配置的一个小坑,在复杂web应用过程中坑定都是需要配置嵌套路由来实现单页应用。但发现,在嵌套路由的某个子页面中刷新页面,会找不到和当前路由匹配的单页。后来发现是匹配中都是严格模式匹配,导致嵌套路由匹配不上。代码如下: <Route exact path='/' component={Home} /> <Route exa...原创 2019-03-14 15:13:29 · 8983 阅读 · 0 评论 -
react之 redux
redux原创 2019-03-05 13:33:02 · 107 阅读 · 0 评论