Recently I have written a lot of source code analysis related articles, React, Vue, I would like to share some of my reading source code with you.

React:

  • React architecture evolution – from synchronous to asynchronous
  • Evolution of the React architecture – from recursion to loop
  • React architecture evolution – Update mechanism
  • React architecture evolution – implementation of Hooks

Vue:

  • Vue template compilation principle
  • Vue3 template compilation optimization
  • The practice and principle of Vue3 Teleport component

Quick debug source code

When it comes to looking at source code, many people have a misconception that they must go to Github to clone the complete code down, think that only the complete code download down, to start happy learning.

Debug the React

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

git clone [email protected]:facebook/react.git
Copy the code

This is when you start searching for the React source code. However, the construction process of such a large project is complicated, and you don’t need to understand the complexity if you just want to understand the source code. Here to teach you a simple solution, directly to the CDN to download the official compiling a development version of the source code (cdn.jsdelivr.net/npm/react@1…). , the middle version number can be replaced with any version you want to see.

Create (JSX) {/ / create (JSX) {/ / create (JSX) {/ / create (JSX) {/ / create (JSX) {/ / create (JSX);

npx create-react-app react-demo
cd react-demo
Copy the code

Here we need to modify the webpack configuration slightly, via react-app-rewired.

npm install react-app-rewired --save-dev
Copy the code

Then, create a config-overrides. Js file in the folder and configure the externals attribute of webpack to enable react and react-dom in the project to access objects mounted under the 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;
}
Copy the code

The next step is to mount react to Windows, put the develope source we downloaded on the CDN into the public directory, and import the source in public/index.html.

Then start the project normally with NPM Run Start.

For fun, you can start your debug tour in Chrome’s Sources panel, or if you prefer console.log, you can also type your favorite log in public/react.js.

Debugging Vue

Debugging Vue is easier than React because Vue supports template compilation by the browser. We are also in direct download CDN has compiled complete development version (www.jsdelivr.com/package/npm)… .

Then, create a vue.html file and throw it into the local HTTP service.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue3 Demo</title>
</head>
<body>
  <div id="app"></div>
  <script src="/script/vue3.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          name: 'shenfq'}},template: `<div> Vue App </div> `
    })
    app.mount('#app')
  </script>
</body>
</html>
Copy the code

We are now ready to debug the Vue3 source code directly, as simple as that. Of course, if you want to write a template using.vue, you’ll have to follow the React approach.

Find the right entry point

With the method of debugging source code, we also need to find a point of entry, not just to see the source code and look at the source code. The so-called entry point is a small question, for example, I want to understand how Vue template into the virtual DOM, we can first look for information in the official documentation, see if there is any relevant instructions, fortunately, Vue official documentation in the rendering function – template compilation section of this problem.

Vue.compile is mentioned in the documentation, so we can search the Api in the source code and start debugging. This is to look at the source code with a purpose, we only start with a problem, will have a higher efficiency.

In addition to starting with questions, you can also refer to other excellent articles, gathering the wisdom of thousands of netizens in one. Of course, this is a double-edged sword, because you may find some hot articles, which will reduce your efficiency. In addition, the framework changes a lot during iteration. You might have learned the React 16 source code, searched the React 15 article, and spent a lot of time and energy trying to figure out why what you saw was different from what someone else wrote, whether you opened it in the wrong way or the author had a slip of the pen.

At the same time, some articles like to draw some eye-catching architectural diagrams (myself), after reading you will call the expert, but most of these architectural diagrams are drawn from the author’s personal perspective, probably different from your previous perspective, and it takes some time to understand his thinking. If we divide the huge project into small problems one by one and break them down one by one, then we can get twice the result with half the effort by thinking about the design ideas and operation logic of the whole framework from the perspective of the whole situation.

Force output

There is output learning is learning, in the process of reading the source code, we must look and think, in the process of thinking, but also need to form a written record, if you just stare at the code, it is difficult to understand.

In the process of looking at the source code, I will always be thinking about how to tell this part to others, whether to write a Demo and so on, so that we follow my ideas to learn. In this way, I can not only learn by myself, but also share the learning process to help others.