
react
本文章会不断更新react新特性、本人在使用中的问题、以及一些插件的使用。
GMLGDJ
当你的才华还撑不起你的野心的时候,你就应该静下心来学习。当你的能力还驾驭不了你的目标的时候,你就应该沉下心来历练。问问自己,想要怎样的人生。
展开
-
React18 setState是同步还是异步?
executionContext代表了react当前的调度状态, 如果退出了react的调度这个值就会重新变成NoContext. 也就是说, 如果你调用setState的时候并不处于react的调度状态中, 那么就会同步的去执行你的setState.这也是为什么一旦我们使用一些异步操作就会导致setState变成同步的原因, 而在react 18中这段代码变成了这样。在编写UI测试时,可以将渲染、用户事件或数据获取等任务视为与用户界面交互的“单元”。原创 2023-03-08 15:45:56 · 2892 阅读 · 2 评论 -
一篇文章彻底理解setState是同步还是异步!
只要你进入了 react 的调度流程,那就是异步的。只要你没有进入 react 的调度流程,那就是同步的。什么东西不会进入 react 的调度流程? setTimeout setInterval ,直接在 DOM 上绑定原生事件等。这些都不会走 React 的调度流程,你在这种情况下调用 setState ,那这次 setState 就是同步的。 否则就是异步的。而 setState 同步执行的情况下, DOM 也会被同步更新,也就意味着如果你多次 setState ,会导致多次更新,这是毫无意义并且浪费原创 2023-03-08 15:27:26 · 1755 阅读 · 2 评论 -
umi dva 基本使用
页面事件触发,使用dispatch调用models的某个命名空间中的方法,model再调用services中的接口,将需要共享的数据put到state共所以使用该model的组件使用(不需要共享则可以忽略),将需要回调的数据放入callback中,然后在组件的callback中就可以对返回值进行一系列的操作了。原创 2022-02-01 21:09:22 · 3002 阅读 · 0 评论 -
umi或antdpro运行时报错“Module ‘xxx‘ does not exist in container“解决方案
问题描述在我们启动基于umi的脚手架,如antd pro,在运行完毕后控制台报如下错误:Error: Module "本地的路径信息" does not exist in container.原因:可能是因为项目路径移动后导致src/.umi缓存文件找不到原来的路径所导致的问题解决方案一:删除src/.umi然后重新运行项目就解决了方案二:关闭mfsu功能,在config/config.ts中找到mfsu并删除该属性。...原创 2022-03-10 17:00:36 · 11706 阅读 · 1 评论 -
umi 路由跳转
umi 路由跳转原创 2022-02-25 13:08:03 · 2842 阅读 · 0 评论 -
react中 input自动失去焦点解决办法和原因
react中 input自动失去焦点解决办法和原因 react 更新state时input失去焦点原创 2022-01-30 18:32:53 · 8491 阅读 · 0 评论 -
React Hook 中 useState, useEffect, useRef 的使用说明
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。1.useState这是一种在函数调用时保存变量的方式 ——useState是一种新方法,它与 class 里面的this.state提供的功能完全相同。一般来说,在函数退出后变量就会”消失”,而 state 中的变量会被 React 保留。原创 2022-02-05 23:58:48 · 2081 阅读 · 0 评论 -
antd Select组件placeholder不显示解决办法和原因
解决办法:placeholder不显示是因为设置了value值为"或者null,把value值设为undefined就可以了原因:placeholder是当前组件值为空时显示的替换文本,只有值为空的时候才会显示。当组件绑定了value后,值不再是空,即时初始化值为""或null也视为有值,所以placeholder自然就不会显示。原创 2022-01-30 17:51:25 · 12470 阅读 · 1 评论 -
react-dnd使用说明及列表位置切换案例
案例dnd.tsximport React, { useState, useRef } from 'react'import "./dnd.less"// react-dnd核心import { DndProvider } from "react-dnd"import { HTML5Backend } from "react-dnd-html5-backend"import Item from "./components/item"const dnd: React.FC = (p原创 2022-02-12 10:57:45 · 2258 阅读 · 0 评论