摘要: createElement 原码: const element = ( <div id="foo"> <a>bar</a> <b /> </div> ) const container = document.getElementById("root") ReactDOM.render(element 阅读全文
posted @ 2022-07-26 15:13 webLion200 阅读(25) 评论(0) 推荐(0) 编辑
摘要: 运算符 非空断言运算符 ! !放在变量名或函数名后,用来强调该变量名或函数名非null|undefined。 这个符号特别适用于我们已经明确知道不会返回空值的场景。 function onClick(callback?: () => void) { callback!(); // 参数是可选入参,加 阅读全文
posted @ 2022-06-30 19:43 webLion200 阅读(210) 评论(0) 推荐(0) 编辑
摘要: 单页面应用 单页面应用是使用一个 html 前提下,一次性加载 js , css 等资源,所有页面都在一个容器页面下,页面切换实质是组件的切换。 路由原理 请看https://www.cnblogs.com/renzhiwei2017/p/16051483.html React的路由 History 阅读全文
posted @ 2022-03-25 10:41 webLion200 阅读(71) 评论(0) 推荐(0) 编辑
摘要: 前端路由主要分为两种模式:hash 和 history。 这两种模式都不会触发页面的刷新 Hash模式 hash模式就是用#号将路由的路径拼接在 url 后面,当#号后面的路径发生改变时,会触发 onhashchange 事件。 <!DOCTYPE html> <html lang="en"> <h 阅读全文
posted @ 2022-03-24 19:46 webLion200 阅读(50) 评论(0) 推荐(0) 编辑
摘要: Tapable webpack最主要的两大模块:负责编译的Compiler和创建bundle的Compilation。而这两个模块都是继承自Tapable。 Tapable内部通过对事件的注册监听,触发webpack生命周期的函数方法。 Compiler 每次执行webpack构建的时候,在webp 阅读全文
posted @ 2022-03-24 09:47 webLion200 阅读(209) 评论(0) 推荐(0) 编辑
摘要: Q: React 引入hooks的原因 A: 让函数组件可以做类组件的事,可以有自己的state,可以处理一些副作用,获取ref。 hooks 与 fiber (workInProgress) hooks主要以三种形态存在于react中: HooksDispatcherOnMount:函数组件初始化 阅读全文
posted @ 2022-01-04 09:27 webLion200 阅读(763) 评论(0) 推荐(0) 编辑
摘要: 一、Fiber基础 什么是fiber fiber是react中最小的执行单位,可以理解为fiber就是虚拟DOM。 更新 fiber 的过程叫做 Reconciler(调和器) element,fiber, DOM 之间的关系? element 就是jsx语法,通过React.createEleme 阅读全文
posted @ 2022-01-04 09:27 webLion200 阅读(647) 评论(0) 推荐(0) 编辑
摘要: React为什么要实现一套自己的事件系统? A:为了兼容各浏览器对事件处理的差异性/ 冒泡和捕获 冒泡:事件从最内层的元素开始,一直向上传播,直到document对象。 捕获:事件从最外层开始,直到最具体的元素。 addEventListener(event, function,useCapture 阅读全文
posted @ 2022-01-04 09:27 webLion200 阅读(112) 评论(0) 推荐(0) 编辑
摘要: 方式1:时间片段 将一次性任务划分成多个片段(Fragments),每次只完成一部分。 将10w个彩色点渲染到dom: 生成色块代码: /* 获取随机颜色 */ function getColor(){ const r = Math.floor(Math.random()*255); const g 阅读全文
posted @ 2022-01-04 09:26 webLion200 阅读(412) 评论(0) 推荐(0) 编辑
摘要: render阶段做了什么 通过React.CreateElement,生成新的state和props,得到新的element对象。接下来,会对比这一次和上一次渲染的Virtual DOM,只在真正的DOM树中修改差别的部分。 控制render的方法 主要通过两种方式: 从自身控制是否render。如 阅读全文
posted @ 2021-12-10 11:14 webLion200 阅读(140) 评论(0) 推荐(0) 编辑