Каталог статей

• 1. Реагировать
  • 1. Реагировать на функцию жизненного цикла
  • 2. Компонент класса React (Class компонент) и функциональный компонент (Функциональный В чем разница между компонентами
  • 3. В чем разница между состоянием React и реквизитами?
  • 4. Что такое компоненты высокого порядка?
  • 5. Почему предложение передается setState Параметр представляет собой callback а не объект
  • 6、(существовать Конструкторсередина)настраиватьиспользовать super(props) Какова цель
  • 7. Обработка событий React
  • 8. Как создавать ссылки в React
  • 9. Что такое JSX
  • 10. Почему бы не обновить состояние напрямую?
  • 11. Что делают эти три пункта React (...)?
  • 12. Кратко познакомьтесь с реакцией hooks Предыстория и Преимущества крючков
  • 13. Как смоделировать жизненный цикл хуков React
  • 14、React в `useState()` Что это такое?
  • 15. Как работает рендеринг React при вызове setState?
  • 16、React середина key изважность Что это такое?
  • 17. Что такое Редукс?
  • 18. Перечислите компоненты Redux
  • 19. Каковы преимущества Redux?
  • 20. Часто используемые крючки
  • 21. Почему браузер не читает JSX?
  • 22. Что такое компоненты высшего порядка (HOC)?
  • 23. Как использовать строгий режим React и для чего он нужен?
  • 24. Что такое контролируемые и неконтролируемые компоненты в React?
  • 25、ReactIvue.jsiz Что это?
  • 26. Каковы различные этапы жизненного цикла компонента React?
  • 27. Подробно объясните методы жизненного цикла компонентов React.
  • 28. Что такое синтетическое событие React?
  • 29. Каковы преимущества использования стрелочных функций?
  • 30. Почему предложения передаются setState Параметр представляет собой callback а не объект
  • 31、 (существовать Конструкторсередина)настраиватьиспользовать **super(props)** Какова цель
  • 32. Как работает React
  • 33、Кромесуществовать Конструкторсерединаобязательность this , есть ли другие способы?
  • 34、 зачем Children
  • 35、 Что такое прокси атрибута?

1. Реагировать

1. Реагировать на функцию жизненного цикла

• Фаза инициализации:
  • getDefaultProps: получить свойства экземпляра по умолчанию.
  • getInitialState: получить состояние инициализации каждого экземпляра.
  • компонентWillMount: компонент скоро будет загружен и отображен на странице.
  • render:компонентысуществоватьсоздано здесьвиртуальныйиз DOM узел
  • компонентDidMount: после фактической загрузки компонента.
• Статус работающего середина:
  • компонентWillReceiveProps: вызывается, когда компонент собирается получить свойства.
  • mustComponentUpdate: когда компонент получает новые свойства или новый статус (может возвращать false, не обновлять после получения данных, блокировать render настраиватьиспользовать,позжеиз Функция больше не будет выполняться）
  • компонент Виллупдате: компонент скоро будет обновлен, свойства и статус изменить невозможно.
  • рендеринг: повторный рендеринг компонента
  • компонент Дид Упдате: компонент обновлен.
• Фаза разрушения:
  • компонент Виллунмаунт: компонент скоро будет уничтожен.

2. Компонент класса React (Class компонент) и функциональный компонент (Функциональный В чем разница между компонентами

• Компоненты класса не только позволяют использовать дополнительные функции, такие как собственное состояние компонента и перехватчики жизненного цикла, но также позволяют использовать компонент напрямую. store и поддерживать статус
• Когда компонент получает только props, а при рендеринге самого компонента на страницу он представляет собой «Компоненты без состояния» можно создать с помощью такой чистой функции. Такие компоненты также называются тупыми компонентами или презентационными компонентами.

3. В чем разница между состоянием React и реквизитами?

• State Является структурой данных, используйте необходимые данные при монтировании компонента по умолчанию. Ценить.Состояние Мутация может происходить с течением времени, но чаще всего в результате поведения пользовательских событий.
• Реквизит — это конфигурация компонентов. реквизит Давать дочерние компоненты передаются родительским компонентом, а в случае дочерних компонентов — реквизитами. является неизменным. Компоненты не могут изменять свои собственные реквизит, но вы можете поставить props В совокупности существуют (единое управление). Реквизит Это не просто данные — также можно передавать функции обратного вызова. props передача.

4. Что такое компоненты высокого порядка?

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

5. Почему предложение передается setState Параметр представляет собой callback а не объект

Поскольку обновления this.props и this.state могут быть асинхронными, на их значения нельзя полагаться при вычислении следующего состояния.

6、(существовать Конструкторсередина)настраиватьиспользовать super(props) Какова цель

существовать super() Подклассы нельзя использовать до тех пор, пока они не будут вызваны. this из,существовать ES2015 середина,Подклассы должнысуществовать constructor серединанастраиватьиспользовать супер(). передача props Давать super() из Причина – дефекация(существовать Подкласссерединаспособныйсуществовать constructor доступ this.props。

7. Обработка событий React

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

8. Как создавать ссылки в React

Refs это использовать React.createRef() метод создан и передан ref свойства добавлены в React на элементе

9. Что такое JSX

JSX — это JavaScript XML. Существует компонент React, построенный внутри тегов, подобный синтаксису XML. JSX разрабатывает набор синтаксических сахаров для act.js, а также является основой для использования act.js. Существование React может работать без использования использования JSXиз. Однако использование использованияJSX может улучшить читаемость компонента, поэтому рекомендуется использовать использованиеJSX.

10. Почему бы не обновить состояние напрямую?

Если вы обновите состояние напрямую, то компонент не будет перерисовываться, и это использовать setState() метод. Он планирует обновления объектов состояния компонентов. При изменении состояния компонент реагирует повторным рендерингом.

11. Что делают эти три пункта (…) React?

Расширенная нотация передачи по значению расширяет каждый элемент в объекте или массиве. Это синтаксис ES6.

12. Кратко познакомьтесь с реакцией hooks Предыстория и Преимущества крючков

Хуки генерируются для следующих проблем при использовании реакции:

Трудно воспроизвести логику состояния между компонентами.,существоватьhooksДо,Реализация репликации компонентов,Обычно используйте высококачественные компоненты и Render Props.,Их суть заключается в продвижении сложной логики в родительский компонент середина.,Легко создавать множество компонентов упаковки.,Добавляет вложенные регионы.

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

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

В ответ на упомянутые выше проблемы команда реагирования разработала хуки, которые в основном служат двум целям:

use представляет методы управления состоянием и жизненным циклом в существующем функциональном компоненте середина.

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

Плюсы также очевидны:

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

Hooks После его появления мы извлекаем сложную логику на верхний уровень компонента вместо того, чтобы принудительно продвигать ее в родительский компонент середина. Таким образом вы сможете избежать HOC и Render Props «Вложенные регионы», возникшие в результате

Избегайте проблем, вызванных указанным выше компонентом класса.

13. Как смоделировать жизненный цикл хуков React

1. Имитировать компонентDidMount

useEffect(()=>{console.log(‘第一次渲染часнастраиватьиспользовать’)},[])

2. Имитация компонентаDidUpdate

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

useEffect(()=>{console.log(‘Любой атрибут должен быть изменен’)})

Чтобы отслеживать изменения в нескольких свойствах одновременно, вам необходимо передать свойства в виде массива во второй параметр.

useEffect(()=>{console.log(‘nизмененный’)},[n,m])

3. Имитировать компонентWillUnmount

useEffect(()=>{
	const timer = setTimeout(()=>{
    	...
    },1000)
	return()=>{
    	console.log('Компонент уничтожен')
    	clearTimerout(timer)
    }
})

14、React в useState() Что это такое?

useState — это реакция hooksсерединачаще всегоиспользоватьииспользовать Самый простой методизодинhook。useState(0) 返回один元组,Чтосередина第один参数countэто счетчикиз Текущий статус,setCounter Предоставляет метод обновления состояния счетчика.

15. Как работает рендеринг React при вызове setState?

виртуальный DOM Рендеринг: при вызове метода рендеринга он возвращает новый виртуальный компонент. DOM структура. Когда вызывается setState(), рендеринг будет вызван снова, потому что метод mustComponentUpdate всегда возвращает true по умолчанию, поэтому по умолчанию React Никакой оптимизации нет. Родной DOM Рендеринг:Реагировать ТолькосуществоватьвиртуальныйDOMсередина Изменить истинуDOMузел,И количество модификаций очень маленькое — это отличная особенность React.,Он оптимизирует реальные изменения DOM.,Сделайте React быстрее.

16、React середина key изважность Что это такое?

key используется для идентификации уникальных Virtual DOM Элементы и их драйверы UI соответствующие данные. они переработаны DOM середина все текущие из элементов в помощь React Оптимизированный рендеринг. Эти key Должно быть уникальное число или строка, React Просто измените порядок элементов вместо их повторного рендеринга. Это может улучшить производительность вашего приложения.

17. Что такое Редукс?

Redux Сегодня это одна из самых популярных библиотек для фронтенд-разработки. это JavaScript Контейнер прогнозируемого состояния программы, используемый для управления состоянием всего приложения. использовать Redux развиватьизотвечатьиспользовать Легко проверить,Может работать в разных средах,и демонстрировать последовательное поведение

18. Перечислите компоненты Redux

1. Action – Это использование для описания того, что произошло с объектом.
2. Reducer – Это место, где можно определить, как изменится государство.
3. Store – Вся программа из дерева состояний/объектов сохраняется существующегоStoreсередина.
4. View – Показать только Store Предоставленные данные

19. Каковы преимущества Redux?

Преимущества Redux заключаются в следующем:

предсказуемость результата - Поскольку источник истины всегда один, т.е. store , поэтому не возникает вопроса о том, как синхронизировать текущее состояние с другими частями действия. Ремонтопригодность - Код становится проще поддерживать, он имеет предсказуемые результаты и строгую структуру. Серверный рендеринг - Вам просто нужно создать store Просто передайте его клиенту. Это полезно для первоначального рендеринга и может оптимизировать производительность приложения, обеспечивая лучшее взаимодействие с пользователем. Инструменты разработчика - От действий до изменения статуса — разработчики могут отслеживать все происходящее в режиме реального времени. Сообщество и экосистема - Redux За ним стоит огромное сообщество, что делает его еще более очаровательным. Большое сообщество талантливых людей способствует улучшению библиотеки и разработке различных приложений. Легко проверить - Redux Код в основном небольшой, чистый и независимый от функциональности. Это делает код тестируемым и автономным. организовать - Redux Объясняется, как именно организовать код, что делает существование команды кода более последовательным и простым при использовании.

20. Часто используемые крючки

useState: определяет данные состояния, параметр — это инициализированные данные, а возвращаемое значение имеет два значения: 1. Значение инициализации, 2. Метод модификации.

useEffect: функция побочных эффектов. Как следует из названия, побочные эффекты будут иметь побочные эффекты только после использования.

Используется в качестве жизненного цикла: если второй параметр не записан, он сработает, как только страница обновится, компонентDidMount compoentDidUpdate

Если второй параметр представляет собой пустой массив, он будет выполнен только один раз — компонентDidMount.

Массив середина и некоторые переменные,Использовать в качестве слушателя,Отслеживать изменения данных,

useEffect — это функция побочного эффекта, которая запускается после завершения обновления компонента.

если мысуществоватьuseEffect Возвращает функцию, вызываемую при уничтожении компонента

useMemo: используется для расчета данных, возврата результата и отслеживания изменений данных. Второй параметр — это отслеживаемые данные, которые можно кэшировать.

useMemoиuseEffect Для сравнения используйтеMemo Жизненный цикл запускается при обновлении компонента.

Как useMemo оптимизирует производительность?

Когда родительский компонент взаимодействует с дочерним компонентом,,Данные родительского компонента середина изменились,Обновление родительского компонента приводит к обновлению и рендерингу дочернего компонента.,Но если изменение данных не имеет ничего общего с подкомпонентом, то,Обновление подкомпонента приводит к ненужному рендерингу DOM подкомпонента.,Это сравнительная производительность,На данный момент мы можем использовать Memo или memo для кэширования компонентов.,Уменьшите ненужный рендеринг DOM дочерних компонентов.

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

useRef: эквивалент использования createRef, создание информации об атрибутах компонента.

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

useReducer: useReducer используется для недостатков useState. Данными можно управлять централизованно, а данные и логическую информацию можно обрабатывать отдельно.

21. Почему браузер не читает JSX?

Браузеры могут читать только объекты JavaScript.,И не может читать обычные объекты JavaScript в JSX. поэтому,Чтобы браузер мог читать JSX,первый,Нам нужно использовать конвертер изJSX, например Babel, для преобразования файлов JSX в объекты JavaScript.,Затем он передается браузеру Давать.

22. Что такое компоненты высшего порядка (HOC)?

Компоненты более высокого порядка — это методы высокого уровня, которые фокусируются на логике компонента. по сути,Это шаблон, полученный из свойства React из композиции. HOC — это пользовательский компонент,существование его середина оборачивает другой компонент. Они могут принимать любые динамически предоставляемые подкомпоненты.,Но он не будет модифицировать или модифицировать какое-либо поведение своих входных компонентов. Можно сказать, что HOC — это «чистые» компоненты.

23. Как использовать строгий режим React и для чего он нужен?

StrictMode это инструмент для выявления проблем, которые следует использовать в программе середина существования. и Fragment Такой же,StrictMode Ничего видимого не будет отображено Пользовательский интерфейс. Он запускает дополнительные проверки и предупреждения для своих дочерних элементов.

24. Что такое контролируемые и неконтролируемые компоненты в React?

(1) Контролируемые компоненты существование позволяет форме использования собирать использование, когда пользователь входит,Например, все элементы должны быть привязаны к событию изменения.,При изменении статуса формы,Событие onChange будет вызвано,Обновите компонент isstate. Такой компонент существованияReactсередина называется управляемым компонентом.,существовать受控компонентысередина,Компонент отображает состояние «из», соответствующее его значению «иззначение» или атрибуту «проверено».,React таким образом устраняет частичное состояние компонента.,Сделать все государство управляемым. React официально рекомендует использовать компоненты контролируемой формы.

Процесс обновления состояния контролируемых компонентов:

может быть инициализирован с помощьюstateсередина Настроить формуиззначение по умолчанию Всякий раз, когда значение формы изменяется, вызывается обработчик события onChange. Обработчик событий получает измененное состояние через объект события e и обновляет состояние компонента. Как только состояние будет обновлено с помощью метода setState, будет запущен повторный рендеринг представления для завершения обновления компонента формы. Контролируемые дефекты компонентов: Значения элементов формы управляются компонентами React. При наличии нескольких полей ввода или нескольких таких компонентов, если вы хотите получить все значения одновременно, вы должны написать обработчик событий для каждого из них, который сделает код очень раздутым, поэтому для решения этой ситуации появились неуправляемые компоненты.

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

25、ReactIvue.jsiz Что это?

Сходства заключаются в следующем. (1) Все они используются для создания пользовательского интерфейса. Библиотека JavaScript. (2) Все они представляют собой быстрые и легкие библиотеки кода (здесь имеется в виду Основная библиотека React). (3) Все они имеют компонентную архитектуру. （4）都делатьиспользоватьвиртуальныйDOM。 (5) Вы можете указать существование отдельно из HTML-файла середина или указать существующее. Настройка Webpack из более сложного модуля середина. (6) Все они имеют независимые, но общие маршрутизаторы и библиотеки управления состоянием. Самая большая разница между ними в том, что Vue. js обычно использует файлы шаблонов HTML,а React полностью использован JavaScriptсоздаватьвиртуальныйDOM。 Vue. js также имеет «изменяемое состояние» реактивность» перерисовывает автоматизированную систему обнаружения.

26. Каковы различные этапы жизненного цикла компонента React?

Жизненный цикл компонента React разделен на три отдельных этапа: Начальная фаза рендеринга: это фаза, на которой компонент собирается начать свой жизненный путь и достичь DOM. Фаза обновления: после того, как компонент добавлен в DOM, он может обновляться или перерисовываться только тогда, когда происходят изменения реквизита или состояния. Это происходит только на этом этапе. Фаза удаления: это последняя фаза жизненного цикла компонента. На этом этапе компонент уничтожается и удаляется из DOM.

27. Подробно объясните методы жизненного цикла компонентов React.

Некоторые из наиболее важных методов жизненного цикла: компонентWillMount() - существование отображается до существования выполнения на стороне клиента и на стороне сервера. компонентDidMount() — выполняется только на стороне клиента после первого рендеринга существования. компонентWillReceiveProps() — существует, получает реквизиты от родительского класса и корректирует их перед рендерингом другого. mustComponentUpdate() — возвращает истинное или ложное значение в зависимости от определенных условий. Возвращает true, если вы хотите, чтобы компонент обновлялся, в противном случае — false. По умолчанию он возвращает false. componentWillUpdate()——существоватьDOMсередина进行呈现Донастраиватьиспользовать。 компонентDidUpdate() — вызывается сразу после того, как происходит рендеринг. компонентWillUnmount()—существовать удаляет компонент из DOM, а затем вызывает егоиспользовать.

28. Что такое синтетическое событие React?

Синтетические события — это объекты, которые действуют как кросс-браузерные оболочки для событий браузера. Они объединяют различные варианты поведения браузера в одном API. Это сделано для того, чтобы событие существовало и отображало согласованные атрибуты в разных браузерах.

29. Каковы преимущества использования стрелочных функций?

Чтобы использовать безопасность домена: существование До стрелочной функции каждая вновь созданная функция имеет свое собственное значение, определенное (существовать конструктор середина

новый объект；существоватьв строгом режиме,函数настраиватьиспользоватьв this не определено, если функция называется «методом объекта», она является базовой;

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

Просто: функции стрелок легко читать и писать.

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

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

30. Почему предложения передаются setState Параметр представляет собой callback а не объект

потому что this.props и this.state Обновления могут быть асинхронными, и на их значения нельзя полагаться при вычислении следующего state。

31、 (существовать Конструкторсередина)настраиватьиспользовать super(props) Какова цель

существовать super() Подклассы нельзя использовать до тех пор, пока они не будут вызваны. this из,существовать ES2015 середина,Подклассы должнысуществовать constructor серединанастраивать

использовать super() . передача props Давать super() из Причина – дефекация于(существовать Подкласссередина)способныйсуществовать constructor доступ

this.props 。

32. Как работает React

React создам виртуальный DOM(virtual ДОМ). Когда состояние компонента меняется, React пройдет первым “diffing”

Алгоритм пометки виртуальный DOM в изменении, второй шаг — сверка (согласование), будетиспользовать diff обновить результаты DOM。

33、Кромесуществовать Конструкторсерединаобязательность this , есть ли другие способы?

你可以делатьиспользовать Инициализатор свойства(property инициализаторы), чтобы правильно привязать обратные вызовы, create-реагировать-приложение Он также поддерживается по умолчанию

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

34、 зачем Children

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

props.children автоматически передается Давать содержащие его компоненты.

35、 Что такое прокси атрибута?

Компонент прокси-свойства наследуется от React.Component и получает свое имя после передачи Давать обернутые компонентыprops.

diff обновить результаты DOM。