Сегодня я собираюсь поделиться некоторыми важными вопросами собеседования по React JS для начинающих. Давайте начнем.
Что такое Реакт?
React — это внешняя библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательских интерфейсов, особенно для одностраничных приложений. Он используется для обработки слоя представления для веб-приложений и мобильных приложений.
Что такое JSX?
JSX — это XML-подобное расширение синтаксиса для ECMAScript (аббревиатура расшифровывается как JavaScript XML). По сути, он просто обеспечивает синтаксический сахар для функции React.createElement()
, давая нам выразительность JavaScript наряду с синтаксисом шаблона, подобным HTML.
В приведенном ниже примере текст внутри тега <h1>
возвращается как функция JavaScript в функцию рендеринга.
class App extends React.Component { render() { return( <div> <h1>{'Welcome to React world!'}</h1> </div> ) } }
Когда использовать компонент класса вместо функционального компонента?
Если компоненту нужны методы состояния или жизненного цикла, используйте компонент класса, в противном случае используйте компонент функции. Однако, начиная с React 16.8 с добавлением хуков, мы могли использовать состояние, методы жизненного цикла и другие функции, которые были доступны только в компоненте класса, прямо в нашем функциональном компоненте.
Что такое чистые компоненты?
React.PureComponent
точно такой же, как React.Component
, за исключением того, что он обрабатывает для нас метод shouldComponentUpdate()
. При изменении реквизита или состояния PureComponent будет выполнять поверхностное сравнение как реквизита, так и состояния. Компонент, с другой стороны, не будет сравнивать текущие реквизиты и состояние со следующими из коробки. Таким образом, компонент будет перерисовываться по умолчанию всякий раз, когда вызывается shouldComponentUpdate
.
Почему бы нам не обновить состояние напрямую?
Если мы попытаемся обновить состояние напрямую, компонент не будет повторно отображаться.
//Wrong this.state.message = 'Hello world'
Вместо этого используйте метод setState()
. Он планирует обновление объекта состояния компонента. Когда состояние изменяется, компонент отвечает повторным рендерингом.
//Correct this.setState({ message: 'Hello World' })
В чем разница между обработкой событий HTML и React?
- В HTML название события должно быть строчным:
<button onclick='activateLasers()'>
В то время как в React следует соглашению camelCase:
<button onClick={activateLasers}>
2. В HTML мы можем вернуть false
, чтобы предотвратить поведение по умолчанию:
<a href='#' onclick='console.log("The link was clicked."); return false;' />
В то время как в React мы должны вызывать preventDefault()
явно:
function handleClick(event) { event.preventDefault() console.log('The link was clicked.') }
3. В HTML нам нужно вызвать функцию, добавив ()
В то время как в реакции мы не должны добавлять ()
к имени функции. (например, см. функцию «activateLasers» в первом пункте)
Какая польза от рефов?
ref используется для возврата ссылки на элемент. Их следует избегать в большинстве случаев, однако они могут быть полезны, когда нам нужен прямой доступ к элементу DOM или экземпляру компонента.
Как создавать рефы?
Есть два подхода
- Это недавно добавленный подход. Refs создаются с использованием метода
React.createRef()
и присоединяются к элементам React с помощью атрибутаref
. Чтобы использовать refs во всем компоненте, просто назначьте ref свойству экземпляра в конструкторе.
class MyComponent extends React.Component { constructor(props) { super(props) this.myRef = React.createRef() } render() { return <div ref={this.myRef} /> } }
2. Мы также можем использовать подход с обратными вызовами ref независимо от версии React. Например, доступ к элементу ввода компонента панели поиска осуществляется следующим образом:
class SearchBar extends Component { constructor(props) { super(props); this.txtSearch = null; this.state = { term: '' }; this.setInputSearchRef = e => { this.txtSearch = e; } } onInputChange(event) { this.setState({ term: this.txtSearch.value }); } render() { return ( <input value={this.state.term} onChange={this.onInputChange.bind(this)} ref={this.setInputSearchRef} /> ); } }
Мы также можем использовать refs в функциональных компонентах, используя замыкания. Примечание. Мы также можем использовать встроенные обратные вызовы ref, хотя это не рекомендуется.
Что такое виртуальный DOM?
Виртуальный DOM (VDOM) — это представление Real DOM в памяти. Представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM. Это шаг между вызовом функции рендеринга и отображением элементов на экране. Весь этот процесс называется согласованием.
Как работает виртуальный DOM?
Virtual DOM работает в три простых шага.
- Всякий раз, когда какие-либо базовые данные изменяются, весь пользовательский интерфейс повторно отображается в представлении Virtual DOM.
2. Затем вычисляется разница между предыдущим представлением DOM и новым.
3. Как только вычисления будут выполнены, реальный DOM будет обновлен только тем, что действительно изменилось.
В чем разница между теневым DOM и виртуальным DOM?
Shadow DOM – это технология браузера, предназначенная в первую очередь для определения области действия переменных и CSS в веб-компонентах. Virtual DOM – это концепция, реализованная библиотеками в JavaScript поверх API-интерфейсов браузера.
Что такое реактивное волокно?
Fiber — это новый механизм согласования или повторная реализация основного алгоритма в React v16. Цель React Fiber — повысить его пригодность для таких областей, как анимация, макет, жесты, возможность приостанавливать, прерывать или повторно использовать работу, а также назначать приоритет различным типам обновлений; и новые примитивы параллелизма.
Какова основная цель React Fiber?
Цель React Fiber – повысить его пригодность для таких областей, как анимация, компоновка и жесты. Его главной особенностью является инкрементный рендеринг: возможность разделить работу рендеринга на куски и распределить их по нескольким кадрам.
Что такое управляемые компоненты?
Компонент, который управляет элементами ввода в формах при последующем вводе данных пользователем, называется контролируемым компонентом, т. е. каждая мутация состояния будет иметь связанную с ней функцию-обработчик.
Например, чтобы написать все имена заглавными буквами, мы используем handleChange, как показано ниже:
handleChange(event) { this.setState({value: event.target.value.toUpperCase()}) }
Заменяют ли хуки реквизиты для рендеринга и компоненты более высокого порядка?
И пропсы рендеринга, и компоненты более высокого порядка рендерят только одного дочернего элемента, но в большинстве случаев хуки — это более простой способ обслуживать это, уменьшая вложенность в нашем дереве.
Как убедиться, что хуки соответствуют правилам в нашем проекте?
Команда React выпустила плагин ESLint под названием eslint-plugin-react-hooks, который обеспечивает соблюдение этих двух правил. Мы можем добавить этот плагин в наш проект, используя следующую команду:
npm install eslint-plugin-react-hooks@next
И примените приведенную ниже конфигурацию в нашем файле конфигурации ESLint:
// our ESLint configuration { "plugins": [ // ... "react-hooks" ], "rules": { // ... "react-hooks/rules-of-hooks": "error" } }
Это все на сегодня. Спасибо.