react-reading-sources
react-reading-sources copied to clipboard
ddzy
The notes about reading source code of react
原文链接: https://indepth.dev/the-how-and-why-on-reacts-usage-of-linked-list-in-fiber-to-walk-the-components-tree ## 前置知识 Fiber 架构有两个主要的渲染阶段: - reconciliation/render - commit 在源码中 reconciliation 阶段也被视为 "render" 阶段. 在该阶段, React 会遍历整个组件树, 并且进行如下操作: - 更新 state 和 props - 调用生命周期方法 - 检索当前组件的子组件 - 比对新老子组件...
原文链接: https://medium.com/styled-components/how-styled-components-works-618a69970421 现在的前端开发特别是 React 社区, CSS-in-JS 越来越常见了. [styled-components](https://www.styled-components.com/) 凭借着以下几种特性 [脱颖而出](https://github.com/tuchk4/awesome-css-in-js#libraries): - 它基于 [标记模板](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) 语法 - 以编写 React 组件的形式来定义样式 - 解决 CSS 模块化的问题 - 提供了 CSS 不具备的功能, 比如嵌套 - 上述特性都无需配置 开发者不再需要费尽脑汁去想...
原文链接: https://developers.google.com/web/updates/2015/08/using-requestidlecallback 译者前注: React 核心调度算法模拟实现了 requestIdleCallback, 具体源码可参考 [这里](https://github.com/ddzy/react/blob/master/packages/react-reconciler/src/ReactFiberScheduler.old.js#L2138-L2164) ## 使用 requestIdleCallback 目前的许多站点和 app 都要执行大量脚本. 同时 JavaScript 需要尽可能的快速执行, 并且不影响用户交互. 假如用户滚动页面的时候发送一些分析数据, 或者你往页面上插入 DOM 元素的过程中用户恰好点击了某个按钮, 你的 app 反应会变得迟缓, 严重影响用户体验.  好消息是现在 `requestIdleCallback` API...
## 写在前面 对于 React, 有一些比较难理解的知识点, 在通过阅读源码时, 都可以大概了解. 这里将常见的问题归纳起来(仅代表个人思考) ## 问题总结 ### 什么是虚拟 DOM? 虚拟 DOM, 实际上就是使用 JS 在其内部维护了一个对象, 是真正的 DOM 对象到 JS 对象的映射. 比如说一个 div 标签可以这么表示: ```js { tag: 'div',...
## 前言 在分析[hooks的运行机制](https://github.com/ddzy/react-reading-sources/issues/11)过程中, 我通过一个简单的案例——如何使用`hooks`? 来引申出在页面渲染阶段, `hooks`是如何执行的. 当然, `hooks`的执行分为两个阶段: - _mount_ 首次渲染阶段 - _update_ 后续更新阶段 本篇笔记将记录有关: - hooks是如何存储的 - useState-hooks的基本结构 附上一篇笔记的链接: - [hooks运行机制](https://github.com/ddzy/react-reading-sources/issues/11) ## 记录 > **注意**: 由于不同的`hooks`存储结构是不同的, 我这里只记录`useState`的存储方式及其内部结构. ### mountState...
## expirationTime产生时机 react产生更新的方式有两种: - ReactDOM.render - setState 每产生一个新的更新, 会计算出一个对应的`expirationTime`. 比如, 调用`ReactDOM.render`的过程中: ```js // ! MARK: [current] - FiberRoot.RootFiber const current = container.current; // ! MARK: [currentTime] - 是`动态`的, 表示页面从js开始加载到当前的时间戳 const...
## 1. 遍历 Fiber Tree 时的优化 `react`每产生一个更新, 都会遍历整个`Fiber Tree`, 这样做会产生很大的性能开销, 所以就需要采取必要的优化措施. 在 [beginWork](https://github.com/ddzy/react/blob/a050f3d459edd3b3b27773aa8b18f85fc414473b/packages/react-reconciler/src/ReactFiberBeginWork.js#L2017) 方法内部, 分别进行了两个方面的优化: 1. props 是否改变? ```js if (oldProps !== newProps || hasLegacyContextChanged()) { // If props or...
## 前言 上一篇记录了`ReactDOM.render`的具体流程, 到了`beginWork`, 也就是react根据当前fiber节点的各种属性, 来做不同的更新处理. 这篇issue主要记录下react对于函数组件(`FunctionComponent`)的处理机制. ## 流程 ### beginWork `beginWork`内部有一个值得注意的地方, 那就是`fiber.elementType`和`fiber.type`, 这两者有什么区别? `fiber.elementType`对应`createElement`的第一个参数`type`. 而`fiber.type`则是为了区分`Suspense`组件. 正常情况下两者是相等的, 当存在`按需`组件, 也就是`Suspense`时, `fiber.type`的值为null. 展开源码 ```js function beginWork( current: Fiber | null, workInProgress: Fiber,...
## 前言 俗话说, 工欲善其事必先利其器. 看完[函数组件的更新](https://github.com/ddzy/react-reading-sources/issues/8)源码, 自然而然地对于`hooks`的实现原理产生了浓厚的兴趣, 故记录在此. ## 从如何使用说起 `hooks`的出现, 完全颠覆了传统的`class`至上的原则, 解决了`代码冗余`、`可维护性`、`编译性能`等多个问题. 看源码之前, 先看一下`hooks`是如何使用的: 展开源码 ```js import React from 'react'; const TestHooks = () => { const [name, setName] =...
## 前言 前几天已经简单总结过了`ReactDOM.render`的简单流程(#1). 但是没有进行深入的理解, 对于内部机制, 比如: - reconcile - schedule - ... 没有过多的去解读, 毕竟错综复杂的`源码`加上`FB`那帮人的神奇脑洞. 让整个`react`源码变得晦涩难懂. 所以决定新开一个`issue`, 对照`源码`, 将`ReactDOM.render`的流程再梳理一遍. ## 必备 react体系中有几个常见的对象 - DOMContainer - ReactRoot - FiberRoot - RootFiber -...