React全家桶系列
学习react
HaanLen
这个作者很懒,什么都没留下…
展开
-
resize-observer源码解读
node 18.16.0 (npm 9.5.1) 启动失败报错。node 16.16.0 (npm 8.11.0) 启动成功。是一个数组,返回所有正在活跃的目标element列表。监听 elementRef.current 的變化。里面还有一层组件SingleObserver。真正组件在ResizeObserver组件。在 SingleObserver 组件。真正实现观察的方法在这个组件。解决:更改 node 版本。原创 2024-03-19 19:54:51 · 662 阅读 · 0 评论 -
resize-observer-polyfill 源码解读之 ResizeObserverController
这个是个单例的控制器或者叫调度器。所有的归它管理,或者说归它管。它是调度器,它会检测 DOM 上面的变化,通过或者事件(如果前者不支持的话), 同时它还订阅了事件,它只关心这些css属性的变化。"top","right","bottom","left","width","height","size","weight",当这些事件被促发的时候,它就会迭代内部的 SPI 数组,调用它们的过滤出变化的 SPI,然后对于迭代变化的 SPI,依次调用它们的方法。/***/原创 2024-03-18 12:01:51 · 458 阅读 · 0 评论 -
resize-observer-polyfill 源码解读之 ResizeObserverSPI
这个是真正提供观察某个元素功能的地方,SPI应该是的简称。它是那三个接口真正提供功能的地方。它提供了如下的方法, 开始观察某个html元素,该元素以的形态保存于内部的一个Map里面。, 停止观察某个html元素停止观察所有的 html 元素。轮询内部的,调用它的isActive()方法,发现更新了元素,存放于内部的数组中轮询内部的,调用它的,更新最新值。同时调用callback通知观察者更新。返回当前是否存在更新的元素。清除更新的元素数组。。//存在更新的被观察目标元素。原创 2024-03-15 12:39:12 · 632 阅读 · 0 评论 -
resize-observer-polyfill源码解读之ResizeObservation
这个类是被观察的元素的封装, 它会保存元素上一次的宽高信息,提供了两个方法isActive()与元素之前的宽高进行比较,如果不同则返回 true,这样就指定这个元素更新了。这个是用当前的值更新上一次的值。target;// element的content宽度//element的content高度// element的padding-left padding-top width height/*** 创建ResizeObservation实例*//**原创 2024-03-14 18:13:01 · 1238 阅读 · 0 评论 -
react 组件初始化获取 dom.offsetWidth 为 0 问题
初始化,dom.offsetWidth 确实为 0.原创 2024-03-06 13:15:14 · 482 阅读 · 0 评论 -
react项目中使用video标签设置自动播放并未及时播放解决
react项目中使用video标签设置autoplay,但是视频不会直接播放,会加载一段时间后才会自动播放。手动调用play方法。原创 2023-12-05 20:28:23 · 993 阅读 · 0 评论 -
React使用富文本CKEditor 5,上传图片并可设置大小
富文本支持上传图片原创 2023-11-01 20:55:43 · 1909 阅读 · 3 评论 -
react项目使用@antv/l7实现展示地图可视化
react使用@antv/l7实现地图可视化原创 2023-05-12 21:58:06 · 1851 阅读 · 0 评论 -
React源码学习:查看React.createElement
React.createment源码原创 2022-12-20 10:31:00 · 156 阅读 · 0 评论 -
React源码学习:查看 StrictMode
【代码】React源码学习:查看 StrictMode。原创 2022-12-20 10:25:42 · 155 阅读 · 0 评论 -
React源码学习:查看Fragment
打印Fragment标签。1、源码中找到导出的。原创 2022-12-20 10:15:15 · 176 阅读 · 0 评论 -
React源码学习:查看react版本
选项,找到react包,会显示版本号。,打印也会显示react版本号。执行打印出来的是18.1.0;文件显示的18.2.0,但是。2、在项目代码中执行。原创 2022-12-20 10:12:49 · 3904 阅读 · 0 评论 -
react-umi-demo: 自定义实现Table组件支持自定义单字段或多字段排序
简略实现了表头排序标志,排序逻辑需要使用组件时进行自定义排序逻辑,处理好数据再传入组件存在问题:已排序的前提下,再分页后的数据未进行排序组件实现文件文件组件使用文件排序函数回调拿不到最新的值解决使用useRef原创 2022-12-07 18:22:24 · 388 阅读 · 0 评论 -
react-umi-demo:自定义实现table组件
组件实现文件文件组件使用文件原创 2022-12-07 18:21:58 · 293 阅读 · 0 评论 -
react-demo项目:自定义实现一个弹框Dialog组件
弹框组件的基本项目都会使用到,这次自定义实现一个简单的弹框组件。显示标题,内容以及底部文件文件组件使用文件效果图原创 2022-12-06 12:01:07 · 1804 阅读 · 0 评论 -
swiper的使用(react)
【代码】swiper的使用(react)原创 2022-11-28 13:07:35 · 218 阅读 · 0 评论 -
react-demo项目:webpack打包拆分优化(不使用create-react-app脚手架)
修改打包优化配置,引入antd组件库。optimizationp配置。未配置时打包信息如下。原创 2022-11-25 16:32:48 · 534 阅读 · 0 评论 -
react-demo项目:支持使用scss(不使用create-react-app脚手架)
详细查看https://webpack.docschina.org/loaders/sass-loader/详细查看https://webpack.docschina.org/loaders/node-loader/webpack.config.js配置。本项目使用nodev14.17.0。原创 2022-11-25 11:58:19 · 214 阅读 · 0 评论 -
react-demo项目:支持使用CSS Modules(不使用create-react-app脚手架)
更多详细查看:https://webpack.docschina.org/loaders/css-loader/项目使用css modules必须先进行配置。webpack.config.js文件配置。node版本为v14.17.0。原创 2022-11-25 11:57:42 · 509 阅读 · 0 评论 -
react-demo:项目使用ESLint和prettier(不使用create-react-app脚手架)
详见:https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/button-has-type.md。详细见文档:https://prettier.io/docs/en/install.html。忽略这里的文件,不进行preitter校验。遇到问题可以查看相关插件的使用规则。react项目使用prettier。在eslint配置文件中进行配置。react项目使用eslint。配置prettier规则。原创 2022-11-24 15:39:16 · 1027 阅读 · 0 评论 -
react-demo项目:使用路由react-router-dom(不使用create-react-app脚手架)
项目使用的react-router-dom版本为v6.4.3。原创 2022-11-24 14:39:58 · 366 阅读 · 0 评论 -
react-demo项目:纯零搭建react项目(不用create-react-app脚手架)
详细见babel:https://babeljs.io/docs/en/babel-preset-react.html。webpack.config.js文件配置。安装webpack相关依赖。终端初始化,执行命令。原创 2022-11-23 18:07:53 · 976 阅读 · 0 评论 -
react使用国际化
最近一个需求,就是将原有项目支持中英文切换。项目是由create-react-app搭建的,无法使用umi自带的国际化,便使用、i18next来实现。原创 2022-11-16 11:39:33 · 629 阅读 · 0 评论 -
React组件中监听函数获取不到最新的state
因为监听器绑定的是第一次render时生成的函数,这个函数的上下文中的state也是第一次的值,所以即便后面render了多次,因为绑定的是第一次render的函数,所以state值也是旧的。react组件中使用监听函数,无法获取最新state,打印的state一直是初始默认值。原创 2022-09-24 11:00:22 · 3711 阅读 · 1 评论 -
React实现卡片横向无缝轮播效果(umi4)
代码】React实现卡片横向无缝轮播效果(umi4)原创 2022-08-05 21:31:50 · 886 阅读 · 0 评论 -
Umi4+React项目:使用less全局变量(利用lessLoader配置项)
umi4使用less全局变量原创 2022-07-17 21:15:33 · 3473 阅读 · 20 评论 -
Umi4+React:使用less全局变量
Umi4+react,使用less全局变量原创 2022-07-14 00:23:55 · 2083 阅读 · 0 评论 -
umi3+React:使用less变量自定义颜色主题(less-vars-to-js)
umi3使用less自定义颜色主题配置原创 2022-07-13 22:57:09 · 2439 阅读 · 1 评论 -
iframe标签的使用(react)
iframe在react中使用原创 2022-06-14 20:46:29 · 877 阅读 · 0 评论 -
video.js在react中实现视频播放(video.js)
react实现视频播放原创 2022-06-11 17:45:51 · 5830 阅读 · 5 评论 -
img加载中显示loading,加载失败显示默认图片(React)
img加载中显示loading,加载失败显示默认图片原创 2022-06-11 12:30:04 · 2710 阅读 · 0 评论 -
img加载中显示loading,加载失败隐藏img并显示自定义内容而且可点击重新加载(React)
img加载中显示loading,加载失败显示自定义内容,加载成功正常展示图片原创 2022-06-11 12:02:27 · 1906 阅读 · 0 评论 -
React应用篇:实现文本不可复制
使用样式文本不可选中 user-select: none; /* 不可复制 */ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10+ and Edge */值说明auto默认。如果浏览器允许,则可以选择文本none防止文本选取。text文本可被用户选取。all单击选取文本,而不是双击。使用copy事件 handleConpay(e) {原创 2022-04-23 18:12:27 · 2260 阅读 · 0 评论 -
React源码:下载源码(第一步)
GitHub上react地址:https://github.com/facebook/reactgit clone https://github.com/facebook/react.git查看所有分支git branch -areact 版本分支切换分支17.0.2git checkout 17.0.2项目目录结构原创 2022-04-16 12:05:14 · 1724 阅读 · 0 评论 -
React项目-Note:支持scss样式
安装依赖 npm i node-sass sass-loader -D --save在项目中新建相关 scss即可原创 2022-04-03 19:59:56 · 472 阅读 · 0 评论 -
React项目-Note:初始化项目
第一步骤:创建项目create-react-app react_note第二步骤:运行项目npm start第三步骤:项目目录修改情况src目录下的所有文件,新建index.js文件;在src目录下新建Page目录,在Page目录下新建index.jssrc/Page/index.jsimport React from "react";class Index extends React.Component{ render() { return(原创 2022-04-03 15:00:53 · 1030 阅读 · 0 评论 -
React应用篇:函数组件-父组件调用子组件的方法(useImperativeHandle与forward)
使用场景forward Ref会将子组件的实例直接暴露给父组件,父组件可以对子组件实例做任意的操作,那么,useImperativeHandle就是来解决这个问题的,useImperativeHandle可以让我们选择暴露一些我们需要被特殊处理的操作。简单说明:一些可用到的解决方法。1 当请求接口在子业务组件中,然后子组件的请求接口参数在父组件中改变,多个参数的改变导致子组件多次调用接口的问题(前提:在大业务组件中写请求接口,该组件的代码量会非常大)【其他解决:应该接口请求的参数可以通过一个对象原创 2022-04-01 23:59:44 · 2385 阅读 · 2 评论 -
React应用篇:插槽(简单使用理解)
Button组件import './index.scss';export default function Button(props) { const { type, } = props; console.log('Button', props); return ( <button >{props?.children}</button> )}父组件<div className='note_原创 2022-04-09 19:17:06 · 685 阅读 · 0 评论 -
React应用篇:实现导出excel
前提准备插件yarn add js-export-excel --savenpm install js-export-excel --save引入const ExportJsonExcel = require("js-export-excel");效果展示完整代码 // 导出excel const downloadExcel = () => { const {columnKey, columnValue} = formatColumn(); let op原创 2021-10-17 00:40:09 · 1213 阅读 · 0 评论 -
Redux学习篇:一个全局的加减法示例对redux的认识
一个react只有一个全局的store对象action只是说明要做的事情reducer是具体做的事情react项目会由很多的reducer和actionReducer是一个函数,他接受当前的state和action,返回新的statecombineReducers可以将多个reducer合并成一个,任何传给createStoreaction返回一个对象,必须存在type属性,其他的属性可自定定义代码展示在src新建目录Action,Reducer,Storesrc\Action\i.原创 2021-10-17 15:50:14 · 133 阅读 · 0 评论