![](https://img-blog.csdnimg.cn/20201226213728112.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 57
React
__畫戟__
前端。知之为知之,不知为不知
展开
-
React Fiber 使用 MessageChannel + requestAnimationFrame 模拟实现 requestIdleCallback
由于 requestIdleCallback 兼容性较差且不支持 Safari,React Fiber 需要实现一个 requestIdleCallback polyfill 做浏览器兼容;原创 2023-06-07 22:31:46 · 1065 阅读 · 1 评论 -
React Fiber 架构详解
1.Fiber出现的目的是什么;2. 在Fiber出现之前React存在什么问题;3. 虚拟 DOM 是如何被转换为真实 DOM 的?4. Fiber 如何解决性能问题;5. 什么是 Fiber?1. Fiber 是一个执行单元;2. Fiber 是一种数据结构;6. Fiber 的工作方式;7. 实现 Fiber;8. 构建 Fiber 链表;转载 2023-05-09 02:23:39 · 1824 阅读 · 0 评论 -
vue中的diff算法
diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。转载 2023-05-08 00:49:57 · 888 阅读 · 0 评论 -
React的diff算法
React的diff算法是一种快速而高效的算法,用于计算需要更新的组件节点。通过这个算法,React能够高效地计算出需要更新的节点,并最小化操作,提高更新的性能。同时,由于React能够快速找到需要更新的节点,因此也能够保证应用的性能和响应速度。原创 2023-04-26 16:04:57 · 227 阅读 · 0 评论 -
深入浅出 React:虚拟 DOM Diff 算法解析
DOM Diff 算法的两个假设:1. 两个相同组件产生类似的 DOM 结构,不同的组件产生不同的 DOM 结构;2. 对于同一层次的一组子节点,它们可以通过唯一的 id 进行区分。转载 2023-04-21 01:00:51 · 604 阅读 · 0 评论 -
Ctrl + V 粘贴上传文件,以React + Antd为示例
Ctrl + V 粘贴上传文件,以React + Antd为示例原创 2022-08-10 21:40:12 · 989 阅读 · 0 评论 -
react+antd实现Table拖拽调整列宽
react+antd实现Table拖拽调整列宽原创 2022-01-04 15:21:17 · 6419 阅读 · 10 评论 -
如何在 React 中优雅的写 CSS?CSS作用域隔离
用了 React 很久了,关于 React 中 CSS 作用域隔离一直不爽,这里总结一下在 React 中 优雅的写css。方案一:namespaces;方案二:CSS in JS;方案三:CSS Modules;原创 2021-11-27 18:02:13 · 3324 阅读 · 0 评论 -
AntV G2 Tooltip
import React, { useEffect } from 'react'import { observer } from 'mobx-react-lite'import { Chart } from '@antv/g2'import bigDecimal from 'js-big-decimal'export default observer(({ data = [] }) => { data = [ { city: '上海', value: 0.99, type1...原创 2021-11-27 10:09:58 · 1637 阅读 · 0 评论 -
Antd Table 可编辑表格
antd Table 官方文档提及了 可编辑单元格、可编辑行,这里解决可编辑表格;主要思路是将antd Table可编辑行 与antd Form.List 相结合;表格内编辑;可编辑单元格;可编辑行;简单易理解原创 2021-11-21 14:26:48 · 12633 阅读 · 29 评论 -
classnames,React动态绑定className
要说到react绑定className,先要了解为何react用的是className,不像其它语言都是用class?这是因为class是JavaScript中的保留关键字,而JSX是JavaScript的扩展。这就是React不使用class而使用className的主要原因常规的绑定<div className="title">标题</div>动态绑定className如果需要根据state值addColor来判断是否添加color,需要如下写法(两种)。//ES6原创 2021-11-08 22:14:44 · 901 阅读 · 1 评论 -
基于React Antd远程 SearchSelect 组件,参数灵活可配置,持续迭代中~开源
SearchSelect基于React、Ant Design,适用于React + Ant Design项目; SearchSelect为受控组件; SearchSelect设计为一般PC常用远程搜索需求,接口、入参、出参等参数均可自定义配置;持续迭代中;开源原创 2021-11-08 17:36:52 · 1985 阅读 · 0 评论 -
基于React、Ant Design的ButtonGroup组件
介绍 本组件基于React、Ant Design,适用于React + Ant Design项目 本组件设计为超过一定数量的按钮将展示在Dropdown中 使用方式安装npm i antd-button-group使用<ButtonGroup> <Button size='small' type='link' onClick={() => message.success('编辑')}>编辑</Button>..原创 2021-11-04 14:21:22 · 1412 阅读 · 0 评论 -
react使用高德地图react-amap:Map、Markers、Circle、ContextMenu、自定义ContextMenu
React AMap — 基于 React 的高德地图组件目录搜索区域代码地图区域代码自定义菜单样式复杂而且不好口述,直接上代码,后面出视频搜索区域代码// ------------------外部资源import React, { useEffect } from 'react'import { observer } from 'mobx-react-lite'import { Form, Button, Input, Select } from 'antd'...原创 2021-09-29 21:15:28 · 3794 阅读 · 4 评论 -
在 create-react-app 中使用 styled-jsx
yarn add react-app-rewired customize-cra 在 package.json 中替换 /* package.json */ "scripts": {- "start": "react-scripts start",+ "start": "react-app-rewired start",- "build": "react-scripts build",+ "build": "react-app-rewired build",- ".原创 2021-09-28 10:27:17 · 589 阅读 · 0 评论 -
react-router中的exact和strict
前言每次用配置react路由都会考虑是否应该给给<Route>组件加上exact或strict。下面妹子将于自认为比较清晰的方式列举出来什么场景需要加和不加。本文案例主要以react-router v4+为主,v5版本是因为发布时版本依赖有问题而直接跳成这个大版本的,用法和4完全相同,就是这么任性 > < ,升级详情可看本文最后链接exactexact默认为false,如果为true时,需要和路由相同时才能匹配,但是如果有斜杠也是可以匹配上的。如果在父路由中加了原创 2021-09-05 23:03:55 · 709 阅读 · 1 评论 -
React的生命周期
原创 2021-09-01 21:26:31 · 80 阅读 · 1 评论 -
React 中setState更新state何时同步何时异步?
React中constructor是唯一可以初始化state的地方,也可以把它理解成一个钩子函数,该函数最先执行且只执行一次。更新状态不要直接修改this.state。虽然状态可以改变,但不会触发组件的更新。应当使用this.setState(),该方法接收两种参数:对象或函数。对象:即想要修改的state 函数:接收两个函数,第一个函数接受两个参数,第一个是当前state,第二个是当前props,该函数返回一个对象,和直接传递对象参数是一样的,就是要修改的state;第二个函数参数是sta原创 2021-09-01 21:00:03 · 823 阅读 · 0 评论 -
Antd DatePicker 限制日期
<DatePicker allowClear showTime format="YYYY-MM-DD HH:mm" placeholder="请选择时间" disabledDate={ (current) => { // 限制最大日期为明天 return current && ...原创 2021-06-15 19:11:50 · 2355 阅读 · 0 评论 -
实现【React Antd 表格跨页选择】
效果图代码jsx: <Table loading={loading} columns={columns} dataSource={dataList} rowKey="jobId" pagination={pagination} rowSelection={{ columnWidth: 40, selectedRowKeys: store...原创 2021-06-05 18:17:34 · 2227 阅读 · 2 评论 -
实现【antd 单元格合并处理,分页也有效】
函数:/** * 单元格合并处理 * @param text 当前单元格的值 * @param dataSource 当前分页所有数据 * @param key 当前列的dataIndex * @param index 当前数据所在下标 * @returns {number} 待合并单元格数量 */// eslint-disable-next-line max-paramsexport default (text, dataSource, index, key) => ...原创 2021-05-14 18:07:57 · 1549 阅读 · 4 评论 -
antd Table 列hover高亮
效果图:代码:js:css:原创 2021-02-26 15:41:15 · 1593 阅读 · 0 评论 -
react+antd 自定义useTable插件:轻松处理【搜索、排序、表格、分页】持续迭代中~ 开源
1. 本插件基于React和Ant Design,只能用于React + Antd的列表页;2. 本插件支持多项自定义配置;3. 本插件主要用于列表页中的搜索、排序、表格、分页等功能,能处理典型的列表页;4. 使用本插件能减少你典型列表页50%以上代码量和维护成本;5. 持续迭代中;5. 开源;原创 2021-02-25 19:23:34 · 5429 阅读 · 1 评论 -
基于Antd远程搜索Select 受控组件,接受所有Antd Select API,参数灵活可配置
基于Antd远程搜索Select 受控组件,接受所有Antd Select API,参数灵活可配置1.可以支持传入接口、配置label、value显示select2.同时支持远程搜索3.支持防抖4.支持多选及最大可选数量5.支持配置分页及搜索条件6.支持optios右侧显示其他字段7.支持Antd Select所有props、api原创 2021-01-06 09:53:40 · 1476 阅读 · 0 评论