![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 56
老电影故事
我只想搞搞搞搞搞搞搞钱!
展开
-
日期选择器:The value/defaultValue of DatePicker or MonthPicker must be a moment object after `antd@2.0`
现在遇到的问题是,一个日期选择器,增加数据的时候,就是直接选择,编辑、查看数据的时候,就要给日期选择器直接赋值,后端返回的数据格式是 2023-12-29。这还算了,用的antd的版本是3.xxx,现在官网都更新到5.xx的版本了。目前在做一个后台管理的项目,祖传代码,React+ts+antd。于是干净回退到3.xx的版本,版本差异还是很大的。赋值是好了的 特么现在选择日期的时候又不行了。好家伙,一堆报错,这怎么敢改,没那么多时间。好,我以为到这就好了,没想到喔测试下。一个后台管理用vue多好。原创 2023-12-29 15:16:39 · 1000 阅读 · 0 评论 -
react中间件的理解
其本质上一个函数,对store.dispatch方法进行了改造,在发出 Action和执行 Reducer这两步之间,添加了其他功能。redux-thunk中间件会判断你当前传进来的数据类型,如果是一个函数,将会给函数传入参数值(dispatch,getState)getState函数考虑到我们之后的一些操作需要依赖原来的状态,用于让我们可以获取之前的一些状态。Redux中,中间件就是放在就是在dispatch过程,在分发action进行拦截处理,如上图。,整个过程是一个同步的操作。原创 2023-11-14 23:16:42 · 742 阅读 · 0 评论 -
真正理解为什么要虚拟DOM
本质上就是一个js对象,用于描述视图的页面结构在vue中,每一个组件都有一个render函数,每个render函数都会返回一个虚拟DOM树,即每个组件都对应一棵虚拟DOM树。原创 2023-11-09 07:45:00 · 114 阅读 · 0 评论 -
React hooks的闭包陷阱
react特点,每次更新都会重新执行这个函数,每次就+1, 是另外一个函数了,不是原来这个函数。子组件的 count 发生改变 ,我们在点击打印按钮,发现count 一直是0。但是setInterval的count永远是第一个函数里面的,形成了闭包。方法2 :将获取 count 的方法 创建到父组件,子组件调用父组件方法。说明此时的 useEffect 中的 count ,还是取的 过期的值。点击一次按钮,发现页面是更新了,但是console还是上一次的值。需要,添加依赖项 count ,原创 2023-10-27 10:20:41 · 501 阅读 · 0 评论 -
总结使用React做过的一些优化
/ render函数的this已经被react做了修改// 这里的this就是指向当前组件实例console.log('父函数中的this指向为:', this)// 通过箭头函数的写法 直接沿用父函数的this指向也ok这是我第一个类组件// 3. class field写法 最推荐!!!!!原创 2023-10-24 11:17:46 · 426 阅读 · 0 评论 -
React组件渲染和更新的过程
将reconciliation阶段进行任务拆分(commit无法拆分,dom渲染无法拆分)1、reconciliation阶段-------执行diff算法, 纯JS计算。2、commit阶段--------将diff结果渲染DOM。同时再有DOM操作需求(动画、鼠标拖拽等),将卡顿。当组件足够复杂,组件更新时计算和渲染都压力大。React的patch可以被拆分为2个阶段。js是单线程,且和DOM渲染公用一个线程。(是React内部机制,开发者体会不到)DOM需要渲染时暂停,空闲时恢复。原创 2023-10-19 10:00:00 · 428 阅读 · 0 评论 -
React合成事件
看似事件挂载到组件上,其实是在document,组件销毁的时候,也不用解绑事件。自己实现一套事件机制,尽可能摆脱了DOM事件的逻辑, 更好的兼容性和跨平台。事件挂载越多,内存消耗越高,(不用给每个子元素挂载事件,使用冒泡)原创 2023-10-19 07:00:00 · 399 阅读 · 0 评论 -
JSX的本质
/ 总结React.createElement(List, null, child1, child2, ‘文本节点’)// h 函数// 返回 vnode// patch。原创 2023-10-18 13:51:48 · 343 阅读 · 0 评论 -
React Hooks之useReducer
【代码】React Hooks之useReducer。原创 2023-10-18 08:30:00 · 183 阅读 · 0 评论 -
React高级特性之RenderProps
renderProps是另外一个能实现类似于HOC这种多个组件抽离公共组件逻辑的方式。原创 2023-10-18 05:00:00 · 281 阅读 · 0 评论 -
React高级特性之HOC高阶组件
把一个组件当成另外一个组件的参数传入,然后通过一定的判断,返回新的组件。原创 2023-10-17 15:00:00 · 180 阅读 · 0 评论 -
React性能优化之SCU
react同一父组件的所有子组件中有一个更新,剩下的所有子组件都会重新渲染,但是为了性能,我们不需要让未更新依赖的组件更新。SCU就是解决这个未更新依赖的组件的重新渲染问题。类组件 extends pureComponent的时候 当前组件也是。React.memo 这个高阶函数 可以叫高阶组件。React.memo 这个高阶组件做scu 也是。简称SCU,是React中性能优化的重要一环。原创 2023-10-17 13:30:00 · 103 阅读 · 0 评论 -
React高级特性之异步组件
【代码】React高级特性之异步组件。原创 2023-10-15 12:45:00 · 256 阅读 · 0 评论 -
React高级特性之context
【代码】React高级特性之context。原创 2023-10-15 07:00:00 · 372 阅读 · 0 评论 -
Vue和React高级特性之传送
举例来说,我们想要在桌面端将一个组件当做浮层来渲染,但在移动端则当作行内组件。我们可以通过对 动态地传入一个 disabled prop 来处理这两种不同情况。一个可重用的模态框组件可能同时存在多个实例。对于此类场景,多个 组件可以将其内容挂载在同一个目标元素上,而顺序就是简单的顺次追加,后挂载的将排在目标元素下更后面的位置上。提供了一个更简单的方式来解决此类问题,让我们不需要再顾虑 DOM 结构的问题。是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。原创 2023-10-14 07:30:00 · 234 阅读 · 0 评论 -
React高级特性之受控和非受控组件
受控组件:input框自己的状态被React组件状态控制二、非受控组件三、总结原创 2023-10-16 07:45:00 · 152 阅读 · 1 评论 -
React之setState
3、不能嵌套在if/for/其它函数中(react按照hooks的调用顺序识别每一个hook) 只能在最外层。执行结果只一次 +1 因为异步更新。1、useState 函数可以执行多次,每次执行互相独立,每调用一次为函数组件提供一个状态。setTimeout 中 setState 是同步的, 可以拿到最新的 state。// 传入函数,不会被合并, 因为函数无法合并,是可执行的对象。2、useState只能出现在【函数组件】或者其他hook函数中。// 回调函数中可以拿到最新的 state。原创 2023-10-13 07:45:00 · 292 阅读 · 0 评论 -
React组件
在React hook出来之前,函数式组件是没有自己的状态的,所以我们统一通过类组件来讲解。原创 2023-10-08 11:06:56 · 739 阅读 · 2 评论