7kms / React Illustration Series
图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.
Stars: ✭ 588
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Illustration Series
Fre
👻 Tiny Footprint Concurrent UI library for Fiber.
Stars: ✭ 3,195 (+443.37%)
Mutual labels: fiber, hook
Libfiber
The high performance coroutine library for Linux/FreeBSD/MacOS/Windows, supporting select/poll/epoll/kqueue/iocp/windows GUI
Stars: ✭ 519 (-11.73%)
Mutual labels: fiber
Rbtray
A fork of RBTray from http://sourceforge.net/p/rbtray/code/.
Stars: ✭ 365 (-37.93%)
Mutual labels: hook
React Cool Dimensions
😎 📏 React hook to measure an element's size and handle responsive components.
Stars: ✭ 419 (-28.74%)
Mutual labels: hook
React Dev Inspector
This package allows users to jump to local IDE code directly from browser React component by just a simple click
Stars: ✭ 372 (-36.73%)
Mutual labels: fiber
Under The Hood Reactjs
Entire React code base explanation by visual block schemes (Stack version)
Stars: ✭ 4,794 (+715.31%)
Mutual labels: fiber
Superdllhijack
SuperDllHijack：A general DLL hijack technology, don't need to manually export the same function interface of the DLL, so easy! 一种通用Dll劫持技术，不再需要手工导出Dll的函数接口了
Stars: ✭ 530 (-9.86%)
Mutual labels: hook
State Threads
Light-weight thread library, coroutine or c++ goroutine , patched for SRS.
Stars: ✭ 500 (-14.97%)
Mutual labels: fiber
D3d8to9
A D3D8 pseudo-driver which converts API calls and bytecode shaders to equivalent D3D9 ones.
Stars: ✭ 419 (-28.74%)
Mutual labels: hook
Inputmethodholder
A keyboard listener for Android which by hooking the InputMethodManager. 通过hook监听系统键盘显示
Stars: ✭ 417 (-29.08%)
Mutual labels: hook
React Cool Portal
😎 🍒 React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.
Stars: ✭ 458 (-22.11%)
Mutual labels: hook
Kiero
Universal graphical hook for a D3D9-D3D12, OpenGL and Vulkan based games.
Stars: ✭ 374 (-36.39%)
Mutual labels: hook
Use Onclickoutside
React hook for listening for clicks outside of an element.
Stars: ✭ 361 (-38.61%)
Mutual labels: hook
Use Local Storage State
React hook that persists data in local storage
Stars: ✭ 392 (-33.33%)
Mutual labels: hook
React Tiny Dom
🍙 A minimal implementation of react-dom using react-reconciler
Stars: ✭ 432 (-26.53%)
Mutual labels: fiber
React Laag
Hooks to build things like tooltips, dropdown menu's and popovers in React
Stars: ✭ 568 (-3.4%)
Mutual labels: hook
Dexcalibur
[Official] Android reverse engineering tool focused on dynamic instrumentation automation. Powered by Frida. It disassembles dex, analyzes it statically, generates hooks, discovers reflected methods, stores intercepted data and does new things from it. Its aim is to be an all-in-one Android reverse engineering platform.
Stars: ✭ 512 (-12.93%)
Mutual labels: hook
图解 React 原理系列
react原理, 基于[email protected](尽可能跟随 react 版本的升级, 持续更新). 用大量配图的方式, 致力于将react原理表述清楚.
使用指南
- 本系列以 react 核心包结构和运行机制为主线索进行展开. 包括
react 宏观结构,react 工作循环,react 启动模式,react fiber原理,react hook原理,react 合成事件等核心内容. - 开源作品需要社区的净化和参与, 如有表述不清晰或表述错误, 欢迎issue 勘误. 如果对你有帮助, 请不吝 star.
- 本系列最初写作于 2020 年 6 月(当时稳定版本是 v16.13.1), 随着 react 官方的升级, 本 repo 会将主要版本的文章保存在以版本号命名的分支中, 当前
master分支同步v17.0.1. 部分文章未更新, 可以参照v16.13.1分支. - 当下前端技术圈总体比较浮躁, 各技术平台充斥着不少"标题党". 真正对于技术本身, 不能急于求成, 需要静下心来修炼.
- 本系列不是面经, 但会列举一些面试题来加深对 react 理解.
- 本系列所有内容皆为原创, 如需转载, 请注明出处.
适用读者
- 对
react,react-dom开发 web 应用有实践经验. - 期望深入理解
react内在作用原理.
重要更新
更新日志)相较于 16.x 版本, 在使用层面基本维持不变, 在源码层面需要关注的重大的变动如下
| 重大变动 | 所属板块 | 官方解释 |
|---|---|---|
重构Fiber.expirationTime并引入Fiber.lanes
|
react-reconciler |
Initial Lanes implementation #18796 |
| 事件代理节点从 document 变成 rootNode, 取消合成事件的缓存池等 |
legacy-events(被移除), react-dom/events
|
changes-to-event-delegation |
主要类容
基本概念
运行核心
- reconciler 运作流程
- 启动过程
- 优先级管理
- scheduler 调度原理
- fiber 树构造(基础准备)
- fiber 树构造(初次创建)
- fiber 树构造(对比更新)
- fiber 树渲染
- 异常处理
数据管理
- 状态组件(
class) - 状态组件(
function) - hook 原理(
useState)(17.0.1 分支未完成, 可以参考 v16.13.1 分支中的分析) - hook 原理(
useEffect)(17.0.1 分支未完成, 可以参考 v16.13.1 分支中的分析) - context 原理(17.0.1 分支未完成, 可以参考 v16.13.1 分支中的分析)
交互
- 合成事件原理(17.0.1 分支未完成, 可以参考 v16.13.1 分支中的分析)
高频算法
历史版本
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].