楼主: kaixin202212
284 0

[作业] [完结16章]React18内核探秘:手写React高质量源码迈向高阶开发 [推广有奖]

  • 0关注
  • 1粉丝

讲师

39%

还不是VIP/贵宾

-

威望
0
论坛币
380 个
通用积分
37.1063
学术水平
0 点
热心指数
3 点
信用等级
0 点
经验
5713 点
帖子
208
精华
0
在线时间
316 小时
注册时间
2022-11-10
最后登录
2024-6-5

+2 论坛币
k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群
赵安豆老师微信:zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

感谢您参与论坛问题回答

经管之家送您两个论坛币!

+2 论坛币
[完结16章]React18内核探秘:手写React高质量源码迈向高阶开发
网盘地址:https://pan.baidu.com/s/16RjIJRIXrJFaAjHkvgj9gQ 提取码:over
腾讯微云下载地址:https://share.weiyun.com/JH3ozd2p 密码:w5gz2n

React源码教程下载-React18内核探秘:手写React高质量源码迈向高阶开发,手写 React 高质量源码,迈向高阶开发

React 源码解析是一种对 React 框架内部实现原理的分析,以及了解 React 的工作原理。它可以帮助我们更好地理解 React,并且可以帮助我们更好地调试和优化 React 应用程序。

React 源码解析是一种对 React 框架内部实现原理的分析,以及了解 React 的工作原理。它可以帮助我们更好地理解 React,并且可以帮助我们更好地调试和优化 React 应用程序。

react分为几个模块
scheduler(调度器):排列优先级,优先级高的先执行reconciler
reconciler(协调器):render阶段(主要工作:构建Fiber树和生成effectList),找哪个节点改变,打不同的tag(形成effectlist链表,记录需要更新的节点),创建或更新fiber节点(diff算法),采用深度优先遍历
renderer(渲染器):commit阶段,将reconciler打好标签的节点(主要遍历effectList),渲染到视图
scheduler、reconciler在内存中进行,不影响真实节点
react 17版本的出现,带来了全新的concurrent mode,包含一类功能的合集(fiber、scheduler、lane、suspense),核心是实现了一套,异步可中断,带优先级的更新。

1. 配置 React 源码本地调试环境
使用 create-react-app 脚手架创建项目
npx create-react-app react-test
弹射 create-react-app 脚手架内部配置
npm run eject
克隆 react 官方源码 (在项目的根目录下进行克隆)
git clone --branch v16.13.1 --depth=1

函数分析
从 Demo 我们看到,整个项目先通过 createRoot 这个函数创建一个 root 对象,再通过 root 的 render 方法将 App 这个组件渲染到网页上

createRoot
我们先看 createRoot 这个方法具体做了什么事情。这个方法来自 react-dom 这个包。我们可以在源码中 packages / react-dom / src / client / ReactDOMRoot.js 中找到 createRoot 的具体实现(前面在 ReactDOM.js 做了一些关于环境的条件判断,可先忽略)
createRoot 函数有两个参数 container 和 options,其中 options 是可选参数,本章为了简单起见先不讨论;

该函数大概实现的功能就是:
创建容器对象 FiberRootNode
事件委托处理
根据 FiberRootNode 对象返回 ReactDOMRoot 对象

二维码

扫码加我 拉你入群

请注明:姓名-公司-职位

以便审核进群资格,未注明则拒绝

关键词:ACT container SCHEDULE Packages options

您需要登录后才可以回帖 登录 | 我要注册

本版微信群
加JingGuanBbs
拉您进交流群

京ICP备16021002-2号 京B2-20170662号 京公网安备 11010802022788号 论坛法律顾问:王进律师 知识产权保护声明   免责及隐私声明

GMT+8, 2024-6-7 03:53