Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how programmers read the source code". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

React:

Evolution of React Architecture-from synchronous to Asynchronous

Evolution of React Architecture-from Recursion to Loop

The Evolution of React Architecture-Update Mechanism

The Evolution of React Architecture-the implementation of Hooks

Vue:

Principle of Vue template compilation

Optimization of Vue3 template compilation

Practice and principle of Vue3 Teleport components

Quickly debug source code

When it comes to looking at the source code, many people have a misunderstanding that they must go to the github to clone the complete code, and think that only by downloading the complete code can they begin to learn happily.

Debug React

Here we first take React as an example, after the source code clone, the whole person is confused.

Git clone git@github.com:facebook/react.git

Deconstruction of React source code directory

Usually at this time will start to search the Internet for articles, how to debug React source code. But the construction process of such a large project is more complex, if you just want to simply understand the source code, you do not need to understand these complex things. Here to teach you a simple solution, directly to the CDN to download the official compiled development version source code (https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.development.js)), the middle version number can be replaced with any version you want to see.

React

After we have the source code, we need to start writing Demo. At this time, it will be troublesome to build a project by ourselves, because writing React will have jsx, so we need babel to escape jsx. Official scaffolding is recommended here: create-react-app.

Npx create-react-app react-demo cd react-demo

Here we need to modify the configuration of webpack slightly and modify the configuration through react-app-rewired.

Npm install react-app-rewired-save-dev

Modify package.json

Then, create a new config-overrides.js file in the folder and configure the externals property of webpack so that both react and react-dom in the project can go to the objects mounted under window.

/ * config-overrides.js * / module.exports = function override (config, env) {/ / do stuff with the webpack config... Config.externals = {'react':' window.React', 'react-dom':' window.ReactDOM',}; return config;}

The next step is to mount react on window, put the source code of the develope version we downloaded on CDN into the public directory, and then introduce the source code into public/index.html.

Global introduction of react

Then start the project normally through npm run start.

React App

Next, you can happily make trouble, you can start the debug journey in the Sources panel of Chrome, of course, if you prefer console.log, you can also type your beloved log in public/react.js.

Sources

Debug Vue

Debugging Vue is easier than React because Vue allows browsers to compile templates. We also download the compiled full development version (https://www.jsdelivr.com/package/npm/vue?version=3.0.4&path=dist)) directly from CDN.

Image-20201205232605725

Then, create a new vue.html and drop the file into the local http service.

Vue3 Demo const app = Vue.createApp ({data () {return {name: 'shenfq'}}, template: `Vue App `}) app.mount (' # app')

We can now directly start debugging the source code of Vue3, which is as simple and rough as that. Of course, if you want to write templates in a .vue way, you still have to refer to the way mentioned by React above.

Find the right entry point

With the way to debug the source code, we also need to find a pointcut, not to look at the source code. The so-called entry point is a small problem. For example, if I want to understand how the template of Vue is transformed into virtual DOM, we can first look up the information in the official document to see if there are any relevant instructions. Fortunately, the official Vue document happens to have an explanation in the rendering function-template compilation section.

Vue official documentation

Vue.compile is mentioned in the document, and then we can search the source code for this Api to start debugging. This is to look at the source code with a purpose, and we will be more efficient only when we set out with problems.

In addition to starting with questions, you can also refer to other excellent articles, collecting the wisdom of tens of millions of netizens. Of course, this is also a double-edged sword, because you may find some spicy chicken articles, which will reduce your efficiency. Moreover, the framework will change a lot during the iteration, maybe you are learning the source code of React 16, the articles related to React 15 are found, and then you will spend a lot of time and energy trying to figure out why what you see is different from what others wrote, whether you opened it in the wrong way, or the author made a clerical error.

At the same time, there are some articles like to draw some eye-catching architecture (myself), after reading you will call an expert, but most of these architecture drawings are drawn from the author's personal point of view, probably different from your previous point of view, and it will take some time to understand his train of thought. If we split the huge project into small problems and break them one by one, and then think about the design ideas and operation logic of the whole framework from an overall point of view, we can get twice the result with half the effort.

Forced output

Learning with output is learning, in the process of reading the source code, you must think while watching, and in the process of thinking, you also need to form a written record. If you just stare at the code all the time, it is difficult to understand.

In the process of reading the source code, I will always think about how to tell this part to others, whether I can write a Demo and so on, so that everyone can follow my way of thinking to learn. In this way, you can not only learn to understand, but also share the learning process to help others, why not.

This is the end of the content of "how programmers read source code". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.