- 博客(145)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 跟 React 学设计模式：掌握编程“套路”，打造高质量应用
与性能优化的视角相似，当我们谈论 React 设计模式时，实际上是在谈论“React 组件的设计模式”。
2021-12-02 13:34:03
426
原创 思路拓展：如何打造高性能的 React 应用？
eact 应用也是前端应用，如果之前你知道一些前端项目普适的性能优化手段，比如资源加载过程中的优化、减少重绘与回流、服务端渲染、启用 CDN 等，那么这些手段对于 React 来说也是同样奏效的。
2021-12-01 15:34:34
719
原创 从 React-Router 切入，系统学习前端路由解决方案
React-Router 是 React 场景下的路由解决方案，本篇将学习 React-Router 的实现机制，并基于此提取和探讨通用的前端路由解决方案。
2021-12-01 13:50:00
778
原创 从 Redux 中间件实现原理切入，理解“面向切面编程”
结合 Redux应用实例与 applyMiddleware源码，对 Redux中间件的实现原理进行分析。在此基础上，对“面向切面”这一经典的编程思想建立初步的认识。
2021-11-30 17:27:43
789
原创 Redux 设计思想与工作原理（下）
针对 dispatch和 subscribe这两个具体的方法进行分析，分别认识 Redux工作流中最为核心的dispatch动作，以及 Redux自身独特的 “发布-订阅”模式。
2021-11-30 13:55:55
413
原创 Redux设计思想与工作原理（上）
学习 Redux 的架构思想，梳理“单向数据流”这一核心特征的来龙去脉，真正理解Redux 定义中“可预测”这 3 个字背后的深意。
2021-11-22 16:59:58
655
原创 特别的事件系统：React 事件与 DOM 事件有何不同？
无论是在面试场景下，还是在实际的开发中，React 事件相关的问题都更倾向于考验我们对事件工作流、事件特征等逻辑层面问题的理解，而非对源码细节的把握。
2021-11-18 16:38:14
560
原创 剖析 Fiber 架构下 Concurrent 模式的实现原理
认识 Fiber 架构最迷人的那一面——Concurrent 模式（异步渲染）下的“时间切片”和“优先级”实现。
2021-11-18 14:12:24
593
原创 ReactDOM.render 是如何串联渲染链路的？（下）
以 completeWork为线索，去寻觅 Fiber树和 DOM 树之间的关联，将整个 render阶段理解透彻。在此基础上，结合 commit 阶段工作流，对 ReactDOM.render 所触发的渲染链路有一个完整、通透的理解。
2021-11-17 17:17:11
471
原创 ReactDOM.render 是如何串联渲染链路的？（中）
render 阶段可以认为是整个渲染链路中最为核心的一环，因为反复强调“找不同”的过程，恰恰就是在这个阶段发生的。render阶段做的事情有很多，以 beginWork 为线索，着重探讨 Fiber树的构建过程。
2021-11-17 14:17:45
173
原创 ReactDOM.render 是如何串联渲染链路的？（上）
以首次渲染为切入点，拆解 Fiber 架构下 ReactDOM.render 所触发的渲染链路，结合源码理解整个链路中所涉及的初始化、render 和 commit 等过程。
2021-11-16 18:00:33
190
1
原创 如何理解 Fiber 架构的迭代动机与设计思想？
“快速响应”可以说是 React 团队在用户体验方面最为要紧的一个追求。正是出于对“快速响应”的执着，React 才会想方设法把原本 O(n3) 的 Diff 时间复杂度优化到了前无古人的 O(n)。
2021-11-15 17:38:43
666
原创 setState 到底是同步的，还是异步的？
setState 到底是同步的，还是异步的？ setState 对于许多的 React 开发者来说，像是一个“最熟悉的陌生人”：当你入门 React 的时候，接触的第一波 API 里一定有 setState——数据驱动视图，没它就没法创造变化；当你项目的数据流乱作一团的时候，层层排查到最后，始作俑者也往往是 setState——工作机制太复杂，文档又不说清楚，只能先“摸着石头过河”。 setState 的工作机制渐渐与 React 调和算法并驾齐驱，成了 React 核心原理中区分度最高的知
2021-11-15 14:54:45
1278
原创 React 中的“栈调和”（Stack Reconciler）过程是怎样的？
如果我们不清楚 React 15 的运作机制，就无从把握它的局限性；如果我们不能确切地把握 React 15 的局限性，就无法从根本上理解 React 16 大改版背后的设计动机。因此在追逐时代潮流之前，必须学好历史。
2021-11-12 15:25:42
989
原创 真正理解虚拟 DOM：React 选它，真的是为了性能吗?
研发模式不断演进的背后，恰恰蕴含着前端人对 “DOM 操作” 这一核心动作的持续思考和改进。而虚拟 DOM，正是先驱们在这个过程中孕育出的一颗明珠。
2021-11-12 13:54:29
1430
3
原创 React-Hooks 设计动机与工作模式（下）
本篇通过一系列的编码实例来认识 useState、useEffect这两个有代表性的 Hook，在此基础上重新理解“Why React-Hooks”。
2021-11-11 14:57:04
199
原创 React-Hooks 设计动机与工作模式（上）
提起 React-Hooks，可能很多人的第一反应，都会是 useState、useEffect、useContext这些琐碎且繁多的 API。似乎 React-Hooks 就是一坨没有感情的工具性代码，压根没有啥玄妙的东西在里面，那些面试官天天让咱聊 React-Hooks，到底是想听啥呢？
2021-11-11 13:39:52
649
原创 数据是如何在 React 组件之间流动的？（下）
认识 React 天然具备的全局通信方式“Context API”，并对 Redux 的设计思想和编码形态进行初步的探索
2021-11-10 17:13:32
192
原创 数据是如何在React组件之间流动的(上)
当我们谈论生命周期时，其实谈论的是组件的“内心世界”。但组件和人是一样的，它不仅需要拥有丰富的内心世界，还应该建立健全的“人际关系”，要学会沟通和表达。
2021-11-10 15:21:35
771
原创 为什么 React 16 要更改组件的生命周期？（下）
为什么 React 16 要更改组件的生命周期？（下）进化的生命周期方法：React 16 生命周期工作流详解 这里推荐一个React生命周期大图，点击查看，先来看 React 16.3 的大图： 这里之所以特意将版本号精确到了小数点后面一位，是因为在React 16.4之后，React生命周期在之前版本的基础上又经历了一次微调。 接下来，先把上面这张React 16.3 生命周期大图中所涉及的内容讲清楚，然后再对 16.4 的改动进行介绍。Mounting 阶段：组件的初始化渲染（挂载）
2021-11-10 10:43:54
683
原创 为什么React16要更改组件的生命周期(上)
作为一个专业的 React开发者，我们必须要求自己在知其然的基础上，知其所以然。从“What to do”到“How to do”，再到“Why to do”。
2021-11-09 16:00:34
411
原创 JSX 代码是如何“摇身一变”成为 DOM 的？
时下虽然接入 JSX 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 React。2013 年，当 React带着 JSX横空出世时，社区曾对 JSX 有过不少的争议，但如今，越来越多的人面对 JSX都要说上一句“真香”！我们就来一起认识下这个“真香”的 JSX，聊一聊“JSX代码是如何‘摇身一变’成为 DOM的”。
2021-11-09 14:49:16
440
原创 引擎进阶（下）：如何理解 Process.nextTick 的原理？
在日常开发中，Process.nextick 在浏览器端代码中很少使用，但在 Node.js 开发种却极为常见，所以要好好掌握。
2021-11-08 14:15:23
1752
原创 引擎进阶（上）：探究宏任务 & 微任务的运行机制
首先分析宏任务和微任务的运行机制，并针对日常开发中遇到的各种宏任务&微任务的方法，结合一些例子来看看代码运行的顺序逻辑，把这部分知识点重新归纳和梳理
2021-11-08 13:43:54
239
原创 原理解析：JS 代码是如何被浏览器引擎编译、执行的？
原理解析：JS 代码是如何被浏览器引擎编译、执行的？ 分析浏览器引擎对 JS代码的编译情况，并结合日常的 JavaScript开发经验，重新理解底层的编译解析机制。对其底层原理的理解，将有助于理解前端的跨端应用，以及一套代码生成多种小程序相关框架的底层逻辑.在开始前请先思考：JavaScript代码被执行分为哪几个阶段？AST到底是做什么用的？V8 引擎介绍 当前百花齐放的编程语言，主要分为编译型语言和解释型语言。编译型语言的特点是在代码运行前编译器直接将对应的代码转换成机器码，运行
2021-11-08 11:02:00
1276
原创 事件轮询：如何理解浏览器中的 EventLoop？
事件轮询：如何理解浏览器中的 EventLoop？ 无论是浏览器端还是服务端，都在使用 Eventloop，虽然两者机制不同，但都利用了 JavaScript语言的单线程和非阻塞的特点。 先讲解浏览器端的 Eventloop的运行机制，对浏览器端有了一定的理解之后，再设计一些 Node.js的 Eventloop的底层逻辑。在开始之前先思考两个问题：浏览器端的EventLoop起到了什么作用？Node.js服务端的EventLoop的作用又表现在哪里？浏览器的 Eventloop E
2021-11-08 10:19:51
410
原创 垃圾回收：释放内存，提升浏览器页面性能
通过讲解 JS 引擎底层的垃圾回收机制，希望了解更多的浏览器内核层面的东西，从而对 JS 的内存管理以及内存溢出等形成一定的认识
2021-11-05 17:26:56
1106
原创 如何实现符合 Promise/A+ 规范的 Promise？
由于 Promise在异步编程中的重要性不言而喻，因此在很多面试中，现场实现 Promise相关方法的题目经常会出现，比如 all、race或者 any等。因此一步步实现一个符合标准的 Promise，希望在遇到相关题目时能够游刃有余。
2021-11-05 14:45:49
158
原创 怎样轻松实现一个 EventEmitter？
之所以要特地讲解这部分知识，是因为虽然严格意义上来说，events模块属于 Node.js 服务端的知识，但是由于大多数 Node.js 核心 API构建用的是异步事件驱动架构。
2021-11-04 17:20:39
446
原创 如何理解 Generator、Async/await 等异步编程的语法糖
如何理解 Generator、Async/await 等异步编程的语法糖 Generator是 ES6标准中的异步编程方式，而 async/await 是 ES7标准中的。希望通过这篇文章，能对这两种编程方式有更深的理解。那么在开始前请先思考一下：Generator执行之后，最后返回的是什么？async/await的方式比 Promise和 Generator好在哪里？Generator 基本介绍 Generator（生成器）是 ES6的新关键词，学习起来比较晦涩难懂，那么什么是 Gen
2021-11-04 14:38:05
294
原创 如何深入理解异步编程的核心 Promise？
如何深入理解异步编程的核心 Promise？ 其实在 ES6标准出现之前，社区就最早提出了 Promise的方案，后随着 ES6将其加入进去，才统一了其用法，并提供了原生的 Promise对象。Promise也是日常前端开发使用比较多的编程方式，因此需要对 Promise 异步编程的思路有更深刻的理解。 先抛出几个问题：Promise内部究竟有几种状态？Promise是怎么解决回调地狱问题的？Promise 的基本情况 如果一定要解释 Promise 到底是什么，简单来说它就是一个
2021-11-03 17:30:30
107
原创 JS 异步编程都有哪些方案
先一起来回想一下，我们在日常开发中都用过哪些 JS 异步编程的方式？总结起来无外乎有这几种：回调函数、事件监听、Promise、Generator、async/await，这几种 JS 的编程方式都是异步编程。回调函数方式是最早的 JS 异步编程的方式，后随着 ES 标准的发展，Promise、Generator 和 async/await 接连出现
2021-11-02 16:27:20
316
原创 手写 JS 数组多个方法的底层实现
我们都知道，比较常用的数组方法有 `push`、`pop`、`slice`、`map `和 `reduce `等,围绕这几个常用方法，并结合 `V8 `的源代码手写这些方法的底层实现
2021-11-02 15:39:24
343
原创 sort排序方法的实现原理
数组排序在日常工作中经常会出现，除了上一篇介绍的排序算法外，通过 sort 方法也可以实现数组的排序，因此这一篇剖析 JS 数组 sort 方法的底层实现。
2021-11-01 13:56:41
2234
原创 如何用 JS 实现各种数组排序？
如何用 JS 实现各种数组排序 数组排序是在 JavaScript的编程过程中经常会遇到的，也是面试中会考察的，尤其是调用 sort方法，不过今天主要围绕数据结构排队进行讲解，关于 sort方法的详细剖析会在下一讲探讨。为了方便更好地理解本讲的内容，在开始前请先思考几个问题。数据结构中稳定的排序算法有哪些？不稳定的排序算法有哪些？时间复杂度和空间复杂度分别代表了什么？时间复杂度&空间复杂度 在说排序算法之前，需要重新了解一下时间复杂度和空间复杂度。 关于时间复杂度，我们说的更
2021-10-29 14:13:18
552
原创 如何理解 JS 的类数组？
在前端工作中，开发者往往会忽视对类数组的学习，其实在高级 `JavaScript `编程中经常需要将类数组向数组转化，尤其是一些比较复杂的开源项目，经常会看到函数中处理参数的写法
2021-10-28 17:11:12
311
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人