qq_33539213的博客

React query：https://cangsdarm.github.io/react-query-web-i18n/RTK Query：https://redux-toolkit.js.org/rtk-query/comparisonReact-Query 让你的状态管理更优雅

背景：微前端框架下，在使用高阶组件为子页面统一添加面包屑时，由于把高阶组件使用在了render里，导致页面死循环。一开始代码像是这样：// App.jsrenderRoute(route)=>{// ...return HOC(Component)}render(){ const ele = renderRoute(route) return ele}// 子页面const Component = () =>{ useEffect(()=>{ // 将.

背景： 需求需要实现一个勾选列表，支持拖拽排序。由于组件库不支持，加上想顺便学习下drag API，于是用原生方法实现了一下。HTML 拖放 APIHTML 拖放（Drag andDrop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。详见MDN文档：HTML 拖放 API生命周期流程如图：实现思..

场景： spa应用需要添加埋点，参数需要获取当前页面的上一页url。相关技术栈：react + react-router常规场景可以通过document.referrer拿到，但spa应用中切换路由document.referrer不会改变。查看了react-router和history的API，都没有提供监听路由变化的函数。因此采取的方案是，添加一个生命周期钩子，在location.pathname改变时，将旧的url保存在全局变量中。// util.jsexport const setR.

场景： 在用hooks重构我的组件FetchTable时，我需要在引用对象query改变时重新获取数据，大概如此：/** query:{a:1,b:2} */useEffect(() => { // if (preQuery !== query ) DO STH... }, [query])但由于引用对象每次比较都会返回false ，因此会造成重复的渲染，甚至陷入死循环因此面对这种情况，需要获取上一轮的props，使用loadsh提供的isEqual或其他工具库函数进行深.

React 中setState更新state何时同步何时异步?

组件心得直播-笔记组件特点：1.组件受控2.组件透传（组件可以获得所有原组件的属性和方法）把传递到組件的函數提到render外func=()=>{ ...}<div onClick={this.func}/>可以減少render裡的代碼量，且不會每次都生成新的實例。import copy from "copy-to-clipboard";handleC...

场景：获取验证码按钮，点击获取后倒计时60s不能操作。import React, { useState, useEffect } from 'react';import { Button } from 'antd';let timeChange;const Btn = () => { const [time, setTime] = useState(60); co...