前端开发
-
React 源码解读之首次渲染流程
说明:本文结论均基于 React 16.13.1 得出,若有出入请参考对应版本源码 题目 在开始进行源码分析前,我们先来看几个题目: 题目一: 渲染下面的组件,打印顺序是什么? i…
-
React 源码解读之Hooks
说明:本文结论均基于 React 16.13.1 得出,若有出入请参考对应版本源码 题目 老规矩,在进入正题前,先做个题目: 下面的组件能按照期望工作吗(每隔一秒数字增加 1)?W…
-
前端打工人如何写一个象棋 AI(一)
本文代码:https://github.com/ParadeTo/chinese-chess Demo地址:http://www.paradeto.com/vue-chinese-…
-
前端打工人如何写一个象棋 AI(二)
本文代码:https://github.com/ParadeTo/chinese-chess Demo地址:http://www.paradeto.com/vue-chinese-…
-
React 源码解读之 Concurrent(一)
引言 为了提升用户体验,React 团队提出了 Concurrent 模式。Concurrent 模式可以在应用更新的同时保持浏览器对用户的响应,并根据用户的设备性能和网速进行适当…
-
React 源码解读之 Concurrent 模式(更新插队)
引言 上篇[1]讲述了 Concurrent 模式中关于时间切片的实现方式,本文来讲讲 Concurrent 模式中另外一个特性:更新插队。我们先来看一个例子: import&nb…
-
React 源码解读之 Custom Renderer
引言 从React的渲染流程[1]我们知道,JSX 会先转为一颗 Fiber Tree,然后通过 Renderer 渲染成页面。 对于 Web 平台,这个 Renderer 就是 …
-
编译原理之手写一门解释型语言
实现一门简单的解释型语言分三步:词法分析,语法分析,解释执行。 词法分析 词法分析是编译器的第一步,他的工作是将一个长长的字符串识别出一个个的单词,比如 int age = 43;…
-
编译原理之 PEG.js
引言 在编译原理之手写一门解释型语言[1]中我们全手动写了一个 Parser 来解析我们的脚本,实际上有现成的工具可以更加方便地完成这个工作,比如 PEG.js。该工具通过解析语法…
-
React 源码解读之协调过程(一)
引言 在React 源码解读之首次渲染流程[1]中我们讲到了 React 在首次渲染过程(其实更新过程也一样)中存在 Render 和 Commit 两大阶段,其中 Render …
-
React 源码解读之协调过程(二)
引言 上篇文章介绍了 React 协调过程中 beginWork 阶段的前半部分,这篇文章我们来介绍后半部分。 beginWork 同样的,我们还是精简一下代码,只关注感兴趣的部分…
-
React 源码解读之 Context
引言 React 源码系列继续进行,今天来讲讲 Context 相关的内容。从何讲起呢?我们还是先从一个案例开始吧: import React, { …
-
React 源码解读之 Automatic Batching
引言 最近,React 团队给出了 React 18 版本的计划[1],其中提到了一个优化:Automatic Batching。关于该优化,React 成员之一 Dan 在 Gi…
-
React 远程动态组件实践
背景 想象有这样一个场景:A 团队开发了一套组件库,B 和 C 团队都在各自的业务项目中使用了该组件库。现在 A 团队需要对某个组件进行更新(比如修改颜色),按照以往的做法,A 团…
-
React Native 按需加载实战(一)
引言 React Native 应用默认会将我们的 JS 代码打包成一个文件,当我们的 React Native 应用变得很庞大了以后,一次性下载所有 JS 代码往往耗时很长,这时…
-
React Native 按需加载实战(二)
前言 上一篇文章介绍了如何对 React Native 项目的 JS 文件进行拆包,这次我们仍然用一个例子来演示如何按需加载拆包后的各文件。 目标 如上图所示,最终想实现如下效果:…