flyzz177

前言 在深究 React 的 setState 原理的时候，我们先要考虑一个问题：setState 是异步的吗？ 首先以 class component 为例，请看下述代码...

最近在做一个功能，然后不小心踩到了 React 合成事件 的坑，好奇心的驱使，去看了 React 官网合成事件 的解释，这不看不知道，一看吓一跳... SyntheticE...

目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api。大多数项目不会直接使用 createContext 然后向下面传递数据，而是采用第三方库（rea...

React暴露出来的部分Hooks 功能描述 useState、useReducer: 状态值相关 useEffect、useLayoutEffect: 生命周期相关 us...

setState setState() 将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实s...

Demo 这里，我们在 index.html 中直接返回一段 html，以模拟服务端渲染生成的 html 注意，root 里面的内容不能换行，不然客户端hydrate的时候...

给 Context.Provider 的 value 对象地址不会发生变化，这使得子组件中使用了 useSelector -> useContext，但不会因顶层数据而进行...

这一章节就来讲讲ReactDOM.render()方法的内部实现与流程吧。 因为初始化的源码文件部分所涵盖的内容很多，包括创建渲染、更新渲染、Fiber树的创建与diff，...

前言 简单说下为什么React选择函数式组件，主要是class组件比较冗余、生命周期函数写法不友好，骚写法多，functional组件更符合React编程思想等等等。更具体...

这一章我想跟大家探讨的是React的生命周期与事件系统。 jsx的编译结果 因为前面也讲到jsx在v17中的编译结果，除了标签名，其他的挂在标签上的属性（比如class），...

我们常说的调度，可以分为两大模块，时间分片和优先级调度 时间分片的异步渲染是优先级调度实现的前提 优先级调度在异步渲染的基础上引入优先级机制控制任务的打断、替换。 本节将从...

先看一下FiberNode在源码中的样子 FiberNode 我们看FiberNode这个构造函数里面只是赋值，我们再找一下链路上的Fiber，我们发现在函数createF...

今天，让我们一起深入探究 React Hook 的实现方法，以便更好的理解它。但是，它的各种神奇特性的不足是，一旦出现问题，调试非常困难，这是由于它的背后是由复杂的堆栈追踪...

requestEventTime 其实在React执行过程中，会有数不清的任务要去执行，但是他们会有一个优先级的判定，假如两个事件的优先级一样，那么React是怎么去判定他...

React 设计体系如人类社会一般，拨动时间轮盘的那一刻，你便成了穿梭在轮片中的一粒细沙，角逐过程处处都需要亮出你的属性，你重要吗？你无可替代吗？你有特殊权限吗？没有，那不...

React 的鲜活生命起源于 ReactDOM.render ，这个过程会为它的一生储备好很多必需品，我们顺着这个线索，一探婴儿般 React 应用诞生之初的悦然。 更新创...

前言 从React Hooks发布以来，整个社区都以积极的态度去拥抱它、学习它。期间也涌现了很多关于React Hooks 源码解析的文章。本文就以笔者自己的角度来写一篇属...

目前来看 Context 是一个非常强大但是很多时候不会直接使用的 api。大多数项目不会直接使用 createContext 然后向下面传递数据，而是采用第三方库（rea...

ReactDOM.render 通常是如下图使用，在提供的 container 里渲染一个 React 元素，并返回对该组件的引用（或者针对无状态组件返回 null）。本文...