react
woyaoshengzhang
这个作者很懒,什么都没留下…
展开
-
React 自定义 Hook
假如有两个组件都需要获取网络状态,我们可以取逻辑到自定义 Hook 中,避免代码重复import { useOnlineStatus } from './useOnlineStatus.js';function StatusBar() { const isOnline = useOnlineStatus(); return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;}function SaveBu原创 2024-06-21 14:31:30 · 313 阅读 · 0 评论 -
React useEffect 执行时机
如果 React 的所有依赖项都与上次渲染时的值相同,则将跳过本次 Effect。默认情况下,Effect 在每次渲染(包括初始渲染)后运行。原创 2024-06-20 18:00:11 · 270 阅读 · 0 评论 -
React useRef 组件内及组件传参使用
将 ref 放在自定义组件上,默认情况下会得到 null。因为默认情况下,React 不允许组件访问其他组件的 DOM 节点。手动操作另一个组件的 DOM 节点会使你的代码更加脆弱。想要暴露其 DOM 节点的组件必须选择该行为。一个组件可以指定将它的 ref “转发”给一个子组件。原创 2024-06-18 16:10:44 · 326 阅读 · 0 评论 -
React useContext
组件会使用 UI 树中在它上层最近的那个 <LevelContext.Provider> 传递过来的值。不是同级,也不是更远的层级。useContext 允许父组件向其下层无论多深的任何组件提供信息,而无需通过 props 显式传递。原创 2024-06-18 10:02:58 · 239 阅读 · 0 评论 -
React useReducer 使用及 useImmerReducer
React 中的 reducer 和这个是一样的:它们都接受 目前的状态 和 action ,然后返回 下一个状态。传递给 reduce 的函数被称为 “reducer”。它接受 目前的结果 和 当前的值,然后返回 下一个结果。useReducer 实际上是以数组上的 reduce() 方法命名的。原创 2024-06-18 09:12:51 · 319 阅读 · 0 评论 -
React state(及组件) 的保留与重置
当在树中相同的位置渲染相同的组件时,React 会一直保留着组件的 state。原创 2024-06-14 10:32:35 · 418 阅读 · 1 评论 -
React state 更新时机以及强制更新
之前的 state 的值是 0,所以这就是 React 作为参数 n 传递给第一个更新函数的值。React 会保存 3 为最终结果并从 useState 中返回。通过传入一个更新函数。来更新state的值。原创 2024-06-12 22:42:14 · 504 阅读 · 0 评论 -
React useState 简易实现
【代码】React useState 简易实现。原创 2024-06-12 16:08:47 · 74 阅读 · 0 评论 -
React 事件函数传播及捕获
事件处理函数将捕获任何来自子组件的事件。事件会沿着树向上“冒泡”或“传播”:它从事件发生的地方开始,然后沿着树向上传播。在 React 中所有事件都会传播,除了 onScroll,它仅适用于你附加到的 JSX 标签。e.stopPropagation() 阻止触发绑定在外层标签上的事件处理函数。e.preventDefault() 阻止少数事件的默认浏览器行为。原创 2024-06-12 15:38:17 · 471 阅读 · 0 评论 -
React.ReactElement 与 React.ReactNode
【代码】React.ReactElement 与 React.ReactNode。原创 2024-06-12 09:22:13 · 356 阅读 · 1 评论 -
React之 useState 替代者 useImmer
useImmer可以代替 useState来更新数组或对象。原创 2024-03-14 16:56:30 · 470 阅读 · 0 评论 -
react 打包时取消console和debugger
1. 安装uglifyjs-webpack-plugin# 使用--save安装,可能会提示webpack版本问题。cnpm install uglifyjs-webpack-plugin --save-dev2. 在config.js中配置chainWebpack// 引入const UglifyJsPlugin = require('uglifyjs-webpack-plugin');export default defineConfig({ ... chainWebpack:原创 2021-12-21 14:37:26 · 957 阅读 · 0 评论 -
将已有react+umi项目替换为MFSU启动方式
使用npm start启动项目时耗时长,使用umi dev可以加快启动速度,第一次使用会比较慢,之后启动时间在2s左右,热更新平均 600ms 左右MFSU issue地址 https://github.com/umijs/umi/issues/6766操作前先检查是否全局安装umiumi -v我的项目虽然使用了umi.js,但是没有全局安装。后面运行 umi dev时报错 umi: command not found。全局安装 uminpm install -g umi // win.原创 2021-07-30 11:06:43 · 2166 阅读 · 0 评论 -
react + ant-ProTable 表格跨页选择
protable 选择行设计到的api有onSelect - 单行选择onSelectMultiple - 多行选择(使用shift键可以触发多选)onSelectAll - 全选全不选onChange - 每次选择行都会触发onChange,并且是后执行。跨页选择逻辑cancleRowKeys - 取消选择的行mySelectedRowKeys - 选中的行选择行时,判断是选择还是取消选择,如果是取消选择,将行key存储至 cancleRowKeys 中在onChange 方法中原创 2021-07-02 10:40:02 · 1594 阅读 · 0 评论 -
react+antpro 打包后生成大体积文件之优化
概述使用antpro 框架做了一个react 项目,打包后umi.js文件体积差不多有1.4M。后来使用gzip压缩方式,将其压缩到421kb,大大缩短加载时间。查看项目文件大小可以通过两种方式,查看具体产生了哪些大文件。1. 使用开发者工具的Network,可以查看浏览器加载了哪些文件及用时。2. 使用npm 自带的分析工具,运行命令后后自动弹出分析结果网页。npm run analyzeStat -- 转换前的体积Parsed -- 最终打包体积Gzippe原创 2021-04-09 17:59:58 · 1950 阅读 · 0 评论 -
antd的ProTable 组件如何给搜索框手动赋值
1.实现如图效果。当路由中包含classesId参数时,表格默认查询该分类下的数据,使用的ProTable组件。配置列项时,在所属分类项中添加initialValue,并复制当前路由classesId参数。import { history } from 'umi';const classesId = history.location?.query?.classesId;const columns = [ ..., { title: '所属分类', d原创 2021-04-08 11:25:45 · 2084 阅读 · 4 评论 -
react 传递参数给子组件(react children)
import React, { useState } from 'react';const Home = props =>{ const [state, handleState] = useState(null) const changeState = (value) => { handleState(value) } // 通过React.cloneElement,将数据或方法以对象形式传递 React.Children.ma.原创 2021-04-07 11:18:18 · 560 阅读 · 2 评论 -
取消react+dva创建项目路由中的#
修改项目文件夹中index.js文件 src--index.jsimport createHistory from 'history/createBrowserHistory';const app = dva( { history: createHistory()});文件全部内容原创 2020-08-06 10:26:40 · 221 阅读 · 0 评论