目录前言基础组件和业务组件为什么选用 Next.js 来搭建组件库文档？效果演示 项目初始化组件开发Next.js 支持 MDXNext 动态加载 md 文件自定义 mdx 组件优化文档界面发布工作流配置添加新的 changesets发布变更部署小结前言使用 pnpm 搭建一个 Monorepo 组件库使用 Next.js 开发一个组件库文档cha
......
196
0
0
2023-06-22
目录React图片压缩上传统一处理压缩相关代码使用方法React图片压缩工具(可下载)示例核心工具React图片压缩上传统一处理最近项目需要对上传的图片文件进行压缩后才上传到服务器中，于是研究了一番，下面给出详细的压缩方法。图片压缩的原理：实际上根据图片大小有没有超过预定的最大最小时，如果超过指定的高度/宽度，在不怎么失真的前提下裁剪图片，然后使用canva
......
250
0
0
2023-06-20
目录CompilerInternalSymbolNative Memory TrackingArena ChunkUnknownCompilerCompiler 就是 JIT 编译器线程在编译 code 时本身所使用的内存。查看 NMT 详情：[x0000ffff93e3acc0] Thread::allocate(unsigned long, bool,
......
176
0
0
2023-06-20
目录抛砖引玉传统diff算法React diff原理tree diffcomponent diffelement diff应用实践页面指定区域刷新更加方便地监听props改变react-router中Link问题结语抛砖引玉React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，已使我们的页面的构建效率提到了极大的提升。但是如何高效地通过
......
168
0
0
2023-06-18
目录界面隐藏懒加载React实现原始代码放入新的DIV状态设置样式设置事件设置事件优化延迟显示悬浮框悬浮框内容懒加载完整代码界面隐藏一个容器放置视频，默认情况下display: none;
z-index:;
transform: transformd(10000px, true_y, true_z);
y轴和z轴左边都是真实的（腾讯视频使用绝对定位，
......
183
0
0
2023-06-18
目录正文组件的 updater处理 ClickCounter Fiber 的 updatebeginWorkReconciling children for the ClickCounter Fiber处理 Span Fiber 的 updateReconciling children for the span fiberEffects listcommit
......
190
0
0
2023-06-17
目录类组件中的statesetState的用法类组件如何限制state更新视图setState原理揭秘函数组件中的stateuseState的用法如何监听state的变化setState(dispatch)更新特点useState的注意事项总结相同点不同点类组件中的statesetState的用法React项目中UI改变来源于state的改变，类组件中set
......
171
0
0
2023-06-16
目录1.组件的创建方式函数式组件class组件2.组件命名规范3.组件传值props接收值(函数式组件)接收值(class组件)4.组件样式sass5.组件的生命周期函数6.受控组件—表单处理非受控组件受控组件多表单元素操作1.组件的创建方式函数式组件特别注意这里的写法，如果要在 JSX 里写 js 表达式(只能是表达式，不能是流程 控制语句)，就需要加 {
......
197
0
0
2023-06-16
目录正文使用Render Props来完成关注点分离render prop的prop名不一定叫render注意点render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且
......
185
0
0
2023-06-16
目录前言第一章 基本概念第二章 createElement 函数第三章 render函数第四章 Concurrent Mode第五章 Fibers第六章 Render and Commit Phases第七章 Reconciliation第八章 Function Components第九章 Hooks前言这篇文章循序渐进地介绍实现以下几个概念，遵循本篇文章基
......
155
0
0
2023-06-16
目录正文相关APIReact.createContextContext.ProviderClass.contextTypeContext.Consumer示例1. 动态context2. 在内嵌的组件中更新context3. 同时消费多个context遗留的APIContext提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的Rea
......
127
0
0
2023-06-15
目录热身准备明确几个概念事件系统角色划分事件注册registerSimpleEventsregisterEvents$2registerEvents$1registerEvents$3registerEvents事件监听事件派发合成事件捕获和冒泡总结热身准备明确几个概念在React@17.0.3版本中：所有事件都是委托在id = root的DOM元素中（网上
......
148
0
0
2023-06-15
目录为什么需要优先级同步模式下的react运行时如何运用优先级机制优化react运行时确定不同场景下的调度优先级lane优先级event优先级scheduler优先级优先级间的转换优先级机制如何设计设计思路合并赛道释放赛道找出最高优先级赛道快速定位赛道索引判断赛道是否被占用如何将优先级机制融入React运行时生成一个更新任务步骤一：获取本次更新的优先级步骤二
......
132
0
0
2023-06-13
目录三种使用方式1. String Refs2. 回调 Refs3. createRef两种使用目的Refs 转发createRef 源码forwardRef 源码三种使用方式React 提供了 Refs，帮助我们访问 DOM 节点或在 render 方法中创建的 React 元素。React 提供了三种使用 Ref 的方式：1. String Refscl
......
155
0
0
2023-06-12
目录diff 算法介绍diff 策略tree diffcomponent diffelement diff结合源码看 diff整体流程新内容为 REACT_ELEMENT_TYPE新内容为纯文本类型新内容为数组类型diff 后的渲染上一章中 react 的 render 阶段，其中 begin 时会调用 reconcileChildren函数， reconc
......
151
0
0
2023-06-12