В 2021 году призрак знает, сколько раз я читал исходный код React

внешний интерфейс React.js
В 2021 году призрак знает, сколько раз я читал исходный код React

"Время не упущено, творчество не останавливается, эта статья участвует вКонкурс эссе на конец 2021 года"

В ноябре 2020 года я уехал из Гуанчжоу, где пробыл 5 лет, и приехал в свою нынешнюю компанию в Шэньчжэне, на тот момент во фронтенде было около 15 человек, но чего я не ожидал, так это того, что в Март 2021, ушли 9 старых коллег, в т.ч. Мои наставники тоже фронтенд-супервайзеры. Особенно в день ухода супервайзера настроение было немного подавленным, потому чтоБольшая часть потолка команды находится в Лидере. В то время я думал о смене работы только для того, чтобы найти отличного лидера и отличную команду, чтобы получить больше навыков, но я не ожидал, что это станет реальностью. . . Но с хваткой, это очень быстро, и когда я ночью с работы ухожу, я настраиваю свой менталитет,Теперь, когда потолка нет, давайте усердно работать над улучшением технического потолка команды..

image.png

Это чат с другом в тот день.В то время я еще немного растерялся на рабочем месте.Когда я спустился вниз,я быстро перестроил свой менталитет.Это действительно ыыд посмотреть на проблему с точки зрения разработки .

технические аспекты

исходный код

  • Reactисходный код. Это Хайкоу, которым я хвастался перед своими бывшими коллегами с конца прошлого года.Я сказал, что планирую ознакомиться с исходным кодом React к июню 2021 года, но поначалу я чувствовал, что исходного кода слишком много. и слишком сложно, поэтому я отложил это. Я ждал до июня, чтобы взять его и прочитать снова. На отладку построчно ушло почти два месяца. Я уже прочитал его семь или восемь раз, и я знаком с исходным кодом React. Видно, чтоreact-source-study
  • редукс, реакция-редуксисходный код. До редукса я в основном читал статьи по разным анализам исходного кода, которые можно описать как сто строк исходного кода, десять тысяч строк идей, и в нем используется очень много шаблонов проектирования. После прочтения исходного кода React я потратил неделю на чтение исходного кода redux и react-redux.Сам по себе Redux не сложен.React-redux может занять некоторое время, чтобы переварить и понять. И последний редукс и т. д. все переписано с помощью ts, что хвалят, а также использует React18use-sync-external-store, исходный код также анализирует это. видимыйАнализ исходного кода Redux, react-redux и связанного промежуточного программного обеспечения

image.png

  • axios. axios — это библиотека, которую мы использовали для запроса данных, поэтому мы все еще заинтересованы в ее реализации, на ее чтение ушло около трех или четырех дней, она относительно проста, но повод для жалоб — это то, что axios не написан на ts. , обсессивно-компульсивное расстройство Я переписал его с ц. видимыйанализ исходного кода axios
  • реактивный маршрутизатор, реактивный маршрутизатор, история. Это последняя версия V6, и она также переписана с помощью ts.Я написалстолбец, можете посмотреть, если интересно. В то же время мне также посчастливилось быть участником react-router.React-router, react-router-dom, анализ исходного кода истории

image.png

стек технологий

В этом году я в основном освоил следующие стеки технологий:

  • TS, теперь можно умело использовать
  • mobx, последняя компания использовала dva, так что с mobx я познакомился только в этом году.Первый декларативный, а второй отзывчивый, похожий на react и vue.
  • react-native, с нуля до он-лайн проекта, тоже наступило много ям, подытожил и вывел статью, но так как она связана с бизнесом, то отправляется только внутрь компании Yuque

image.png

  • taroАпплет — это тоже проект с нуля до онлайна, и есть много подводных камней, когда дело доходит до Bluetooth-печати.
  • electron, главным образом потому, что браузер не может реализовать автоматическую печать, поэтому функция автоматической печати после размещения заказа реализована через электронный
  • другие, такие какwebpack5, вите и вавилон. вебпак прочитан в начале годаtapable(Премиум версияEventEmitter, лежащий в основе Webpack), недавно замеченныйloader-runner, и некоторая базовая конфигурация;viteСейчас все они используются для личных проектов, а глубокого понимания у меня не было, посмотрим, когда проекты компании можно будет плавно перевести наvite;babelЯ узнал только часть, немного пообщалсяAST, исследование не является исчерпывающим, эти несколько будут взяты одним махом~

Библиотека компонентов

компанииБиблиотека компонентовВ основном я поддерживаю ее, но когда я взял на себя управление, библиотека компонентов была на самом деле очень сложной в использовании, например:

  • В предыдущем компоненте «Таблица» необходимо добавить различные HOC для добавления таких функций, как выбор, подтаблица и фиксированные столбцы.
  • Форма имеет единственную функцию, и каждый FormItem должен записывать значение и onChange.
  • Многие компоненты будут сообщать об ошибках, если они не записывают реквизиты, такие как значение и данные, или не имеют общих подсказок и т. д.

sassПодавляющее большинство занимают мидл и бэкенд формы Таблицы и Формы, что несомненно доставляет немало хлопот моим коллегам.Чтобы уменьшить сложность разработки моих коллег, я модифицировал многие части библиотеки компонентов. Далее я возьму Table и Form в качестве примеров, чтобы рассказать о том, как я преобразовал библиотеку компонентов.

1. Таблица преобразования

Когда я впервые пришел в компанию, я спросил своих коллег, как использовать HOC. Мои коллеги не знали порядок HOC, поэтому даже старые коллеги могут не знать, как его настроить. Поэтому отрисовать таблицу мы можем только получить код других коллег раньше CV, а на самом деле неизвестно почему.

image.png

Вот как настроить HOC таблицы, когда я только приехал в компанию и спросил у коллег

Упомянутые выше проблемы точно нетерпимы.Буквально однажды я вдруг вспомнил, где вроде бы видели различные HOC, вложенные в код ниже?

const KeyboardVirtualTable = diyTableHoc(
    keyboardTableHoc(fixColumnsTableHoc(editTableHoc(TableVitualized)))
 )
 
 // 可不可以转换为下面这样？
 const KeyboardVirtualTable = applyMiddleware([
 diyTableHoc, 
 keyboardTableHoc, 
 fixColumnsTableHoc, 
 editTableHoc
 ])(TableVitualized)

какие! Различные HOC приведенного выше кода не похожипромежуточное ПО! !

Я не могу запомнить все виды HOC, да и в жизни это невозможно, поэтому буквально за один уик-энд я осуществил вышеизложенную идею:

// util.ts
// 洋葱模型
const compose = (...fns: HocMiddleware[]): HocMiddleware => {
  fns = [...fns]
  if (fns.length === 0) {
    return (node: ReactNode) => node
  }
  return fns.reduce((res, cur) => (...args: any) => res(cur(...args)))
}
// 中间件
const applyMiddleware = (...middlewares: HocMiddleware[]) => (node: ReactNode) => {
  return compose(...middlewares)(node)
}

export { applyMiddleware }

Вышеупомянутая ссылкаreduxДостигнутоcomposeа такжеapplyMiddleware, а затем через различныеisXXXprop для настройки функциональности таблицы:

function Table<D extends object = any>({
  isDiy,
  isBatchSelect,
  isExpand,
  isSort,
  isEdit,
  isSub,
  isKeyboard,
  isSelect,
  isIndex,
  ...res
}: TableProps<D>) {
  const Table = useMemo(() => {
    // 按需引入
    let keyboardTableXHOC
    if (isKeyboard) {
      keyboardTableXHOC = require('@gm-pc/keyboard').keyboardTableXHOC
    }
    // 配置中间件
    const hocMiddles = [
      isExpand && expandTableXHOC,
      isBatchSelect && batchActionSelectTableXHOC,
      isSelect && selectTableXHOC,
      isIndex && indexTableXHOC,
      isDiy && diyTableXHOC,
      isSort && sortableTableXHOC,
      isEdit && editTableXHOC,
      isSub && subTableXHOC,
      isKeyboard && keyboardTableXHOC,
    ].filter(Boolean) as HocMiddleware[]

    const TempTable = applyMiddleware(...hocMiddles)(BaseTable)
    return TempTable as typeof BaseTable
  }, [
    isDiy,
    isBatchSelect,
    isExpand,
    isSort,
    isEdit,
    isSub,
    isKeyboard,
    isSelect,
    isIndex,
  ])

  const tableProps = (res as unknown) as TableProps<D>
  return <Table {...tableProps} />
}

Что ж, теперь мне наконец-то не нужно запоминать различные HOC и их порядок.После осознания я не смог сдержать волнения, поэтому поделился вышеприведенными результатами с членами команды:

image.png

Разумеется, в Table также добавляются такие функции, как обобщения, сортировка заголовков и т. д. Подробнее см.Крупное обновление TableX gm-pc 1.2.3

2.ControlledForm (контролируемая форма)

Первоначальные компоненты формы должны были передавать соответствующее значение и onChange, которые не могли реализовать такие функции, как унифицированное управление и связывание элементов формы, что приводило к довольно избыточному коду, который был весьма недружелюбен для фронтенд-разработчиков.Поэтому контролируемая форма была срочно нужно решить эту проблему.

image.png

Обратите внимание, что приведенное выше受控表单Фактический смысл состоит в том, чтобы позволить форме обрабатывать значение и onChange автоматически, вместо того, чтобы разработчик писал это сам, потому что исходная форма была занята, поэтому я взял другое имя компонента. Функция со ссылкой на antd, то есть черезFormвнутри использованиеContext,Потом:

  • вControlledFormсерединаControlledFormContextконтекстProvideСоответствующее значение формы и метод изменения значения формы (providerValues), затем вControlledFormItemпрошедшийuseContextПолучить значение контекста
  • ControlledFormItemкомпоненты вНе нужно передавать значение и onChange, исходный код основан наvaluePropName?: 'value' | 'checked' | 'selected' | 'date',trigger?: string(Имя функции обратного вызова компонента для изменения значения, например onChange) захватите компонент, добавьте соответствующее значение и триггерные функции к компоненту и передайтеReact.cloneElementКлонировать новые компоненты
function ControlledFormItem<T = any>(props: ControlFormItemProps<T>) {
  const {
    name = '',
    ...restProps
  } = props

  const {
    ...
  } = useContext(ControlledFormContext)
  const childProps = {
    ...children.props,
  }
  // 如果有提供name
  if (name) {
    // 拦截加上value
    childProps[valuePropName] = values?.[name]
    const triggers = new Set<string>([trigger])
    if (!Array.isArray(children)) {
      triggers.forEach((eventName) => {
        childProps[eventName] = (args: any) => {
          // 触发更新
          if (onChange) {
            const newValue = onChange(name, args)
            if (onFieldChange && resetFields && getFieldsValue && setFieldsValue) {
              onFieldChange(newValue, { resetFields, getFieldsValue, setFieldsValue })
            }
          }
        }
      })
    }
  }
  ...

  return (
    <FormItem {...restProps}>
      {cloneElement(children, childProps)}
    </FormItem>
  )
}

Теперь не нужно вручную управлять компонентами, не нужно писать всякие лишние vlaue и onChange

image.png

Разумеется, упомянутые выше списки и формы должны иметь реализацию различных дженериков:

image.png

image.png

Я не буду объяснять их здесь по одному, если вам интересно, вы можете прочитать:gm-pc 1.2.3 большое обновление,проверка формы gm-pc 1.3.3

нетехнические аспекты

1. После прочтения избранных томов Мао с 1 по 8

Я научился смотреть на проблемы с точки зрения развития, ни одно исследование не имеет права говорить, теория практики и противоречия, дух революционного оптимизма, понимание мира, преобразование мира и т. «Мао Сюань» действительно является книгой-сокровищем, но, впервые прочитав ее от начала до конца, я планирую прочитать ее еще в ближайшие несколько десятилетий, чтобы понять ее суть.

image.png

image.png

2. После прочтения «Сон о красных особняках»

image.png

image.png

Затем потребовалось некоторое время, чтобы собрать некоторую информацию о Dream of Red Mansions, такую ​​как предыстория, интерпретация, оценка каждого человека и так далее.

image.png

image.png

image.png

3. Пересмотрел некоторые романы Лу Синя.

Такие как «Крик», «Дневник сумасшедшего», «Конг Иджи», «Медицина», «Буря», «Родной город», «Правдивая история А Кью» и так далее.

image.png

4. Новый взгляд на норвежские лесные романы и фильмы.

«Норвежский лес» — роман, который мне очень нравится, я читал его на втором курсе и пересматривал в этом году, но фильм не понравился.

image.png

image.png

image.png

image.png

5. После прочтения 100 серий Всеобщей истории Китая.

image.png

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

6. Великий поход, три основные кампании Освободительной войны и Корейская война.

Найдите некоторые исторические материалы, предысторию, персонажей и т. д., упомянутые выше, на станции B и Zhihu. Мой бывший коллега сказал: «Ты единственный мой друг, который будет изучать эти войны», ха-ха. Конечно, все, что я знаю, это всего лишь несколько скинов, они мне просто интересны.

как интервьюер

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

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

Ниже приведены оценки некоторых интервьюеров, я очень рад их видеть:

image.png

image.png

Прогноз на 2022 год

  • Продолжайте углубляться в инженерию, создавать наборы инструментов, углубленно изучать babel, AST, изучать vite и т. д.
  • Реагировать почти то же самое, я надеюсь изучить VUE в следующем году, в настоящее время оставался только на сцене
  • Станьте Реагировать, Vuecontributor
  • Технология обучения должна сочетаться с бизнесом, сервисным бизнесом и надеждой на более глубокое понимание бизнеса компании, чтобы развитие было более комфортным.
  • Dab three.js, а фреймворк узла гнездо или яйцо или на полпути?

наконец

В 2021 году я встретил много больших парней, многие из которых моложе меня. Они такие молодые, сильные и трудолюбивые. По сравнению с ними я действительно новичок. Но я верю, что пока я делаю небольшой прогресс каждый день, это только вопрос времени, я надеюсь однажды стать кем-то вроде них~

Спасибо всем, чтобы увидеть это, и, наконец,"Упражняться"Последний абзац в конце этой статьи:

Истина открывается практикой, а истина подтверждается и развивается практикой. Активно развиваться от перцептивного познания к рациональному познанию и активно направлять революционную практику от рационального познания, преобразовывая субъективный мир и объективный мир. Практика, познание, повторная практика и переосмысление, эта форма бесконечно повторяется, и содержание каждого цикла практики и познания выходит на относительно высокий уровень. В этом вся гносеология диалектического материализма, и в этом взгляд диалектического материализма на единство знания и действия.

2022, продолжай усердно работать, давай! каждый! !

Категории