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

1. Краткое изложение использования муравьиной конструкции и общих компонентов и их основного использования?

ant-design предоставляет компоненты для React, Angular и Vue, а также общие базовые компоненты для ПК и мобильных устройств. Демонстрация, предоставленная ant-design, очень богата, и стиль может в основном покрыть потребности разработки. Поскольку демонстрационная версия antd написана несколькими людьми, можно увидеть, что существуют реализации разных стилей, которые вполне могут соответствовать разным стилям разработки. Обычно используемые компоненты: Button, Form, Radio, Select, TimePicker, Upload, Table и т. д. При его использовании вы можете обратиться к демонстрации, чтобы написать, и в конце страницы интерфейса компонента есть введение в атрибуты и точки внимания. Достигать эффекта очень удобно.

2. Каковы наиболее часто используемые сущности персонажей во внешнем интерфейсе и как их писать?

Поскольку существуют зарезервированные символы, когда эти символы необходимо отобразить, можно использовать сущности символов. Обычно используемые символьные шрифты содержат (1) пробелы (2) Знак меньше<(3) Двойные кавычки"(4) одинарные кавычки'(5) & амперсанд&(6) Знак больше>

3 Жизненный цикл реакции и значение разных жизненных циклов?

生命周期状态变化 (1) Инициализировать состояние в конструкторе. (2) Асинхронно загружать данные в componentDidMount и добавлять мониторинг событий. (3) В getDerivedStateFromProps входящие реквизиты обновляются до состояния. (4) Обрабатывать запросы, инициированные изменениями состояния в componentDidUpdate.

4. Каковы наиболее часто используемые инструменты рисования диаграмм и какие функции можно реализовать?

EChats обеспечивает многомерное отображение данных на разных платформах и поддерживает несколько устройств и несколько типов визуализации, таких как линейные диаграммы, столбчатые диаграммы, точечные диаграммы, круговые диаграммы, диаграммы K-линий и т. д.

5. Каков процесс загрузки файла Alibaba Cloud OSS?

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

6. Основная роль и использование редукции

Основная функция — сконцентрировать все состояния поверх компонентов, чтобы все состояния можно было гибко распределить по всем компонентам. redux store: Место для сохранения данных. Существует Store для всей прикладной аналитики. состояние: Содержит все данные, одно состояние соответствует одному представлению. Пока состояние одно и то же, вид один и тот же. действие: действие уведомления, отправленное представлением, изменяет состояние, тем самым изменяя представление. Единственный способ изменить состояние — использовать Действия.

7. Как обновить сторонние библиотеки, от которых зависит проект?

использоватьnpm outdatedВы можете просмотреть последнюю версию пакета в npm, а затем использоватьncu -uОбновите зависимую библиотеку и, наконец, используйтеnpm installПросто установите новую версию. где ncu — инструмент для nom-check-updated, черезnpm install -g npm-check-updatesустановить. После завершения обновления необходимо проверить, имеет ли версия зависимой сторонней библиотеки обновление основной версии, например обновление с 1.x до 2.x или с 3.x до 4.x, включая кросс-версию. обновления, то вы должны быть осторожны, вам нужно перейти на соответствующую официальную версию, чтобы проверить запись миграции версии и обновить код. Поэтому обычно рекомендуется регулярно обновлять версию сторонней библиотеки, что может эффективно исправить ошибки в сторонней библиотеке и избежать проблем, вызванных обновлением большой версии.

8. Как использовать хук в новой версии реакции?

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

// 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

useEffect добавляет возможность манипулировать побочными эффектами функциональных компонентов, выполняя ту же цель, что и componentDidMount, componentDidUpdate и componentWillUnmount. React будет вызывать функцию побочного эффекта после каждого рендера (включая первый рендеринг).

// 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  });

useEffect можно использовать в компоненте несколько раз.

useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

Функции побочных эффектов также могут указывать, как «очищать» побочные эффекты, возвращая функцию. Например, используйте функцию побочного эффекта в вышеуказанном компоненте, чтобы подписаться на онлайн-статус друга, и очистите операцию, отписавшись. Можно понять, что он был добавлен в componentDidMount доChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);для подписки на онлайн статус друзей, а потом добавил в компонентWillUnmountChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);Отписаться. Второй параметр useEffect — это массив зависимых значений, и отрисовка эффекта выполняется только при изменении значения массива. Если передается пустой массив, он будет выполняться только один раз, когда компонент монтируется и размонтируется.

9. Что означает понимание git, перебазирование и перемотка вперед?

Самая большая разница между git и svn заключается в том, что он распространяется, то есть после проверки проекта вы можете отправлять код локально, просматривать исторические версии, создавать новые ветки проекта и т. д. Rebase используется в git для управления ветками, что позволяет избежать несогласованности веток, вызванной слиянием нескольких людей на одной ветке. При слиянии, когда объединяемая ветка A и ветка B объединяются, базовая точка A заключается в том, что нет новой отправки на B и B, в это время будет выполняться ускоренная перемотка вперед и объединенная посылка не будет сформирована. Перемотка вперед также может быть отключена, чтобы можно было добавить фиксацию слияния, и было легко наблюдать, кто выполнил слияние.

10. Приоритет и вес списка селекторов CSS?

Общий селектор (*)
селектор элемента (типа)вес 1
селектор классавес 10
селектор атрибутов
псевдокласс
Селектор идентификатораВес 100
Встроенные стилиВес 1000

Правило !important имеет приоритет перед любыми другими объявлениями и должно использоваться только на страницах, которым необходимо переопределить общесайтовый или внешний CSS.

11. Каковы общие свойства конфигурации CSS и их функции?

Классификация	Атрибуты	стоимость
ширина и высота	ширина ширина; высота высота; максимальная высота следует за родительским тегом
свойства шрифта	color color; font-family font; font-size размер текста; font-weight вес текста	обычное значение по умолчанию жирный жирный жирнее жирнее жирнее светлее тоньше 100~900 удельный вес наследовать наследует значение веса шрифта элемента класса
цвет	Шестнадцатеричное значение: #FF0000; представление слова: синий, красный; значение RGB: (255, 0, 0); rgba (200, 0, 0, 0,3)
текстовый атрибут	text-align, text-decoration, text-indent отступ абзаца 32 пикселя	выравнивание по левому краю выравнивание по левому краю выравнивание по центру выравнивание по центру выравнивание по ширине выравнивание по обоим концам; нет по умолчанию подчеркивание текста следующая строка текст поверх текста предыдущая строка сквозная строка через текст наследовать наследовать свойства родительского класса
фоновое свойство	цвет фона background-color: красный; фоновое изображение background-image: url('1.jpg'); повтор фона background-repeat: повтор; позиция фона background-position: справа вверху
CSS поле	margin управляет расстоянием между элементами и элементами, padding управляет расстоянием между содержимым и границами, border padding и границы за пределами содержимого, содержимое содержимого, отображение текста и изображений;	Порядок сокращений: вверху справа внизу слева
Рамка	ширина границы, стиль границы, цвет границы, может быть сокращено как граница:2px сплошной красный;	border-radius реализует закругленную границу; значение border-style — none, без границы, dotted, пунктирная пунктирная граница, dashed, прямоугольная пунктирная граница, сплошная, граница
показывать	display	none не отображается; block заполняет всю ширину страницы; inline отображается как встроенный элемент; inline-block имеет встроенные и блочные элементы
плавать	float Любой элемент может быть плавающим, указанная сторона свойства clear не позволяет использовать другие плавающие элементы;	Свойства поплавка: левый — левый, правый — правый, ни один не плавающий. Свойство clear left не допускает плавающие элементы слева, right не допускает плавающие элементы справа, обе стороны не допускаются, и ни один из них не может появляться, inherit наследует родительский элемент;
переполнение	overflow	видимое содержимое не обрезается, скрытое содержимое обрезается, а остальная часть содержимого становится невидимой, содержимое прокрутки обрезается и отображаются полосы прокрутки для просмотра остального содержимого, автоматическое содержимое обрезается и отображаются полосы прокрутки для просмотра остального содержимого. content, inherit наследуется от родительского элемента
позиция	position	статическое без позиционирования, относительное относительное позиционирование, абсолютное абсолютное позиционирование, фиксированное фиксированное

12. Роль вебпака и как его использовать?

Сборщик модулей анализирует структуру проекта, находит модули JavaScript и некоторые языки расширений (Scss, TypeScript и т. д.), которые браузеры не могут запускать напрямую, и упаковывает их в подходящий формат для использования браузерами. Вставьте таблицу стилей в файл JS, упакованный webpack, через css-loader и style-loader. loader Препроцессоры CSS с помощью less-loader, sass-loader и stylus-loader могут преобразовывать специальные типы операторов в распознаваемые браузером операторы CSS. postcss webpack использует плагины для расширения функциональности webpack и выполнения соответствующих задач на протяжении всего процесса сборки. Например, подключаемый модуль HtmlWebpackPlugin создает окончательный файл Html5 на основе простого шаблона и автоматически ссылается на упакованный файл JS в файле. plugin

13. Реализация обещаний, преимущества и недостатки

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

var myPromise = new Promise((resolve, reject) => {
  // 需要执行的代码
  ...
  if (/* 异步执行成功 */) {
    resolve(value)
  } else if (/* 异步执行失败 */) {
    reject(error)
  }
})

myPromise.then((value) => {
  // 成功后调用, 使用value值
}, (error) => {
  // 失败后调用, 获取错误信息error
})

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

14. Код состояния HTTP и его значение

1xx: сервер получает запрос, и от отправителя запроса требуются дальнейшие действия.
2xx: запрос выполнен успешно
3xx: Редирект, ресурс перемещается на другой URL
4xx: ошибка клиента, ошибка синтаксиса запроса или ресурс не найден
5xx: ошибка сервера, ошибка сервера
301: Ресурс (веб-страница и т. д.) постоянно переносится на другой URL-адрес, возвращаемое значение содержит новый URL-адрес, и браузер будет автоматически перенаправлен на новый URL-адрес.
302: Временный перенос. Клиент должен посетить исходный URL.
304: Не изменен. Не изменен после указанной даты, ресурс не возвращен.
403: сервер отказался выполнять запрос
404: Запрошенный ресурс (веб-страница и т. д.) не существует.
внутренняя ошибка сервера 500

15. Использование асинхронности и ожидания

async/await — это новый способ написания асинхронного кода, предыдущий метод имеет функцию обратного вызова и обещание.
async/await реализован на основе Promise, его нельзя использовать для обычных callback-функций.
async/await, как и Promises, неблокирует.
async/await делает асинхронный код похожим на синхронный код, где и происходит его волшебство.

16. Почему задержка времени setTimeout неточна?

Один поток, сначала выполните синхронный основной поток, а затем выполните очередь асинхронных задач.

17. пусть const var область видимости и разница

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

18. Разница между for in, forEach и for of

for inОбход массива приведет к переходу к свойствам и методам прототипа массива, что больше подходит для обхода объектов. Переход к методу-прототипу myObject.Если вы не хотите переходить к методу-прототипу и свойствам, вы можете оценить в цикле метод hasOwnProperty, чтобы определить, является ли свойство свойством экземпляра объекта.
forEachПерерыв, продолжение, возврат и т. д. не поддерживаются
for ofМожно успешно обойти значения массива, но не индексы, без обхода прототипа.

19. Резюме различий между localStorage и sessionStorage и куки

Общая основа: оба сохраняются на стороне браузера и имеют одно и то же происхождение.
LocalStorage и sessionStorage вместе называются webStorage, которые хранятся в браузере и не участвуют в обмене данными с сервером. Размер 5М.
Жизненный цикл другой: localStorage сохраняется постоянно, sessionStorage — текущая сессия. можно удалить вручную.
Различные области: разные браузеры не используют локальный и сеансовый доступ, а разные сеансы не используют общий сеанс.
Файл cookie: он действителен до установленного срока действия и имеет размер 4 КБ. Существует ограничение по количеству, которое варьируется от браузера к браузеру, обычно 20. Перенос его в заголовок http вызовет проблемы с производительностью, если его слишком много. Вы можете инкапсулировать его самостоятельно или использовать изначально.

20. Каков жизненный цикл компонентов апплета WeChat?

загрузка страницы onLoad: страница будет вызываться только один раз, а параметр запроса, вызываемый для открытия текущей страницы, можно получить в onLoad.
отображение страницы onShow: будет вызываться один раз при каждом открытии страницы.
onReady Первоначальный рендеринг страницы завершен: страница будет вызвана только один раз, что означает, что страница готова к взаимодействию со слоем представления.
onHide page hide: вызывается при переключении навигации или нижней вкладки.
onUnload выгрузка страницы: выполняется при уничтожении страницы.

21. Принцип работы апплета WeChat?

Мини-программы WeChat разрабатываются с использованием трех технологий: JavaScript, WXML и WXSS.

JavaScript: во-первых, код JavaScript выполняется в приложении WeChat, а не в браузере, поэтому для некоторых приложений технологии H5 требуется соответствующая поддержка API, предоставляемая приложением WeChat, что ограничивает применение технологии H5. Точно так же некоторые уникальные API, предоставляемые WeChat, не поддерживаются H5 или поддерживаются не очень хорошо.
WXML: WXML WeChat разработан на основе синтаксиса XML, поэтому при разработке можно использовать только существующие теги, предоставляемые WeChat, а HTML-теги использовать нельзя.
WXSS: обладает большинством функций CSS, но не все из них поддерживаются, и нет подробной документации о том, что поддерживается, а что нет.

Архитектура WeChat — это шаблон архитектуры, управляемый данными, пользовательский интерфейс и данные разделены, и все обновления страниц должны выполняться путем изменения данных. Программа WeChat разделена на две части: webview и appService. Среди них webview в основном используется для отображения пользовательского интерфейса, а appService используется для обработки бизнес-логики, данных и вызовов интерфейса. Они работают в двух процессах и взаимодействуют через системный уровень JSBridge для обеспечения рендеринга пользовательского интерфейса и обработки событий.

22. Как улучшить скорость приложения апплета WeChat?

Улучшить скорость загрузки страниц.
Предсказание поведения пользователя.
Уменьшите размер данных по умолчанию.
Компонентное решение.

23. Какие есть способы передачи данных в программах WeChat Mini?

Используйте глобальные переменные для реализации передачи данных.
Когда страница переходит или перенаправляется, используйте URL-адрес с параметрами для передачи данных.
Используйте шаблон шаблона компонента для передачи параметров.
Используйте базу данных для передачи данных.

** Отказ от ответственности: ** Изображения и контент взяты из Интернета, я просто храню информацию, вторгаюсь и удаляю