Использование React также почти два года, начиная с того, что мы будем использовать его для постепенного изучения его базовой реализации, эта статья сначала из следующих аспектов, чтобы организовать некоторые точки знаний, такие как React для чтения книг, использования, восприятия некоторого резюме:

1.Функциональное программирование
2. Система событий React
3. Оптимизация производительности компонентов
4. Первый взгляд на исходный код React

Функциональное программирование

Функциональное программирование (FP) — это подход к разработке программного обеспечения, который использует чистые функции для создания поддерживаемого программного обеспечения. Другими словами, создание программ путем применения и составления функций.

В моем собственном понимании функциональное программирование является функционально-ориентированным, разбивая большие процедуры на отдельные функции и используя их в сочетании во вложенных наборах. Эта идея очень распространена в JavaScript. В качестве примера:

У нас есть математическое выражение:

(1 + 2) * 3 - 4

Преобразуйте приведенное выше выражение в код без каких-либо претензий.

const a = 1 + 2;
const b = a * 3;
const c = b - 4;

Возьмите идею функционального программирования: определите арифметические процессы как различные функции следующим образом.

const result = substract(multiply(add(1, 2), 3), 4);

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

Измените приведенный выше код:

add(1,2).multiply(3).subtract(4);

Разве это не тоже знакомо. Функциональное программирование очень распространено в JavaScript.

Система событий React

События React и события DOM
React реализует слой SyntheticEvent на основе Virtual DOM, а определяемый нами обработчик событий получает экземпляр объекта SyntheticEvent, который полностью совместим с W3C и не страдает от любые проблемы со стандартной совместимостью IE. Он имеет тот же интерфейс, что и собственные события браузера, и поддерживает тот же механизм всплытия событий, который можно прервать с помощью методов stopPropagation() и preventDefault().
Все события автоматически привязываются к самому внешнему слою. Если вам нужно получить доступ к собственному объекту события, вы можете использовать свойство nativeEvent.

Как вы знаете из использования React, у React есть собственная система событий, обычно включающая элементы, привязанные к событиям с помощью интерфейса событий, предоставляемого React:

// in html
<button onclick="activateLasers()">
  Activate Lasers
</button>

// in React
<button onClick={activateLasers}>
  Activate Lasers
</button>

Синтетические события React фактически создают уровень делегирования событий (прокси событий).

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

componentDidMount () {
    document.querySelector('#testEvent').addEventListener('click', (e)=>{
        console.log('dom event');
        console.log(e);
    })
}
componentDidUnMount () {
    document.querySelector('#testEvent').removeEventListener('click');
}
handleClick (e) {
    console.log('react event');
    console.log(e);
}
render () {
    return (
        <div>
              <div onClick={::this.handleClick}>Test React Event</div>
              <div id='testEvent'>Test dom Event</div>
        </div>
    );
}

Вот два div, использующих связанные события React и нативные DOM-события, два разных метода связывания событий, приводящих к одному и тому же эффекту, совершенно разные принципы.

Событие, напечатанное с использованием нативной привязки DOM, является собственным распечатанным событием React.

как вы можете видеть, это объект Proxy с целью для запуска события и обработчиком для обработки события, это синтетическое событие React.

Также, если вы привязываете нативные события в реакции, не забудьте отвязать их при удалении компонента, чтобы избежать утечек памяти.

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

Собственные события разделены на три части: захват событий, целевая обработка событий и всплывающая всплывающая подсказка событий; IE9 и более ранние версии не поддерживают захват событий, поэтому React не реализует его, а только всплывающую подсказку событий.
Существуют некоторые события, которые React не реализует, например, событие window.resize.

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

Оптимизация производительности компонентов

Виртуальный DOM, лежащий в основе React, предназначен для минимизации перерисовки и перерисовки браузера.

Здесь кратко изложено несколько моментов:

  1. Используйте более чистые функции: никаких зависимостей; тот же вход, тот же выход; повторное использование.
  2. PureComponent: по сути, PureComponent — это переписанный shouldComponentUpdate, который выполняет поверхностное сравнение nextProps и nextState с текущим состоянием и реквизитами для оптимизации производительности.
  3. Immutable: Используйте Immutable, чтобы делиться узлами данных и экономить на рендеринге.
  4. ключ: список отображает указанный ключ, тот же ключ не отображается; старайтесь не использовать index в качестве ключа, лучше id.
  5. react-addons-pref: плагин для количественной оценки эффекта оптимизации производительности.

Первый взгляд на исходный код React

Каталог проекта React состоит из следующих элементов:

дополнения:плагины методов инструментов: PureRenderMixin CSSTransitionGrouo Fragment LinkedStateMixin
изоморфные: содержит ряд изоморфных методов.
shared: общедоступные и общие методы.
test: методы тестирования.
ядро/тесты:тестовые примеры ошибок границ.
рендереры:основной код React, который содержит большую часть функциональной реализации и поэтому анализируется отдельно.

Пакет рендереров содержит следующее：

дом: содержит клиент, сервер и общий доступ.

client: содержит методы манипулирования DOM (findDOMNode, setInnerHTML, setTextContent и т. д.) и методы обработки событий. Методы событий здесь в основном являются неосновными служебными методами событий.
такими как ReactEventListener, общие методы событий (TapEventPlugin, EnterLeaveEventPlugin) и некоторые искусственные события (SyntheticEventsи т. д.).

сервер: в основном содержит реализации и методы рендеринга на стороне сервера (например, ReactServerRendering, ReactServerRenderingTransaction).

общие: содержит текстовый компонент (ReactDOMTextComponent), компонент тега (ReactDOMComponent),
операции со свойствами DOM (DOMProperty, DOMPropertyOperations), операции со свойствами CSS (CSSProperty, CSSPropertyOperations) и т. д.

общий: содержит событие и согласователь.

event: содержит некоторые более низкоуровневые методы событий, такие как EventPluginHub, EventPluginRegistry, EventPropagators и некоторые общие методы событий (EventPluginRegistry, EventPropagators и некоторые общие методы событий. React имеет настраиваемый система подключаемых модулей для универсальных событий, включающая прослушиватели событий, генераторы событий, концентратор подключаемых модулей событий, события кликов, события входа/выхода, простые события, составные события и ряд методов событий.

reconciler: называется координатором. Это основная часть, содержащая реализацию пользовательских компонентов в React (ReactCompositeComponent), механизм жизненного цикла компонентов, механизм setState (ReactUpdates, ReactUpdateQueue), модель DOM. алгоритм сравнения (ReactMultiChild) и другие важные методы функций.



Maxwell – Medium
Читайте статьи Максвелла на Medium. Фронтенд-энтузиаст, инженер-разработчик, желающий узнать больше о…medium.com



Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.