作者:Puggo
在前端框架无比盛行的今天,Web 页面的构建变得越来越简单和高效,对于框架的熟练掌握几乎成为了当代前端开发工程师的必备基本能力之一。从 React、Vue、Angular 开始,再到现如今的 Next.js 和 Nuxt.js,从命令式到声明式渲染,从网页到原生开发……,Web 能做到的事情越来越多,也变得越来越强大。这些框架背后伟大的开发者们让数以万计的前端从业人员能够更加轻松地实现自己的想法,高效完成自己的工作。但同时我们也注意到,这种简化在降低开发门槛的同时,也放低了对代码质量的要求 —— 大多数复杂的机制都由框架完成了,框架带来的兜底让不少开发者与以往相比更加不负责任地书写代码,而非细致考虑某种实现方式背后潜藏的危机,对代码的可读性、扩展性和规范性等欠加考虑,从而写出意想不到的 bug。于是我们看到,理解变成了灾难,维护变成了重构……。想象一下一段存在潜在 bug 的代码进入生产环境后,可能会带来什么样的问题。因此我相信,对框架底层原理的基本理解和对代码质量的重视是一个软件工程师能够在业界不断进步的重要因素,这些技能往往能让你用更加深入和专业的视角来解决实际问题(注意,我并不是说要死磕技术,重要的是你能够运用你所掌握的技术原理和思维来真正解决问题)。而正在看本文章的你一定对此颇有志向,那么请跟随我和原作者一起,dive deep into React。
本 Notion 页面相当于著名博客 https://pomb.us/build-your-own-react/ 的中文翻译版。该博客基于 React 16.8 版本,对 React 的一些关键源码进行了深入浅出的剖析,能够帮助你快速建立起对 React 核心机制的理解。本页面在该博客的基础上做了中文翻译的同时,还补充了一些关键概念,并对源码进行了更详细的讲解注释。最后,请大家一定要支持原作者!
在正式决定学习之前,你可能需要具备以下技能:
在我们深入了解 react 背后的机制之前,阅读下面的资料可以帮助你快速复习 react 的整体结构、实现与一些重要的基本概念有一个初步认知,这有助于你在之后的源码学习中更好地理解其实现机制
关于 React Hooks:
React 在背后是如何工作的
构建 React 官方源码(可选)