![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
sakoooo
这个作者很懒,什么都没留下…
展开
-
React 的数据获取(data-fetching)库
React query:https://cangsdarm.github.io/react-query-web-i18n/RTK Query:https://redux-toolkit.js.org/rtk-query/comparisonReact-Query 让你的状态管理更优雅原创 2021-06-24 20:52:20 · 377 阅读 · 2 评论 -
【react】使用高阶组件遇到的问题
背景:微前端框架下,在使用高阶组件为子页面统一添加面包屑时,由于把高阶组件使用在了render里,导致页面死循环。一开始代码像是这样:// App.jsrenderRoute(route)=>{// ...return HOC(Component)}render(){ const ele = renderRoute(route) return ele}// 子页面const Component = () =>{ useEffect(()=>{ // 将.原创 2021-05-12 16:24:23 · 456 阅读 · 0 评论 -
[WIP]拖拽列表的原生实现
背景: 需求需要实现一个勾选列表,支持拖拽排序。由于组件库不支持,加上想顺便学习下drag API,于是用原生方法实现了一下。HTML 拖放 APIHTML 拖放(Drag andDrop)接口使应用程序能够在浏览器中使用拖放功能。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。详见MDN文档:HTML 拖放 API生命周期流程如图:实现思..原创 2021-04-15 21:07:10 · 118 阅读 · 0 评论 -
【react】spa应用中获取上一页路径
场景: spa应用需要添加埋点,参数需要获取当前页面的上一页url。相关技术栈:react + react-router常规场景可以通过document.referrer拿到,但spa应用中切换路由document.referrer不会改变。查看了react-router和history的API,都没有提供监听路由变化的函数。因此采取的方案是,添加一个生命周期钩子,在location.pathname改变时,将旧的url保存在全局变量中。// util.jsexport const setR.原创 2020-11-23 16:33:07 · 4766 阅读 · 0 评论 -
【React hooks】获取上一轮的state或props
场景: 在用hooks重构我的组件FetchTable时,我需要在引用对象query改变时重新获取数据,大概如此:/** query:{a:1,b:2} */useEffect(() => { // if (preQuery !== query ) DO STH... }, [query])但由于引用对象每次比较都会返回false ,因此会造成重复的渲染,甚至陷入死循环因此面对这种情况,需要获取上一轮的props,使用loadsh提供的isEqual或其他工具库函数进行深.原创 2020-11-07 20:44:10 · 2817 阅读 · 0 评论 -
React 中setState更新state何时同步何时异步
React 中setState更新state何时同步何时异步?转载 2020-06-01 15:20:23 · 260 阅读 · 0 评论 -
【心得笔记】编写组件直播笔记
组件心得直播-笔记组件特点:1.组件受控2.组件透传(组件可以获得所有原组件的属性和方法)把传递到組件的函數提到render外func=()=>{ ...}<div onClick={this.func}/>可以減少render裡的代碼量,且不會每次都生成新的實例。import copy from "copy-to-clipboard";handleC...原创 2019-10-23 16:16:51 · 132 阅读 · 0 评论 -
【React hooks】用hook写一个倒计时按钮
场景:获取验证码按钮,点击获取后倒计时60s不能操作。import React, { useState, useEffect } from 'react';import { Button } from 'antd';let timeChange;const Btn = () => { const [time, setTime] = useState(60); co...原创 2020-04-23 15:49:13 · 6369 阅读 · 3 评论