Jsliang Поиск работы - 38 - Сводка серии RACT

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
Три очка знаний
Четыре фронтенда исторической эволюции
Пять преимуществ React по сравнению с нативным
Сравнение шести React и Vue
6.1 Сходства
6.2 Различия
Семь реактивных волокон
Восьмой жизненный цикл React
До версии 8.1
После версии 8.2
8.2.1 Фаза монтирования
8.2.2 Фаза обновления
8.2.3 Этап удаления
Девять setState
9.1 Что происходит после вызова setState?
9.2 Является ли setState синхронным или асинхронным?
10 Ответьте на эти вопросы
Одиннадцать контролируемых и неконтролируемых компонентов
Двенадцать компонентов коммуникации
Тринадцать Редукс
Четырнадцать миксинов, HOC и хуков
14.1 Mixin
14.2 Компоненты высокого порядка (HOC)
14.3 Hook
15. Оптимизация производительности
16 ссылок
16.1 Точки знаний интервью
16.2 Система
16.3 Реакция против Vue
16.4 Жизненный цикл
16.5 Контролируемые и неконтролируемые компоненты
16.6 Diff и виртуальный DOM
16.7 Реагировать на исходный код
16.8 React Mixin
16.9 React Hoc
16.10 React Hooks
16.11 React Fiber
16.12 Рендеринг на стороне сервера (SSR)
16.13 Оптимизация производительности
16.14 Другое

2 Предисловие

React — популярный сегодня интерфейсный фреймворк, а также необходимый для многих крупных заводов.

Хотя React отличается от Vue, он также являетсяMV*Framework, хотя реализация может быть разной, но все же есть некоторые схожие концепции, такие как управление данными, компонентизация, виртуальный DOM и так далее.

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

Как работает Реакт? Каковы плюсы и минусы?

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

Три очка знаний

Четыре фронтенда исторической эволюции

эра jQuery

пройти черезAjaxПолучите данные из серверной части, затем сгенерируйте результат DOM через jQuery и обновите его на странице.

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

MVVM

В настоящее время с помощью MVVM двусторонняя привязка данных позволяет данным синхронизировать обновления DOM при их изменении и наоборот.

Этот параметр значительно снижает стоимость ручного обслуживания DOM, а MVVM — одна из функций React.Хотя React относится к одному потоку данных, нам нужно вручную реализовать двустороннюю привязку данных.

виртуальный DOM

Одного связывания недостаточно для решения проблемы частых манипуляций с DOM.

Поэтому React реализует набор обновлений виртуального DOM внутри: он кэширует реальный DOM в JS.Каждый раз, когда происходит обновление данных, внутренний проходDiffАлгоритм сравнивает, а затем собирает кучу обновлений перед обновлением DOM, что значительно сокращает количество операций с DOM.

Дифференциальная операция

Так,DiffКак это работает?

DiffПолучите сравнение 4 случаев изменения узла виртуального DOM: тип узла изменился, тип узла тот же, изменился только атрибут или значение атрибута, изменился текст, а также были добавлены, удалены или перемещены дочерние узлы.

setState

Реагировать отличается от Vue и может бытьv-modelВвиду того, что операция пользователя и данные, хранящиеся в JavaScript, обновляются синхронно, необходимо пройтиsetStateдля обновления содержимого компонента.

Redux

Однако, если вы хотите визуализировать свои одноуровневые компоненты через компонент, React не так хорош в этом в начале, поэтому вам нужно ввести центр управления состоянием, чтобы помочь нам управлять состоянием (state), так что естьRedux.

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

Mobx

ReduxЕсть проблема, то есть модифицировать определенныйstate, надо пройтиaction.js,types.js,reducers.jsЭта серия файлов, как этоReduxХотя поток данных очень формальный, его сложно написать.

Поэтому у сообщества есть другой набор решений, которыйMobx.

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

ноMobxЕсть и недостатки, то есть поток данных слишком случайный, и найти ошибки сложно.

End

Поэтому сообщество рекомендует MobX для небольших проектов, а Redux — для крупных.

Пять преимуществ React по сравнению с нативным

составной: среди них компонентизация React является наиболее тщательной, и она может достигать даже атомарных компонентов на функциональном уровне.Высокая степень компонентизации может сделать наш проект простым в обслуживании и простым в объединении и расширении.
естественная многослойность: код в эпоху JQuery в основном представляет собой спагетти-код с серьезными связями.Современные фреймворки, будь то режим MVC, MVP или MVVM, могут помочь нам в многослойности, а развязку кода легче читать и писать.
экология: Теперь основной внешний интерфейс поставляется с экологией, будь то архитектура управления потоками данных или зрелое решение.
Эффективность разработки: современные интерфейсные фреймворки автоматически обновляют DOM по умолчанию вместо нашей ручной операции, что освобождает разработчика от ручных затрат на DOM, повышает эффективность разработки и принципиально решает проблему синхронизации пользовательского интерфейса и состояния.

Сравнение шести React и Vue

6.1 Сходства

виртуальный DOM. Сопоставьте реальный DOM и лучше отслеживайте отображаемую страницу, сравнивая новые и старые различия DOM.
составной. Разделите приложение на модули с четкими функциями, и каждый модуль сможет соответствующим образом взаимодействовать друг с другом.
инструменты для сборки. имеют свои собственные инструменты сборки, черезWebpack + Babelпостроить подмости.
Инструменты разработчика Chrome. У обоих есть хорошие расширения Chrome, помогающие находить ошибки.
Соответствующая рамка. Vue имеетVue-routerа такжеVuex, в то время как у React естьReact-routerа такжеReact-Redux.

6.2 Различия

Шаблоны против JSX. Vue рекомендует писать приблизительные соглашенияHTMLШаблон визуализируется, и React рекомендует способ написания JSX.
Следите за разницей изменений данных. Vue использует изменяемые данные, в то время как React уделяет больше внимания неизменности данных. Пройти в Vuev-modelДанные привязки, после того как пользователь изменит входное значение, соответствующее значение также изменится соответствующим образом. И React должен пройтиsetStateВнесите изменения в настройки.
Диф отличается. Vue использует двусвязный список для обновления DOM при сравнении, в то время как React используетDiffОчередь содержит DOM, который необходимо обновить, получитьpatchдерево, а затем обновлять DOM в пакетном режиме.
Команда разработчиков. Vue начал с Эвана Ю в качестве ядра, а затем нанял других людей, чтобы сформировать команду; React был запущен командой Facebook. Поэтому, если люди в Интернете сравнивают исходный код, Vue проще и понятнее, чем React.

Семь реактивных волокон

Основной процесс React можно разделить на две части:

reconciliation(Алгоритм планирования, также известный какrender):
- возобновитьstateа такжеprops
- Вызов хуков жизненного цикла
- Генерировать виртуальный DOM
- Через старые и новые VDOMdiffАлгоритм получения VDOMchange
- Определите, требуется ли повторный рендеринг
commit
- При необходимости манипулируйте обновлениями узлов DOM;

зачем нужноFiber?

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

И ключевой момент в том, чтосинхронная блокировка.

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

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

а такжеReact FiberОн был рожден для достижения разделения задач.

React FiberКраткое описание:

Алгоритм планирования был переработан в версии React 16, заменив предыдущийstack reconcilerвосстановленныйfiber reconciler, становится связанным списком и указателемАлгоритм обхода дерева односвязных списков. Благодаря отображению указателя каждый блок записывает текущий предыдущий шаг и следующий шаг обхода, так что обход можно приостановить и возобновить.
Его можно понимать как алгоритм планирования разделения задач, который в основном делит исходные синхронные задачи рендеринга обновлений на независимые.небольшой оперативный блок, в соответствии с разными приоритетами, небольшие задачи распределяются на время простоя браузера для выполнения, полностью используя механизм цикла событий основного процесса.

React Fiberосновной:

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

Восьмой жизненный цикл React

Постепенно устаревающие методы жизненного цикла React:

componentWillMount
componentWillReceiveProps
componentWillUpdate

До версии 8.1

После версии 8.2

8.2.1 Фаза монтирования

constructor: конструктор, выполняется первым, обычно инициализируется в конструктореstateобъект или привязка к пользовательскому методуthis
getDerivedStateFromProps:static getDerivedStateFromProps(nextProps, prevState), это статический метод, когда мы получаем новые свойства и хотим изменить нашиstate,можно использоватьgetDerivedStateFromProps.
render:renderФункция является чистой функцией, она возвращает только то, что нужно отрисовать, и не должна содержать другой бизнес-логики, может возвращать нативные компоненты DOM, React,Fragment,Portals, строки, числа и т. д.
componentDidMount: вызывается после загрузки компонента, в это время мы можем получить узел DOM и управлять им, напримерCanvas,SVGи так далее. Запросы сервера и подписки могут быть записаны в нем, но не забудьтеcomponentWillUnmountОтписаться в .

Запрос интерфейса React помещается вcomponentDidMountВнутри больше подходит, старая версия ставиласьcomponentWillMountвнутри, что приводит к многочисленным запросам, теперьcomponentWillMountОн устарел, поэтому переключитесь наcomponentDidMountЭто очень научно.

Существуют следующие проблемы:

ЗачемgetDerivedStateFromPropsэто статично?

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

какие жизненные циклы могутsetState?

допустимыйcomponentDidMountа такжеcomponentDidUpdateНа данный момент DOM стабилизировался, и можно выполнять манипуляции с данными.

8.2.2 Этап обновления

getDerivedStateFromProps: этот метод также вызывается на этапе обновления.
shouldComponentUpdate:shouldComponentUpdate(nextProps, nextState), есть два параметра, указывающие на новый атрибут и измененныйstate, который возвращает логическое значение. еслиtrueУказывает, что будет запущен повторный рендеринг,falseУказывает, что повторный рендеринг не будет запущен, и возвращается по умолчанию.true. Вы можете использовать этот жизненный цикл для оптимизации производительности программы React.
render: то же, что и этап монтированияrender.
getSnapshotBeforeUpdate:getSnapshotBeforeUpdate(prevProps, prevState), этот метод будетrenderПозже,componentDidUpdateВызванный ранее, есть два параметра, указывающих предыдущий атрибут и предыдущийstate. Эта функция имеет возвращаемое значение, которое передается в качестве третьего параметра вcomponentDidUpdate, если вам не нужно возвращаемое значение, вы можете вернутьnull, этот метод должен иcomponentDidUpdateС использованием.
componentDidUpdate:componentDidUpdate(prevProps, prevState, snapshot),существуетgetSnapshotBeforeUpdate

После вызова есть три параметра, указывающие на предыдущийprops,предыдущийstate,так же какsnapshot. параметрsnapshotдаgetSnapshotBeforeUpdateВозвращается, если вам нужно использовать его при запуске некоторых функций обратного вызоваDOMсостояние элемента, процесс сравнения или расчета переносится вgetSnapshotBeforeUpdate, затем вcomponentDidUpdateВ унифицированном обратном вызове триггера или обновлении состояния.

8.2.3 Этап удаления

componentWillUnmount: он будет вызываться при выгрузке или уничтожении компонента, для очистки таймера здесь или отмены сетевого запроса, для очистки недопустимых элементов DOM и другой работы по сборке мусора.

Девять setState

setStateМетод, используемый в React для изменения состояния и обновления представления.

9.1 Что происходит после вызова setState?

звонить по кодуsetStateПосле этого React объединит входящий объект параметра с текущим состоянием компонента, запустив так называемый процесс согласования (Reconciliation).

После корректировки реагируйте реагируйте дерево элемента реагирования относительно эффективным образом и выполняют весь интерфейс интерфейса пользовательского интерфейса относительно эффективным образом и отображают весь интерфейс интерфейса UI.

Реагирование, полученное после дерева элемента, React автоматически вычисляет разницу между новыми узлами деревьев и деревьев, а затем повторно отображается для минимизации интерфейса в зависимости от разницы.

в алгоритме вычисления разницы (Diff), React может относительно точно знать, что изменилось и как это должно было измениться, обеспечивая обновления по запросу, а не полный повторный рендеринг.

Проще говоря:

Объедините объекты параметров, чтобы запустить процесс согласования
Вычислите разницу между новым деревом и старым деревом (Diff)
Минимизируйте повторный рендеринг на основе различий

9.2 Является ли setState синхронным или асинхронным?

Ответ: Иногда синхронно, иногда асинхронно.

setStateАсинхронность в синтетических событиях и хуках, в нативных событиях иsetTimeoutявляются синхронными.
setStateАсинхронность не означает, что внутренняя реализация реализована асинхронным кодом, процесс и код собственного исполнения синхронны, но последовательность вызова синтетических событий и функций-ловушек предшествует обновлению, так что синтетические события и функции-ловушки не могут обновляться сразу после значения, таким образом образуя так называемый асинхронный.
setStateВы можете передать второй параметрsetState(partialState, callback), получите обновленный результат в методе обратного вызова.

10 Ответьте на эти вопросы

Есть несколько способов исправить в Reactthis, вот 4 метода:

import React, { Component } from 'react'

class App extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick () {
    console.log('jsliang 2020');
  }
  handleClick2 = () => {
    console.log('jsliang 2021');
  }
  render () {
    // 四种绑定方法
    return (
      <div className='App'>
        {/* 方法一：通过 constructor 中进行 bind 绑定 */}
        <button onClick={this.handleClick}>btn 1</button>

        {/* 方法二：在里边绑定 this */}
        <button onClick={this.handleClick.bind(this)}>btn 2</button>

        {/* 方法三：通过箭头函数返回事件 */}
        <button onClick={() => this.handleClick()}>btn 3</button>
        
        {/* 方法四：让方法变成箭头函数 */}
        <button onClick={this.handleClick2}>btn 4</button>
        
        {/* 额外：直接调用不需要绑定 this */}
        {this.handleClick()}
      </div>
    )
  }
}

export default App;

Затем используйтеbindФункция и стрелка Есть ли разница?

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

пройти черезbindэквивалентно:Foo.prototype.a = function() {}, является корректирующей привязкой через цепочку прототипов.

А по стрелочной функции это эквивалентно:

class Foo {
  constructor() {
    this.a = () => {};
  }
}

Одиннадцать контролируемых и неконтролируемых компонентов

существуетAnt Designв, даInputПоле ввода для работы, если оно измененоdefaultValueсочтет это бесполезным.

Это из-за реагированияformСборка формыdefaultValueПосле передачи значения последующие измененияdefaultValueне работает и игнорируется.

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

Таким образом, контролируемый компонент — это компонент, которым можно управлять с помощью состояния React. Двусторонняя привязка данных является контролируемым компонентом, вы можетеformдобавить в поле вводаvalueсвойства, а затем контролировать его изменение. Неконтролируемые компоненты не добавляютсяvalueКомпонент свойства, вы не можете оперировать его фиксированным значением.

Двенадцать компонентов коммуникации

Родительский компонент взаимодействует с дочерним компонентом: переход от родительского компонента к дочернему компонентуpropsспособ связи с дочерними компонентами.
Дочерний компонент взаимодействует с родительским компонентом: Родительский компонент находится вpropsЗатем дочерний компонент вызывает этот метод, чтобы передать информацию, которую ему нужно передать, в область действия родительского компонента.
сложная коммуникация: с помощью ReactContext,илиReduxпередача данных.

Тринадцать Редукс

Есть много онлайнRedux,React-Redux,Redux-SagaИспользованиеjsliangОдин на работе, чтобы использовать его.

- 某个页面文件夹
   - View.jsx     当前页面主入口
   - Child.jsx    子组件
   - Brother.jsx  兄弟组件
   - action.js    动作
   - types.js     类型
   - saga.js      调用接口
   - reducers.js  处理数据

Обычный рабочий каталог показан выше, как мы используем его в нашей работе?

первый,существуетView.jsxпрошедшийReact-ReduxсоединятьReactа такжеRedux

потом, предполагая сейчасChild.jsxНужно вызвать интерфейс (асинхронная обработка), тогда:

существуетaction.jsОпределите этот метод и какие параметры будут переданы.
вtypes.jsявляется вспомогательнымaction.jsСодержимое , чтобы предотвратить повторение тела метода, мы будемtypes.jsверхний регистр определен вactionимя.
В это время вы можетеView.jsxпрошедшийdispatchтриггерный метод, т.е.dispatch(getPage(page, perPage)).
В это время вreducers.jsнейтрализоватьsage.jsЭтот метод можно контролировать вsage.jsвызвать интерфейс и обработать данные.
После обработки,sage.jsперешел кreducers.js, пусть обрабатывает данные.

тогда,еслиBrother.jsxпросто хотите обработать данные иChild.jsxиспользуется в, тогда наш метод обработки такой же, как указано выше, но непосредственно вreducers.jsпроцесс, вместоsage.jsЭто просто вызов интерфейса.

наконец, Давайте посмотримreduxа такжеreact-reduxtВпечатлен рабочим процессом:

Четырнадцать миксинов, HOC и хуков

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

Mixin,HOCа такжеHookИспользуются 3 типа ReactМультиплексирование логики состоянийТехнология,Mixinбыл заброшен,HOCВ расцвете сил,HookОчень важно освоить его повторяющиеся факторы и законы, когда он только зарождается.

14.1 Mixin

Mixin(Смешивание) — это способ расширить функцию сбора, которая по существу копирует свойства одного объекта в другой объект.

Однако вы можете скопировать любой метод любого количества объектов в новый объект, что невозможно при наследовании.

В основном это решает проблему повторного использования кода.

Тем не менее, это сопряжено с некоторыми вредами:

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

14.2 Компоненты высшего порядка (HOC)

на основеMixin, React представил реализацию шаблона декоратора: компоненты высшего порядка (HOC).

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

function visible(WrappedComponent) {
  return class extends Component {
    render() {
      const { visible, ...props } = this.props;
      if (visible === false) return null;
      return <WrappedComponent {...props} />;
    }
  }
}

Компоненты высокого уровня могут применяться для управления журналами, доступного контроля разрешений, двусторонней привязки, проверки форм и т. д.

Компоненты более высокого порядка решаютMixinПроблема принесла:

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

Однако там, где есть свет, всегда есть тьма, а компоненты более высокого порядка тоже имеют некоторые недостатки:

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

14.3 Hook

Hookэто реакцияv16.7.0-alphaДобавлены новые функции в . это позволяет вамclassиспользовать кромеstateи другие функции React.

использоватьHook, вы можете включитьstateЛогика абстрагируется от компонента, что упрощает тестирование.

в то же время,HookМожет помочь вам повторно использовать эту логику, не переписывая структуру компонента.

Следовательно, его также можно использовать в качестве решения для реализации повторного использования логики состояния.

HookПреимущества использования:

Уменьшите риск повторного использования логики состояния:Hookа такжеMixinЕсть определенные сходства в использовании, ноMixinВведенные логика и состояние могут перекрывать друг друга, и несколькоHookОни не влияют друг на друга, что избавляет нас от необходимости сосредотачиваться на предотвращении конфликтов, избегающих логического повторного использования.
Избегайте гнездования в аду: интенсивное использованиеHOCВ случае очень глубокой вложенности кода используйтеHook, мы можем добиться повторного использования логики плоского состояния и избежать большого количества вложенных компонентов.
Сделайте компоненты более понятными:В использованииclassКогда компоненты строят нашу программу, каждый из них имеет свое собственное состояние.Сложность бизнес-логики делает эти компоненты все больше и больше, и в каждом жизненном цикле будет вызываться все больше и больше логики, что усложняет ее обслуживание. использоватьHook, что позволяет в большей степени изолировать общую логику и разделить компонент на более мелкие функции, а не принудительное разделение на основе методов жизненного цикла.
Используйте функции вместо классов: по сравнению с функцией напишитеclassВозможно, вам потребуется освоить больше знаний, и тем больше моментов, на которые вам нужно обратить внимание, таких какthisУказывать, связывать события и т. д. Кроме того, компьютер понимает функцию лучше, чемclassБыстрее.Hooksтак что вы можетеclassИспользуйте больше новых функций React.

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

Оптимизация рендеринга первого экрана.<div id="root"> SVG </div>, вы также можете использовать плагинprerender-spa-pluginПлагин выполняет рендеринг первого экрана.
Оптимизация переключения страниц. использоватьhtml-webpack-pluginПлагины автоматически вставляютсяloading, чтобы при переключении не нужно было писать наборloading.
Уменьшить размер бизнес-кода. пройти черезTree Shakingчтобы уменьшить часть кода.
Извлечь общедоступный код. пройти черезSplitChunkPluginАвтоматически разделяйте базовую бизнес-библиотеку, чтобы уменьшить количество больших файлов.
сплит-код. пройти черезCode SplittingДля ленивой загрузки кода улучшите процесс загрузки пользователем. Например,React Loadableпереписать компонент для поддержки динамическогоimportформа.
ленивая загрузка. Реакция может пройтиreact-lazyloadЭтот зрелый компонент поддерживает отложенную загрузку.
заполнитель страницы. Иногда при загрузке текста и изображений страницы возникает ситуация «заставки». Например, изображение или текст загружены не полностью, а соответствующая позиция пуста. После загрузки страница внезапно открывается, в результате в заставке. Используйте сторонние компонентыreact-placeholderЭту ситуацию можно решить.

16 ссылок

В этой серии 67 наименований.

16.1 Точки знаний интервью

2019:

17 часто задаваемых вопросов интервью React и подробные объяснения в 2019 году[Рекомендация по прочтению: 1 час]

2018:

Резюме вопросов интервью о React【Рекомендация по прочтению: 5 минут】
Краткое изложение общих вопросов для интервью (подходит для промежуточного интерфейса)【Рекомендация по прочтению: 20 минут】

2017:

Реагировать на общие вопросы интервью и анализ【Рекомендация по прочтению: 5 минут】

16.2 Система

Демистификация технологии React[Рекомендация по прочтению: нет]
(Часть 2) Коды интервью для производителей интерфейсов среднего и продвинутого уровня【Рекомендация по прочтению: 30 минут】

2017:

Учебник по созданию фреймворка семейства React с нуля[Рекомендация по прочтению: нет]

16.3 Реакция против Vue

2020:

Разница между Vue и React, какой из них вы используете?【Рекомендация по прочтению: 10 минут】
20 различий между React и Vue, о которых вы не знаете [основное интервью]

2017:

Отличия и преимущества фреймворков Vue и React【Рекомендация по прочтению: 10 минут】

16.4 Жизненный цикл

до настоящего времени:

Просмотр жизненного цикла React【Рекомендация по прочтению: 10 минут】

2019:

Реагировать на изменения жизненного цикла【Рекомендация по прочтению: 5 минут】
Жизненный цикл реакции【Рекомендация по прочтению: 5 минут】

2018:

Анализ и план обновления новых функций жизненного цикла версии React v16.3【Рекомендация по прочтению: 20 минут】

2017:

Подробный жизненный цикл React (часть 1): этап рождения (монтирование)[Рекомендация по прочтению: нет]
Подробный жизненный цикл React (ниже): обновление (обновление)[Рекомендация по прочтению: нет]

16.5 Контролируемые и неконтролируемые компоненты

2019:

Контролируемые и неконтролируемые компоненты React

2016:

Говоря о компонентах, контролируемых реакцией, и неконтролируемых компонентах

16.6 Diff и виртуальный DOM

2019:

Не позволяйте виртуальному DOM и DOM-diff становиться для вас камнем преткновения【Рекомендация по прочтению: 20 минут】

2018:

Подробная серия о происхождении фреймворка — Virtual Dom【Рекомендация по прочтению: 30 минут】
Простая и простая схема Дом Дифф【Рекомендация по прочтению: 30 минут】
Исследуйте прошлое и настоящее Virtual DOM【Рекомендация по прочтению: 30 минут】
Серия Virtual DOM, которую вы не знаете【Рекомендация по прочтению: 20 минут】

2017:

Серия анализа исходного кода React - невероятная реакция diff【Рекомендация по прочтению: 30 минут】
Вы действительно понимаете React (Часть 1) Как проектировать компоненты и важные жизненные циклы[Рекомендация по прочтению: нет]

2015:

Глубокий анализ: как реализовать алгоритм виртуального DOM[Рекомендация по прочтению: нет]

16.7 Реагировать на исходный код

2018:

Как выучить Реакт? Конечно, это реализовать React самостоятельно.[Рекомендация по прочтению: нет]
Серия "Анализ исходного кода React" завершена![Рекомендация по прочтению: нет]
Интенсивное чтение «Использование 160 строк кода js для реализации React»[Рекомендация по прочтению: нет]

2017:

Реагировать на анализ исходного кода[Рекомендация по прочтению: нет]
Анализ исходного кода React (3): подробная транзакция и очередь обновлений[Рекомендация по прочтению: нет]
Анализ исходного кода React-Redux[Рекомендация по прочтению: нет]
Исходный код для просмотра выступления React setState (1)[Рекомендация по прочтению: нет]
Исходный код для просмотра выступления React setState (2)[Рекомендация по прочтению: нет]
Принцип реализации идеи Mobx и сравнение с Redux[Рекомендация по прочтению: нет]

2015:

Серия React Source Code Analysis — Искусство управления жизненным циклом[Рекомендация по прочтению: нет]
Серия анализа исходного кода React - Play React Transition[Рекомендация по прочтению: нет]

16.8 React Mixin

2015:

Прошлое и настоящее React Mixin[Рекомендация по прочтению: нет]

16.9 React Hoc

2019:

Компоненты высшего порядка в React и сценарии их применения【Рекомендация по прочтению: 40 минут】

2017:

Руководство для начинающих по React Higher Order Components (HOC)【Рекомендация по прочтению: 10 минут】
Глубокое понимание компонентов высшего порядка React【Рекомендация по прочтению: 10 минут】

16.10 React Hooks

2019:

[Углубленное реагирование] От Mixin до HOC и Hook【Рекомендация по прочтению: 30 минут】
Полное руководство по использованию эффектов[Рекомендация по прочтению: нет]
Принцип React Hooks【Рекомендация по прочтению: 30 минут】
Подробные хуки React [почти 1W слов] + бой проекта[Рекомендация по прочтению: 3 часа]

2018:

30 минут, чтобы освоить самую горячую новую функцию года React — React Hooks【Рекомендация по прочтению: 30 минут】

16.11 React Fiber

2018:

Полностью понять React Fiber【Рекомендация по прочтению: 20 минут】
Архитектура React Fibre【Рекомендация по прочтению: 20 минут】
Резюме введения в архитектуру React Fiber【Рекомендация по прочтению: 20 минут】

16.12 Рендеринг на стороне сервера (SSR)

С нуля полностью понять принцип рендеринга на стороне сервера (длинный текст из 8000 слов)[Рекомендация по прочтению: 2 часа]

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

2019:

Лучшие практики реагирования【Рекомендация по прочтению: 20 минут】

2018:

Руководство по оптимизации производительности загрузки React 16【Рекомендация по прочтению: 20 минут】
Практика оптимизации для средних проектов в React【Рекомендация по прочтению: 10 минут】

2017:

Как улучшить производительность вашего приложения React【Рекомендация по прочтению: 10 минут】
Оптимизируйте приложение React до 60 кадров в секунду【Рекомендация по прочтению: 5 минут】

16.14 Другое

2019:

styled-components: новая идея разделения внешних компонентов【Рекомендация по прочтению: 5 минут】

2018:

Практика проектирования библиотеки компонентов - проектирование сложных компонентов[Рекомендация по прочтению: нет]
Проверка данных переднего плана начинается с моделирования【Рекомендация по прочтению: 20 минут】
Путь дизайна приложений React — волшебное использование каррирования【Рекомендация по прочтению: 20 минут】
Как оценить новые функции React Time Slice и Suspense?【Рекомендация по прочтению: 20 минут】
Как написать лучший код React?【Рекомендация по прочтению: 20 минут】
Прошлое и настоящее React исх.【Рекомендация по прочтению: 20 минут】
Вы действительно понимаете setState?【Рекомендация по прочтению: 10 минут】
Освоение функциональных компонентов React с помощью библиотеки Recompose【Рекомендация по прочтению: 10 минут】
Все еще используете Redux, хотите попробовать GraphQL и Apollo?【Рекомендация по прочтению: 5 минут】

2017:

Вы действительно понимаете React? (Средний) Связь между компонентами и оптимизация React【Рекомендация по прочтению: 10 минут】

2015:

Серия анализа исходного кода React — расшифровка setState[Рекомендация по прочтению: нет]