VNode与Component
在前面两篇文章中,我们研究了VNode的基础知识,了解了如何使用VNode描述并渲染视图,实现了递归diff和循环diff两种方案,并在循环diff中给出了一种简单的调度器实现方案。本文将紧接上两篇文章,一步一步思考并实现将VNode封装成组件。
Fiber与循环diff
在上一篇文章VNode与递归diff中,我们了解了VNode的作用,如何将VNode映射为真实DOM,并通过递归实现了diff操作,最后研究了三种不同的diff方式带来的性能差异。
本文将紧接上文,研究如何通过循环的方式实现diff,并在此基础上实现对应的调度系统,从而理解React
中的一些核心原理。
VNode与递归diff
在工作中接触Vue
、React
大概有两三年了,最近一直在学习相关的技术原理,打算整理学习心得。本文深入研究虚拟DOMVNode
相关的技术实现,了解前端框架的基础。
从vue-loader源码分析CSS-Scoped的实现
虽然写了很长一段时间的Vue了,对于CSS Scoped
的原理也大致了解,但一直未曾关注过其实现细节。最近在重新学习webpack,因此查看了vue-loader
源码,顺便将从vue-loader
的源码中整理CSS Scoped
的实现。
CSS中一些属性的计算规则
昨天遇见了一个关于flex-shrink
计算规则的问题,一时语塞,发现自己居然没有认真研究过这里面的东西,因此在合理整理了关于CSS中一些属性的计算规则。
实现一个简易的React
发表于 | 分类于 技术原理
前两周一直在学习React源码,发现通过断点观察代码运行流程来理解React源码并不是一个很好的方法:
- 由于需要支持ReactDOM、SSR、React Native等,React源码抽象程度比较高,分支较多,且函数调用栈也很深
- React引入的Fiber Reconciler优化diff流程,内部使用了很多状态码和全局变量
- 我的React开发经验有限,有些API并不是十分熟悉
虽然艰难地将大概看了一些源码,却觉得收获较少,因此决定整理React内相关概念,并手动实现一个简易的React框架,从而更深入地学习React。
webpack折腾记(四):性能优化
之前接手的一个旧项目,使用的是roadhog + dva + antd
等技术,里面大概有上百个路由文件,其他model、组件等文件也不少,导致整个项目的模块文件非常多,热更新和打包都速度都比较慢,输出代码体积也很大。基于这个问题,本文整理webpack常用的一些优化手段。
如何绕开referrer防盗链
最近处理了一个与referer有关的需求,发现里面还是有一点门道的。因此在本篇文章整理了referer相关知识点,主要涉及图片防盗链与如何绕开防盗链限制。
Preact技术栈:router和redux
在上篇文章中对Preact源码进行了分析,了解了Component
、render
、diff
等核心方法,以及页面渲染的大致流程。在这一篇文章中,将分析preact-router的源码实现,并了解在Preact
项目中使用react-redux
的方法,构建一个完整的web应用。
实现一个简单的编译器
发表于 | 分类于 技术原理
在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有
- 将ES6、7代码编译成ES5的代码
- 将SCSS、LESS代码转换成浏览器支持的CSS代码
- 通过uglifyjs、uglifycss等工具压缩代码
- 将TypeScript代码转换成JavaScript代码
- Vue模板语法转换成render函数、JSX语法转换成JS代码
尽管社区的工具如bable
、*-loader
已经帮我们完成了上面的所有工作,我们不用关心编译的过程,甚至也很少有人关注输出的代码,但是了解编译原理还是很有必要的,这篇文章主要用来记录我在学习编译原理时整理的一些笔记。
学习Typescript
发表于 | 分类于 编程语言/TypeScript
最近用TypeScript写了一个游戏,顺道把博客的后端项目也改成了ts版本,下面整理在学习TypeScript时遇见的的问题。