lizuncong

>欢迎关注[mini-react](https://github.com/lizuncong/mini-react)一起学习react源码吧 ## 学习目标 - 为什么 React 不将 ref 存在 fiber 的 props 中，这样在组件中就能通过 props.ref 获取到值 - ref 的值什么时候设置，什么时候被释放？ ## 前置知识 React Ref 用法可以看[这篇文章](https://github.com/lizuncong/mini-react/blob/master/docs/ref/ref%E5%8E%9F%E7%90%86%E5%8F%8A%E6%BA%90%E7%A0%81.md) ## React element 中的 ref 属性 React.createElement...

> 这篇文章介绍了 react 中 context 的实现原理，以及 context 变化时，React 如何查找所有订阅了 context 的组件并跳过 shouldComponentUpdate 强制更新。可以让我们更加充分认识到 context 的性能瓶颈并能够合理设计全局状态管理。 ## 学习目标 - React Context 的实现原理 - 订阅了 context 的组件是如何跳过`shouldComponentUpdate`强制 render 的 - React 是如何使用堆栈来存储...

> React 异常处理最重要的目标之一就是保持浏览器的`Pause on exceptions`行为。这里你不仅能学到 React 异常捕获的知识，还能学到如何模拟 try catch ## 大纲 - React 开发和生产环境捕获异常的实现不同 - 如何捕获异常，同时不吞没用户业务代码的异常 - 如何模拟 try catch 捕获异常 - React 捕获用户所有的业务代码中的异常，除了异步代码无法捕获以外。 - React 使用 handleError 处理 render...

> hook 链表保存在 fiber 节点的 memoizedState 属性上。 ## 概述 - 每一个 hook 函数都有对应的 hook 对象保存状态信息 - `useContext`是唯一一个不需要添加到 hook 链表的 hook 函数 - 只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具有副作用，在 render...

## JSX 先来简单复习一下 JSX 的基础知识。JSX 是`React.createElement的语法糖` ```js hello ``` 经过 `babel` 编译后： ```js React.createElement( "div" /* type */, { id: "container" } /* props */, "hello" /* children */ );...

> fiber 的 updateQueue 属性在不同类型的 fiber 节点中含义不同，本节主要介绍`HostRoot`、`HostComponent`、`ClassComponent`、`FunctionComponent`这几种类型的 fiber updateQueue 的作用。 ## 概述 - 在 HostRoot Fiber 中，`updateQueue`存的是`ReactDOM.render/ReactDOM.hydrate`的第三个回调参数，是个环状链表 - 在 ClassComponent Fiber 中，`updateQueue`存的是`this.setState`的更新队列，是个环状链表 - 在 FunctionComponent Fiber 中，`updateQueue`存的是`useEffect`或者`useLayoutEffect`的监听函数，是个环状链表 - 在 HostComponent...

> [深入概述 React 初次渲染及状态更新主流程](https://github.com/lizuncong/mini-react/blob/master/docs/render/%E6%B7%B1%E5%85%A5%E6%A6%82%E8%BF%B0%20React%E5%88%9D%E6%AC%A1%E6%B8%B2%E6%9F%93%E5%8F%8A%E7%8A%B6%E6%80%81%E6%9B%B4%E6%96%B0%E4%B8%BB%E6%B5%81%E7%A8%8B.md)一文中介绍过 React 渲染过程，即`ReactDOM.render`执行过程分为两个大的阶段：`render` 阶段以及 `commit` 阶段。`React.hydrate`渲染过程和`ReactDOM.render`差不多，两者之间最大的区别就是，`ReactDOM.hydrate` 在 `render` 阶段，会尝试复用(hydrate)浏览器现有的 dom 节点，并相互关联 dom 实例和 fiber，以及找出 dom 属性和 fiber 属性之间的差异。 ## Demo 这里，我们在 `index.html` 中直接返回一段 html，以模拟服务端渲染生成的 html ```js Mini...

### 大纲 - 双缓冲树机制 - 删除节点时如何释放内存，即如何删除旧的 fiber 节点 - 为什么需要重用 alternate 节点，重新创建不行吗？ ### 背景 在[React 初次渲染及更新流程](https://github.com/lizuncong/mini-react/blob/master/docs/render/%E6%B7%B1%E5%85%A5%E6%A6%82%E8%BF%B0%20React%E5%88%9D%E6%AC%A1%E6%B8%B2%E6%9F%93%E5%8F%8A%E7%8A%B6%E6%80%81%E6%9B%B4%E6%96%B0%E4%B8%BB%E6%B5%81%E7%A8%8B.md)一文介绍过 React 渲染更新主要分为两个阶段：render 阶段和 commit 阶段。render 阶段主要是将新的 element tree 和 当前页面对应的 fiber 树(即 curent tree)比较，并构建一棵...

> 本章介绍构建副作用链表的算法。 ## 知识点 - 了解什么是 fiber 副作用，以及 fiber 中与副作用相关的属性 - 了解如何构建副作用链表 ## 深入理解 React Fiber 副作用链表的构建算法 React 在 render 阶段构建副作用链表。其中，在 reconcile children(协调子节点) 时，如果旧的子节点需要删除，则标记为 Deletion 副作用，并添加到父节点的副作用链表中，这个操作在 beginWork 阶段完成。其余类型的副作用节点都在 completeUnitOfWork 阶段添加到父节点的副作用链表中。...

> 在 React 的渲染流程中，render 阶段从根节点开始处理所有的 fiber 节点，收集有副作用的 fiber 节点(即 fiber.flags 大于 1 的节点)，并构建副作用链表。commit 阶段并不会处理所有的 fiber 节点，而是遍历副作用链表，根据 fiber.flags 的标志进行对应的处理。 ## 位操作 在开始介绍 fiber flags 前，先来看下位操作 ### 按位非(~) 按位非运算符（~），反转操作数的位。 ```js const a...