How do I learn React source code?

Not long ago, v17.0.0-alpha.0 was merged into React master branch.

This means that Concurrent Mode is one step closer to production.

From v15～v16 refactored Fiber架构 to the new 并发模式 of v16～v17 React has evolved from a UI库 to a small 操作系统

For students who want to learn React source code, this is both 机遇 and a 挑战

The challenge is: React internal running process is really complex.

The opportunity is: Once you understand, your gain will not be limited 前端领域

• Programming Paradigm: The Idea 代数效应 of Functional Programming
• Operating system: How to implement 协程 from scratch (understandably generator
• Data structure: list, tree, small top heap
• Algorithm: O(n) Diff algorithm, various bit operations
• The browser operation mechanism

Front-end students want to expand their knowledge boundaries, from learning React source code is a good choice.

Why the source code is difficult to understand

From 机遇 can be seen, small to specific 算法 large to 编程思想 to understand the source code operation process, you need to learn a lot of pre-knowledge.

We debug the source code of a library, usually starting with his entry function debug For React this entry is ReactDOM.render

Printing the call stack from ReactDOM.render to 视图渲染 process reveals that the call process in between is complex and even asynchronous.

Students who are new to source code can easily get caught up in the sea of source code, from getting started to giving up.

How to learn the source code

If you divide the call stack by function, you can divide it into three pieces:

Each corresponds to three modules in the source architecture:

Scheduling - Coordination - Rendering

So, before you learn specific code, it's better to understand React architecture.

So why does React have such an architecture?

As developers, we focus on the purpose of implementing a feature before developing it - for a better user experience or for commercial purposes?

Similarly, the React team, as the developer of the framework, focuses on achieving this before developing React This is React design philosophy.

As you can see from the Official Website React Philosophy, the design concept is as follows:

React is the preferred way to build 快速响应 web applications with JavaScript.

It can be seen that React was designed to live up to the concept of 快速响应

Starting with 理念 you'll learn:

• What is constraining 快速响应 A: CPU bottlenecks and IO bottlenecks
• How do I resolve bottlenecks? A: Update the view in 并发 mode
• Why is React rolling out Fiber architecture? A: React15 architecture does not implement 并发更新

summary

From 理念 to 架构 from 架构 to 实现 this is a top-down learning step that is consistent with brain cognition.

This approach is good, but it requires a great deal of authoritative knowledge to be consistent with the ideas of React core team members, from 理念 to 实现

To this end, I wrote an open source e-book:

(React Technology Revealed _blank) ( https://react.iamkasong.com/ )

Explain React source code exactly in 自顶向下 mode.

At the same time, in order to ensure that there is no deviation in understanding, all the words in the book come from React core team members to share in public.

Hope can help you want to broaden the boundaries of knowledge, but also hope to give a star

Related reading

• React tutorial
• React micro-class
• React Chinese version of the document
• Novices learn react confused points (can also review, suggest collection!) React tutorial for Vue users, walk by and don't miss it
• React 17.0.0-rc.2 is officially released, introducing a new JSX transformation
• You can also understand React Fiber, have you learned to waste?

Author: Kakasong Source: Odd Dance Company Blog