All about React

useRef() useRef 用于在 react 组件多次渲染中保存同一个引用。该引用可以指向任何类型的 js 值。保存 DOM 节点只是useRef应用的一个特例。要想访问真实的 DOM 节点，我

TLDR; 本文意在探索 react 应用 mount 阶段 react fiber 初始链表的构建过程。为了探索这个过程，鲨叔呕心沥血地整理出了 770 行代码，以极简的代码量来还原了这个过程。不信

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件内部的渲染逻辑是通过调用这个函数来完成的。那么，我们就说这个组件使用了render props…

本文为意译，翻译过程中掺杂本人的理解，如有误导，请放弃继续阅读。 一般意义来说，React组件就是要隐藏它们的实现细节，包括自己的UI输出。而其他引用了<FancyButton>的组件也不太可能想要获取ref，然后去访问<FancyButton>内部的原生DOM元素button…

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 组件因为状态更新而导致重