React
文章平均质量分 50
lemonreds
https://github.com/Lemonreds
展开
-
React 移动端 下拉刷新、上拉加载组件 m-pull-to-refresh
不使用CSS,使用React实现的单行文本溢出自动省略号组件实现原理,通过canvas来计算出字体的整体宽度的特性,计算某一段文本在它的容器内可以放置的最大宽度,从而实现自动省略。实现效果图源代码参考源代码: 源码....原创 2021-04-14 20:03:23 · 2181 阅读 · 1 评论 -
Webpack 代码分割 动态导入的实践例子
代码分割,动态导入的场景简单来说,就是例如我们的页面中,有一个组件内部实现逻辑非常庞大,引入了许多其他的包,导致该页面整体体积过大,影响首屏渲染速度,此时我们期望优先加载其他内容,最后再去加载这块组件内容,避免首屏渲染时间过长。也就是从chunks再拆分出部分逻辑,单独生成一个script文件,在我们需要的时机进行请求该模块的script文件,再将它显示出来,这样就是代码分割,动态引入的一个经典场景。动态导入的实现原理动态导入,本质上是来自于ECMA关于异步import语法的提案,该语法是让i原创 2020-09-25 16:37:39 · 458 阅读 · 1 评论 -
Webpack dynamic-imports 代码分片动态导入的一个实践例子
代码分割,动态导入的场景简单来说,就是例如我们的页面中,有一个组件内部实现逻辑非常庞大,引入了许多其他的包,导致该页面整体体积过大,影响首屏渲染速度,此时我们期望优先加载其他内容,最后再去加载这块组件内容,避免首屏渲染时间过长。也就是从chunks再拆分出部分逻辑,单独生成一个script文件,在我们需要的时机进行请求该模块的script文件,再将它显示出来,这样就是代码分割,动态引入的一个经典场景。动态导入的实现原理动态导入,本质上是来自于ECMA关于异步import语法的提案,该语法是让i原创 2020-09-25 16:25:18 · 1439 阅读 · 0 评论 -
react 可拖拽宽度两列布局组件
预览使用例子<DraggleLayout containerWidth={550} containerHeight={220} min={50} max={500} initLeftWidth={100} handler={ <div style={{ width: 4, height: '1原创 2020-09-24 11:06:38 · 1826 阅读 · 0 评论 -
react 虚拟滚动列表hook实现例子
效果图使用例子import React from 'react';import useVirtual from './useVirtual';const colors = ['#8868ff', '#24cdd0', '#ffc84e', '#fe657f', '#748cfd'];export default () => { const [list1, containerProps1, wrapperProps1] = useVirtual({ total: 9996,原创 2020-09-24 10:17:50 · 885 阅读 · 0 评论 -
react 基于canvas的图片验证码组件
效果图使用<Captha width={320} height={80} count={8} lineCount={20} pointCount={25} fontSize={40} /> <Captha height={80} colors={['#000', '#333']} /> <Captha datasets={'这原创 2020-09-24 10:01:44 · 1140 阅读 · 0 评论