首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >老少皆宜的React源码通关指南

老少皆宜的React源码通关指南

作者头像
公众号@魔术师卡颂
发布2020-11-02 11:32:27
9920
发布2020-11-02 11:32:27
举报
文章被收录于专栏:魔术师卡颂魔术师卡颂

你好同学,我是一本老少咸宜的《React源码通关指南》。

你可以根据自己的水平,结合希望达到的深度,再考虑愿意付出的时间,跟着本指南做几道选择题,我会给你一份适合你的源码学习路径

1. 你当前属于什么阶段?

  • 我是React新手,写过几个Demo,对React有初步了解。跳到问题2
  • 我已经上手React,使用React开发过应用。跳到问题3

2. 你希望收获什么?

  • 对源码整体运行流程有大概了解,知道源码中的术语,可以在面试时和面试官就源码展开浅显的讨论。跳到答案1
  • 对源码的部分模块运行流程有较深入了解(比如Hooks的实现原理),可以在开发时更好的掌控React跳到答案2

3. 你希望收获什么?

  • 对源码的部分模块运行流程有较深入了解(比如Hooks的实现原理),可以在开发时更好的掌控React跳到答案2
  • 深入掌握源码的整个运行流程,可以写出自己的前端框架。跳到答案3

答案1

推荐你阅读build-your-own-react[1],并动手实现。

当你完成学习,可以实现一个包含时间切片fiber架构Hooks的简易React

最重要的是,这个简易版与真实的React运行流程类似。

答案2

首先完成答案1的学习。接下来我们将进入React真实源码的学习。

这里我们用到的教材是开源电子书React技术揭秘[2]

首先学习理念篇[3],了解React设计理念。

如果要理解Hooks的实现原理,阅读极简useState实现[4]

如果要理解状态更新相关实现(比如ReactDOM.renderthis.setStateuseState),阅读完架构篇[5]后阅读状态更新[6]

要理解Diff算法的实现,阅读完架构篇[7]后阅读Diff算法[8]

答案3

要深入理解框架的运行流程,达到能给ReactPR,或自己开发框架的水平,我们需要彻底了解React的理念,架构以及API的实现。

在此过程中,需要你动手跟着电子书一起debug代码。

参考资料

[1]

build-your-own-react: https://pomb.us/build-your-own-react/

[2]

React技术揭秘: http://react.iamkasong.com/

[3]

理念篇: https://react.iamkasong.com/

[4]

极简useState实现: https://react.iamkasong.com/hooks/create.html

[5]

架构篇: https://react.iamkasong.com/process/reconciler.html

[6]

状态更新: https://react.iamkasong.com/state/prepare.html

[7]

架构篇: https://react.iamkasong.com/process/reconciler.html

[8]

Diff算法: https://react.iamkasong.com/diff/prepare.html

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-10-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 魔术师卡颂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 你当前属于什么阶段?
  • 2. 你希望收获什么?
  • 3. 你希望收获什么?
  • 答案1
  • 答案2
  • 答案3
    • 参考资料
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档