深入浅出的学习react

技术圈时下盛行“造名词”风气，但其实这是故弄玄虚的“语言壁垒”——其实技术本身在多数情况下都是一些简单且有趣的东西，人们越是试图神化它，越容易脱离技术本质。 在过去的几年，“变化”始终是前端框架世界里的一号关键词：前有 jQuery 刚刚式微(衰落)时各路神仙各显神通，后有 R…

时下虽然接入 JSX 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 React。2013 年，当 React 带着 JSX 横空出世时，社区曾对 JSX 有过不少的争议，但如今，越来越多的人面对 JSX 都要说上一句“真香”！那么JSX 代码究竟是如何‘摇身一变’成为 D…

React 生命周期已经是一个老生常谈的话题了，然而，大多数的入门教材在设计上往往追求的是“简单省事、迅速上手”，这就导致许多人对于生命周期知识的刻板印象为“背就完了、别想太多”。当然“背就完事儿”这样简单粗暴的学习方式，或许可以帮助你理解“What to do”，到达“How…

在对 React 15 的生命周期有了系统的掌握和理解的基础上，我们接着对 React 16 以来的生命周期进行剖析。通过对比新旧两个版本生命周期之间的差异，来探寻变化背后的原因。 关于 React 16 以来的生命周期，下图是目前公认的比较优秀的流程大图。我们先来看 Reac…

当谈及生命周期时，其实谈论的是组件的“内心世界”。但组件和人是一样的，它不仅需要拥有丰富的内心世界，还应该建立健全的“人际关系”，要学会沟通和表达。 接下来所要探索的是蕴含在 React 组件中的“沟通与表达”的艺术。我们知道，React 的核心特征是“数据驱动视图”，这个特征…

在本章节中将来学习React 天然具备的全局通信方式“Context API”，并对 Redux 的设计思想和编码形态进行初步的探索。 Context API 是 React 官方提供的一种组件树全局通信的方式。 在 React 16.3 之前，Context API 由于存在…

许多人对于React-Hooks这块的知识缺乏自信，至少在面试场景下，当聊到 React-Hooks 的时候，很少人能够像聊 Diff 算法、Fiber 架构一样滔滔不绝、言之有物。那么问题出在哪里呢？大概是在学习的方法和途径上。 提起 React-Hooks，可能很多人的第一…

在之前的文章学习中，我们探究了 React-Hooks 的来头，并理解了其背后的“设计动机”。接下来我们来构建对 React-Hooks 的整体认知。 在章节的主体部分，将会通过一系列的编码实例来帮助你认识 useState、useEffect 这两个有代表性的 Hook，这一…

不要在循环、条件或嵌套函数中调用 Hook。 原则 1 无须多言，React-Hooks 本身就是 React 组件的“钩子”，在普通函数里引入意义不大。而对于原则2，相信很多人在它身上栽过跟头，或者说至今仍然对它半信半疑。其实，原则 2 中强调的所有“不要”，都是在指向同一个…

在过去的十年里，前端技术日新月异 。从最早的纯静态页面，到 jQuery 一统江湖，再到近几年大火的 MVVM 框架——研发模式升级这件事情对于前端来说，好像成了某种常态。其实研发模式不断演进的背后，恰恰蕴含着前端人对 “DOM 操作” 这一核心动作的持续思考和改进。而虚拟 D…

时下 React 16 乃至 React 17 都是业界公认的“当红炸子鸡”，相比之下 React 15 似乎已经是一副黯淡无光垂垂老矣的囧相了。 在这样的时代背景下，愿意自动自发地了解 React 15 的人越来越少，这是一个令人心碎的现象。毕竟有位伟人曾经说过，“以史为镜，…

当项目的数据流乱作一团的时候，层层排查到最后，会发现始作俑者往往是 setState——工作机制太复杂，文档又不说清楚，只能先“摸着石头过河”。 久而久之，setState 的工作机制渐渐与 React 调和算法并驾齐驱，成了 React 核心原理中区分度最高的知识模块之一。接…

我们认为，React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。 这段话里有 4 个字值得细细品味，那就是“快速响应”，这 4 个字可以说是 React 团队在用户体验方面最为要紧的一…

由于 ReactDOM.render 的内容比较多，所以拆分为上中下三部分来讲解。 在上一章节，我们站在宏观角度对 Fiber 的架构分层和迭代动机有了充分的把握。从本章节开始，将以首次渲染为切入点，拆解 Fiber 架构下 ReactDOM.render 所触发的渲染链路，结…

上一章节对 ReactDOM.render 的调用链路、包括其对应的初始化阶段的工作内容都有了学习和掌握。接下来在此基础上，学习后续的 render 阶段和 commit 阶段。这其中，render 阶段可以认为是整个渲染链路中最为核心的一环，我们反复强调“找不同”的过程，恰恰…

在上一讲从 beginWork 切入，摸索出了 Fiber 节点的创建链路与 Fiber 树的构建链路。本讲将以 completeWork 为线索，去寻觅 Fiber 树和 DOM 树之间的关联，将整个 render 阶段讲透。在此基础上，结合 commit 阶段工作流将会对 …

关于 Fiber 架构的实现原理和编码形态，前面已经洋洋洒洒地分析了 3 讲 。在前面的 3 讲里，通过对整个 ReactDOM.render 所触发的渲染链路进行了分析和串联，由此把 Fiber 架构在实现层面的大部分要点都捋了一遍。之所以花这么大篇幅，一方面是因为这部分知识…

相信不少人在进阶 React 的过程中都会或多或少地了解到这样一件事情：React 有着自成一派的事件系统，它和DOM 原生事件系统不一样。但具体不一样在哪，却很少有人能够一五一十地说清楚。 我们知道，对于不同的知识，需要采取不同的学习策略。就 React 事件系统来说，它涉及…

已经有过铺垫。从本讲开始，将在此基础上针对 Redux 进行更加系统和深入的学习。 可以快速上手。 何谓“系统”的学习？系统的一个前提就是建立必要的学习上下文，尝试理解事情的来龙去脉。 这些年常常会见到这样一种情况：很多人对 Redux 的基本操作很熟悉，甚至对它的运作机制也有…

在上一讲尝试对 Redux 源码进行拆解，认识了 Redux 源码的基本构成与主要模块，并深入了解了 createStore 这个核心模块的工作逻辑。这一讲将更进一步，针对 dispatch 和 subscribe 这两个具体的方法进行分析，分别认识 Redux 工作流中最为核…