All about React

React向开发者提供了一些声明式API。使用者在使用这些ApI的时候，根本不用操心每一个更新的背后，底层到底发生了什么（译者注：这就是数据驱动开发模式下的开发体验）。这使得应用开发变成更加容易了。不过，这种封装使得React的内部实现原理对我们而言，就不那么的显而易见了。这篇…

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 这一周，Sophie Alpert和我在 React Conf大会上发表了有关于Hooks提案的演讲，随后 Ryan Florence进行了更加深入的探讨。 我强烈推荐大家去观看这个开幕式主题演讲，看看我们到底在…

React Fiber是对React核心算法的重新实现。这是一个正在进行中的项目。到目前为止（指2016年），React团队已经对此进行了为期两年的研究和调研。 React Fiber的目标是增加React对动画，布局和手势等领域的是适配性（suitability）。React…

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 在典型的React数据流中（自上而下的数据流），props是父组件与子组件打交道的唯一途径。为了与子组件交互，你需要给子组件传递一个新的props，促使它重新渲染。然而，有不少的场景需要我们在这种props主导型…

在正式进入实现之前，我们先来了解一下几个概念。首先，“映射”这个概念已经在“第一篇文章里”里面介绍过了，这里就不在赘述了。我们来讲讲这里所说的“整树”和“协调”到底指的是什么？ 熟悉react的读者都知道，完整的react应用是可以用一颗组件树来表示的。而组件树背后对应的归根到…

本文将会带你深入学习React的新架构－Fiber和新的reconciliation 算法的两个阶段。我们将会深入探讨一下React更新state和props，处理子组件的具体细节。 React是一个用于构建用户界面的javascript类库。它的核心机制是对组件状态进行变更检…

前言 曾经觉得 react 18 会离我比较远，上一次跟进 react 特性还是在 「react server component」 被宣布的时候，当时我写了一篇文章【react】初探 server

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 在典型的React应用中，数据是通过props，自上而下地传递给子组件的。但是对于被大量组件使用的固定类型的数据（比如说，本地的语言环境，UI主题等）来说，这么做就显得十分的累赘和笨拙。Context提供了一种在…

关于react的setState机制，我相信有两个术语是人尽皆知的，那就是“批量更新”和“异步执行”。其实这两个术语都是在描述同一件事。为什么这么说呢？因为深入过源码的人就知道，“批量更新”是因，“异步执行”是果。世人都喜欢看表象和结果，所以一般情况下，我就用“异步执行”或者“…

在v0.8.0版本中，react组件初始挂载实现是相对简单的。总体可以划分为两部分来阐述：组件实例化和（真正的）组件挂载。因为先理解组件实例化，再理解组件挂载会比较好。所以，我先介绍组件实例化，后介绍（真正的）组件挂载流程。 在搞懂什么是react组件之前，我们不妨先了解一下“…

假设我大学本科毕业论文的课题是［依据react现有的思想DIY一个react］，我会怎么实现呢？作为一个react老用户的我，我常常有这样的疑问。那好，现在，我就在这根据现有的react概念和思想，循序渐进地DIY一个简单版的react。一来，为自己立下一个react研究进程的…

这篇文章用一个由parent component和children component组成的例子来讲述fiber架构中react将props传递给子组件的处理流程。 在我先前的文章中 深入React Fiber架构的reconciliation 算法 提到要想理解更新流程的技术…

这篇文章主要是探索React reconciler的新实现-Fiber中的work loop。在文本中，我们对比和解释了【浏览器的call stack】和【React Fiber架构自己实现的stack】之间的不同。 为了自学和回馈社区，我花费了大量的时间去做web技术的逆向工…

当我第一次来到Facebook的React团队工作时，我有点茫然不知所措。从外部看，React核心团队规模看起来很庞大！但事实是，像Eli White和Sebastian McKenzie这样的人都是React Native团队的人。当你想到React的时候，你会想起很多著名的…

前言 自从新的context API和hook特性相继出来后，江湖上类似于“我们再也不需要redux”，“redux已死”的论调甚上尘嚣。如果不能在使用redux的过程中，保持一个深度思考状态，你可能

前言 我在外网闲逛，看了一篇文章，作者在里面讲到了他认为当前 react 社区对 react 在重渲染（re-render）方面存在两个误解： 误解1 - 当一个 react 组件因为状态更新而导致重

前言 「react key」相关问题几乎是面试的老生常谈了。也许你会说这是面试的八股文问题而已，有什么好说的。但是，实际上，正确去理解它对日常的开发工作还是有帮助的。一来能够帮助我们避免踩到坑里面，二

首先，合成事件这个名词是从“Synthetic Event”翻译过来的，在react的官方文档和源码中，这个术语狭义上是指合成事件对象,一个普通的javascript对象。而在这里，我们谈论的是由众多不同类型事件的合成事件对象组成的合成事件系统(React’s Event Sy…

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 应用中局部UI中的javascript错误按理说不应该导致整个应用的崩溃。为了帮助React用户解决这种问题，React在16.x.x中引入了新的概念-“error boundary”。 什么是“error bo…

我们会把useState,useReducer和useEffect等等称之为“hook”。确切来说，hook是一个javascript函数。 从数据类型的角度来说，hook对象是一个“纯javascript对象(plain javascript object)”。从数据结构的角…