原文链接code-server 是 vscode 的服务端程序，通过部署 code-server 在服务器，可以实现 web 端访问 vscode。进而可以达到以下能力:支持跨设备(Mac/iPad/iPhone 等等)编程，同时保证多端编程环境统一。支持在 web 端提交 git 代码。解放背包重量😁。至于将 code-server 部署在树莓派上相比云端服务器好处是综合成本低，...

在大多数程序中，我们必须根据输入做出决策。TypeScript 也不例外，使用条件类型可以描述输入类型与输出类型之间的关系。本文同步首发在个人博客中，欢迎订阅、交流。用于条件判断时的 extends当 extends 用于表示条件判断时，可以总结出以下规律若位于 extends 两侧的类型相同，则 extends 在语义上可理解为 ===，可以...

观察基于 create-react-doc 搭建的文档站点, 发现网页代码光秃秃的一片(见下图)。这显然是单页应用 (SPA) 站点的通病 —— 不利于文档被搜索引擎搜索 (SEO)。

背景: 写博客的时候每当新增 LeetCode 题解时都需要在 LeetCode/README 手动更新表格, 非常费劲。因此构思了 crd-leetcode-cli 插件实现自动化同步更新 leetcode ac 题解为 markdown table 。

Create React Doc 是一个基于 React 的 markdown 文档站点生成工具。就像 create-react-app 一样，开发者可以使用 Create React Doc 来开发、部署 markdown 站点或者博客而不用关心站点环境配置信息。

Time is flying, it arrives at the end of year again. This is my first year working in PinDuoDuo inc and it seems I arrive in the company yesterday. This point is a good chance to talk with(recognize) myself again. I try to conclude from work, output, life and destination.

When I look up css properties in MDN's specifications section, there are some properties in it and it seems unfamiliar to me. So I try to find out some of them today.

React 官网中对非受控组件与受控组件作了如图中下划线的边界定义。一经推敲, 该定义是缺乏了些完整性和严谨性的, 比如针对非表单组件(弹框、轮播图)如何划分受控与非受控的边界? 又比如非受控组件是否真的如文案上所说的数据的展示与变更都由 dom 自身接管呢?

测试用例的书写是一个风险驱动的行为, 每当收到 Bug 报告时, 先写一个单元测试来暴露这个 Bug, 在日后的代码提交中, 若该测试用例是通过的, 开发者就能更为自信地确保程序不会再次出现此 bug。

本文是 React Hooks 深入系列的后续。此篇详细介绍了 Hooks 相对 class 的优势所在, 并介绍了相关 api 的设计思想, 同时对 Hooks 如何对齐 class 的生命周期钩子作了阐述。

本篇是基于 FDCon2019 上《让你的网页更丝滑by刘博文》的复盘文。该课题也是博主感兴趣的领域, 后续会结合 React 的 Schedule 与该文进行进一步整合, 个人博客

本文基于近段时间对 hooks 碎片化的理解作一次简单梳理, 个人博客。同时欢迎关注基于 hooks 构建的 UI 组件库 —— snake-design。 在 class 已经融入 React 生态的节点下, React 推出的 Hooks 具有如下优势: 更简洁的书写; 相对类中的 HOC 与 render Props, Hooks 拥有更加自由地组合抽象的能力; 使用 Hooks 的注意项 在 ...

本文副标题是 Request Schedule 源码解析一。在本章中会介绍 requestIdleCallback 的用法以及其缺陷, 接着对 React 团队对该 api 的 hack 部分的源码进行剖析。在下一篇中会结合优先级对 React 的调度算法进行宏观的解释, 欢迎关注个人博客。

在 16.6 版本之前，code-spliting 通常是由第三方库来完成的，比如 react-loadble(核心思路为: 高阶组件 + webpack dynamic import), 在 16.6 版本中提供了 Suspense 和 lazy 这两个钩子, 因此在之后的版本中便可以使用其来实现 Code Spliting。

此章节会通过两个 demo 来展示 Stack Reconciler 以及 Fiber Reconciler 的数据结构。 个人博客 首先用代码表示上图节点间的关系。比如 a1 节点下有 b1、b2、b3 节点, 就可以把它们间的关系写成 a1.render = () => [b1, b2, b3]; {代码...} Stack Reconciler 在 React 16 之前，节点之间的关系可以用数据结构中树的深...

该系列会有 3 篇文章，分别介绍什么是函数式编程、剖析函数式编程库、以及函数式编程在 React 中的应用，欢迎关注我的 blog 命令式编程和声明式编程 拿泡茶这个事例进行区分命令式编程和声明式编程 命令式编程 1.烧开水(为第一人称)2.拿个茶杯3.放茶叶4.冲水 声明式编程 1.给我泡杯茶(为第二人称) 举个 demo {代码...} ...

度过在点我达两年欢快的时光，开启在拼多多的新的旅程。 life 2 月: 在老家的方岩山上跨了年； 3 月: 和 w 做了过山车； 4 月：面基了 小小倩; 参加了杭州的草莓音乐节； 5 月：参加了掘金在杭的线下交流会, 初识染陌、阿相、静霞等掘金小伙伴，缘起； 6 月：和小伙伴们游玩崇明岛，逛了魔都夜景；参加了 GraphQL 的专题...

Before you're going to hate it, then you're going to love it. Concurrent Render(贯穿 16) 在 18年的 JSConf Iceland 上, Dan 神提到 Concurrent Render 涉及到 CPU 以及 IO 这两方面。 Time Slicing 对应解决左侧的问题, Suspense 对应解决了右侧的问题。它们共同要解决的是的提升用户体验, 在更多的场景下都可以做...

本文整理了 React 16.x 出现的耳目一新的概念与 api 以及应用场景。 更多 React 系列文章可以订阅blog 16.0 Fiber 在 16 之前的版本的渲染过程可以想象成一次性潜水 30 米，在这期间做不了其它事情(Stack Reconciler); 痛点概括: 一次性渲染到底 中途遇到优先级更高的事件无法调整相应的顺序 在 16 版本上, React 带来了...

InversityJS 是一个 IoC 框架。IoC(Inversion of Control) 包括依赖注入(Dependency Injection) 和依赖查询(Dependency Lookup)。

阅读完本文可以了解到 0.1 + 0.2 为什么等于 0.30000000000000004 以及 JavaScript 中最大安全数是如何来的。

开发环境中可使用 analyze-webpack-plugin 观察各模块的占用情况。以该项目为例：浏览器中输入 http://localhost:3000/analyze.html 可以看到如下效果:

接上一章 HOC 探索 抛出的问题 ———— react 中的 onChange 事件和原生 DOM 事件中的 onchange 表现不一致，举例说明如下：

原文地址 为了探究按需加载的本质，选择了对先前造的轮子 diana 进行实验。 实验一：全量引用 {代码...} 打包体积结果如下： 测试的是 diana 0.4.1 实验二：部分引用 {代码...} 打包体积结果如下： 经过测试，发现两种方式打包后的体积都为 21 k，第二种方式仍然将整个包引入项目中了。可是 lodash 就是这么玩的呀，这和...

本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) 项目地址

常见数据结构的 JavaScript 实现 Stack Queue List Set Dictionary Hash Table Binary Tree Graph 前端与数据结构 数据结构在开发中是一种编程思想的提炼，无关于用何种语言开发或者是哪种端开发。下列将笔者涉猎到的与前端相关的数据结构案例作如下总结： 数据结构 案例 栈 FILO: 其它数据结构的基础，redux/koa2 中间...

看源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...)

本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/...) 从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 —— 组件和 state|props 生命周期 先来回顾 React 的生命周期，用流程图表示如下： 该流程图比较清晰地呈现了 react 的生命周期。...

阅读源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...)

看源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/...)