Как читать исходный код

Vue.js React.js

В последнее время я написал много статей, связанных с анализом исходного кода, как React, так и Vue, и хотел бы поделиться с вами своим опытом чтения исходного кода.

Реагировать:

вид:

Быстрая отладка исходного кода

Когда дело доходит до просмотра исходного кода, многие люди неправильно понимают, что исходный код должен быть для просмотра полного кода на github клонирован вниз, что только полный код загружается, прежде чем вы сможете начать обучение.

Отладка

Вот возьмем в качестве примера React.После клонирования исходного кода весь человек ошеломлен.

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

React 源码目录解构

Обычно в это время вы начинаете искать в Интернете статьи о том, как отлаживать исходный код React. Однако процесс построения такого масштабного проекта более сложен, если вы хотите просто понять исходный код, вам не нужно разбираться в этих сложных вещах. Вот простое решение, чтобы научить вас, перейдите непосредственно кCDNЗагрузите официальный скомпилированный исходный код версии для разработки (CDN.JS Deli VR.net/годовой рейтинг/реакция@1…), номер версии в середине можно заменить любой версией по вашему желанию.

react

После того, как у нас есть исходный код, мы должны приступить к написанию демо. В настоящее время сложнее собрать проект самостоятельно, потому что при написании React будет jsx, а babel нужно экранировать jsx. Здесь мы рекомендуем использовать официальные леса: create-react-app.

npx create-react-app react-demo
cd react-demo

Здесь нам нужно немного изменить конфигурацию веб-пакета,react-app-rewiredИзменить настройку.

npm install react-app-rewired --save-dev

修改package.json

Затем создайте новую папку в папкеconfig-overrides.jsфайл, который настраивает веб-пакетexternalsсвойство, чтобы react и react-dom в проекте могли ходить по смонтированным под окном объектам.

/* 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;
}

Следующим шагом является монтирование React в окне и размещение исходного кода версии для разработки, которую мы скачали с CDN, вpublicкаталог, затем вpublic/index.htmlПредставьте исходный код.

全局引入 react

затем пройтиnpm run startПросто запустите проект в обычном режиме.

React App

Затем вы можете делать все с удовольствием, вы можете начать отладку на панели «Источники» Chrome, конечно, если хотите.console.log, также доступный вpublic/react.jsПоместите в него свой любимый журнал.

Sources

Отладка

Отладка Vue проще, чем React, потому что Vue поддерживает компиляцию шаблонов браузера. мы тожеCDNНепосредственно загрузите скомпилированную полную версию разработки (Woohoo. Рейтинг JS Deli VR.com/package/year…).

image-20201205232605725

Затем создайте новыйvue.html, перетащите файл в локальную службу http.

<!DOCTYPE html>
<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>

Теперь мы можем напрямую приступить к отладке исходного кода Vue3, настолько это просто и грубо. Конечно, если вы хотите пройти.vueСпособ написания шаблонов вам все равно придется ссылаться на способ, упомянутый React выше.

Найдите правильную точку входа

При методе отладки исходного кода нам также необходимо найти точку входа, и мы не можем посмотреть исходный код, чтобы увидеть исходный код. Так называемая точка входа представляет собой небольшую проблему.Например, я хочу понять, как шаблон Vue преобразуется в виртуальный DOM.Мы можем сначала найти информацию в официальной документации, чтобы увидеть, есть ли соответствующие инструкции.К счастью, официальный Vue документация находится в渲染函数-模板编译В части этой проблемы просто оказались соответствующие инструкции.

Vue官方文档

В документации упоминаетсяVue.compileТогда мы можем искать источник API начать отладку. Это с целью увидеть исходный код, мы только начинаем с этой проблемы, будет иметь более высокую эффективность.

В дополнение к проблеме вы также можете обратиться к другим отличным статьям, объединяющим мудрость тысяч пользователей сети. Конечно, это тоже палка о двух концах, потому что вы можете найти некоторые острые куриные изделия, но это снизит вашу эффективность. Более того, фреймворк находится в процессе итерации, изменений много, возможно, вы узнаете об исходниках React 16, поищите статьи, связанные с React 15, тогда вы потратите много времени и сил, чтобы разобраться, почему вы видите и почему кто-то пишет, это не по-вашему, или у автора нет пера.

В то же время, есть также некоторые статьи, которые любят рисовать привлекательные схемы архитектуры (себя), прочитав его, вы назовете его экспертом, но большинство этих архитектурных схем нарисованы с личной точки зрения автора, которая может отличаться от вашей предыдущей точки зрения, и потребуется некоторое время, чтобы понять его идеи. Если мы разделим огромный проект на маленькие задачи и разберем их одну за другой, то мы сможем обдумать идеи дизайна и логику работы всего фреймворка с глобальной точки зрения, и мы сможем получить в два раза больше результата с половиной усилий.

Принудительный выход

Обучение с выводом есть обучение.В процессе чтения исходного кода вы должны думать во время просмотра.В процессе мышления вам также необходимо формировать письменный отчет.Если вы просто продолжаете смотреть на код, его трудно понять .

Смотрю на исходники в процессе, думаю, как бы нам сказать другим людям, чтобы они слушали эту часть, она не в состоянии написать демо и тому подобное, чтобы мы научились следить за ходом моей мысли. Чтобы научиться делать свои собственные, они могут поделиться процессом обучения, чтобы помочь другим людям, почему бы и нет.

Категории