Вы хотите сменить профессию на более прибыльную должность? Или вы тратите много времени и сил на подготовку к собеседованию на выходных? Вы хоть представляете, скольким людям отказывают в приеме на работу, потому что они просто изучают концепции, а не реальные вопросы, которые будут заданы? На этот раз постарайтесь не быть этим человеком. Это самый полный набор вопросов для собеседования по React JS, с которым вы когда-либо сталкивались. В нем много часто задаваемых и важных вопросов и ответов на интервью с React JS. Новичкам, опытным профессионалам, старшим разработчикам и тестировщикам будет полезен широкий спектр вопросов, которые охватывают не только основы React JS, но и самые сложные и сложные проблемы. Этот пост в блоге будет подробным руководством для тех, кто хочет попрактиковаться и усовершенствовать свои навыки работы с react.js. Я рекомендую вам внимательно прочитать все заранее, попрактиковаться и отточить свои знания о реакции.
Основы реакции
1. В чем разница между элементом и компонентом?
Элемент — это простой объект, описывающий то, что вы хотите отобразить на экране с точки зрения узлов DOM или других компонентов. Элементы могут содержать другие Элементы в своих свойствах. Создание элемента React дешево. После того, как элемент создан, он никогда не мутирует. Объектное представление React Element будет следующим:
const element = React.createElement(
'div',
{id: 'login-btn'},
'Login'
)Приведенная выше функция React.createElement() возвращает объект:
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn'
}
}И, наконец, он рендерится в DOM с помощью ReactDOM.render():
<div id='login-btn'>Login</div>Принимая во внимание, что компонент может быть объявлен несколькими различными способами. Это может быть класс с методом render() или он может быть определен как функция. В любом случае он принимает props в качестве входных данных и возвращает дерево JSX в качестве вывода:
const Button = ({ onLogin }) =>
<div id={'login-btn'} onClick={onLogin}>Login</div>Затем JSX транспилируется в дерево функций React.createElement():
const Button = ({ onLogin }) => React.createElement(
'div',
{ id: 'login-btn', onClick: onLogin },
'Login'
)2. Как создавать компоненты в React?
Существует два возможных способа создания компонента.
- Функциональные компоненты. Это самый простой способ создания компонента. Это чистые функции JavaScript, которые принимают объект реквизита в качестве первого параметра и возвращают элементы React:
- NoneBashCSSCC#GoHTMLJavaJavaScriptJSONPHPPowershellPythonRubySQLTypeScriptYAMLCopy
function Greeting({ message }) { return <h1>{`Hello, ${message}`}</h1> }
- Компоненты класса. Вы также можете использовать класс ES6 для определения компонента. Вышеупомянутый функциональный компонент может быть записан как:
- NoneBashCSSCC#GoHTMLJavaJavaScriptJSONPHPPowershellPythonRubySQLTypeScriptYAMLCopy
class Greeting extends React.Component { render() { return <h1>{`Hello, ${this.props.message}`}</h1> } }
3. Когда использовать компонент класса вместо функционального компонента?
Если компоненту нужны методы состояния или жизненного цикла, используйте компонент класса, в противном случае используйте компонент функции. Однако, начиная с React 16.8 с добавлением хуков, вы можете использовать состояние, методы жизненного цикла и другие функции, которые были доступны только в компоненте класса, прямо в компоненте функции.
4. Что такое чистые компоненты?
React.PureComponent точно такой же, как React.Component, за исключением того, что он обрабатывает метод shouldComponentUpdate() за вас. При изменении реквизита или состояния PureComponent выполнит поверхностное сравнение как реквизита, так и состояния. Компоненты, с другой стороны, не будут сравнивать текущие реквизиты и состояние со следующими из коробки. Таким образом, компонент будет перерисовываться по умолчанию всякий раз, когда вызывается shouldComponentUpdate.
5. Что такое состояние в React?
Состояниекомпонента — это объект, который содержит некоторую информацию, которая может меняться в течение срока службы компонента. Мы всегда должны стараться сделать наше состояние максимально простым и свести к минимуму количество компонентов с состоянием.
Давайте создадим пользовательский компонент с состоянием сообщения,
class User extends React.Component { constructor(props) { super(props)this.state = { message: 'Welcome to React world' } } render() { return ( <div> <h1>{this.state.message}</h1> </div> ) } }
Состояние похоже на свойства, но оно является частным и полностью контролируется компонентом. т. е. он недоступен для любого другого компонента, пока компонент-владелец не решит передать его.
6. Что такое реквизит в React?
Реквизиты — это входные данные для компонентов. Это отдельные значения или объекты, содержащие набор значений, которые передаются компонентам при создании с использованием соглашения об именах, аналогичного атрибутам HTML-тегов. Это данные, передаваемые от родительского компонента к дочернему компоненту.
Основная цель props в React — обеспечить следующие функциональные возможности компонента:
- Передайте пользовательские данные в ваш компонент.
- Изменения состояния триггера.
- Используйте через метод this.props.reactProp внутри компонента render()
Например, давайте создадим элемент со свойством reactProp:
NoneBashCSSCC#GoHTMLJavaJavaScriptJSONPHPPowershellPythonRubySQLTypeScriptYAMLCopy
<Element reactProp={'1'} />Это имя React Pro (или любое другое, что вы придумали) затем становится свойством, прикрепленным к собственному объекту реквизита React, который изначально уже существует во всех компонентах, созданных с использованием библиотеки React.
NoneBashCSSCC#GoHTMLJavaJavaScriptJSONPHPPowershellPythonRubySQLTypeScriptYAMLCopy
props.reactProp7. В чем разница между состоянием и реквизитом?
И props, и state являются простыми объектами JavaScript. Хотя оба они содержат информацию, влияющую на результат рендеринга, они различаются по своей функциональности по отношению к компонентам. Реквизиты передаются компоненту аналогично параметрам функции, тогда как состояние управляется внутри компонента аналогично переменным, объявленным внутри функции.
8. Почему бы нам не обновить состояние напрямую?
Если вы попытаетесь обновить состояние напрямую, компонент не будет повторно отображаться.
//Wrong
this.state.message = 'Hello world'Вместо этого используйте метод usesetState(). Он планирует обновление объекта состояния компонента. Когда состояние изменяется, компонент отвечает повторным рендерингом.
//Correct
this.setState({ message: 'Hello World' })Примечание. Вы можете напрямую назначать объекту состояния либо в конструкторе, либо с помощью последнего синтаксиса объявления поля класса javascript.
9. Какова цель функции обратного вызова в качестве аргумента setState()?
Функция обратного вызова вызывается, когда setState завершает работу и компонент визуализируется. Поскольку setState()является асинхронным, функция обратного вызова используется для любого действия публикации.
Примечание. Рекомендуется использовать метод жизненного цикла, а не эту функцию обратного вызова.
setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'))10. Что такое синтетические события в React?
SyntheticEvent — это кросс-браузерная оболочка собственного события браузера. Его API такой же, как и собственное событие браузера, включая stopPropagation() и preventDefault(), за исключением того, что события работают одинаково во всех браузерах.
11. Что такое «ключевой» реквизит и в чем польза от его использования в массивах элементов?
Ключ — это специальный строковый атрибут, который следует включать при создании массивов элементов. Keyprop помогает React определить, какие элементы были изменены, добавлены или удалены.
Чаще всего мы используем идентификатор из наших данных как key:
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
)Если у вас нет постоянных идентификаторов отображаемых элементов, вы можете использовать индекс элемента в качестве ключа в крайнем случае:
12. Что такое поднятие состояния в React?
Если нескольким компонентам необходимо совместно использовать одни и те же изменяющиеся данные, рекомендуется поднять общее состояние до их ближайшего общего предка. Это означает, что если два дочерних компонента используют одни и те же данные от своего родителя, то переместите состояние в родительский вместо сохранения локального состояния в обоих дочерних компонентах.
13. Каковы различные этапы жизненного цикла компонента?
Жизненный цикл компонента состоит из трех отдельных фаз:
- Монтаж: компонент готов к монтированию в DOM браузера. Эта фаза охватывает инициализацию из методов жизненного цикла конструктора(), getDerivedStateFromProps(), render() и componentDidMount().
- Обновление: на этом этапе компонент обновляется двумя способами, отправляя новые реквизиты и обновляя состояние либо из setState(), либо из forceUpdate(). На этом этапе рассматриваются методы жизненного цикла getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() и componentDidUpdate().
- Размонтирование: на этом последнем этапе компонент не нужен и размонтируется из DOM браузера. Эта фаза включает в себя метод жизненного цикла componentWillUnmount().
Стоит отметить, что внутри React существует концепция фаз при внесении изменений в DOM. Они разделены следующим образом:
- Рендеринг Компонент будет визуализироваться без каких-либо побочных эффектов. Это относится к компонентам Pure, и на этом этапе React может приостановить, прервать или перезапустить рендеринг.
- Предварительная фиксация Перед тем, как компонент фактически применит изменения к DOM, есть момент, который позволяет React читать из DOM через getSnapshotBeforeUpdate().
- Commit React работает с DOM и выполняет последние жизненные циклы соответственно componentDidMount() для монтирования, componentDidUpdate() для обновления и componentWillUnmount() для размонтирования.
14. Что такое порталы в React?
Портал — это рекомендуемый способ отображения дочерних элементов в узле DOM, который существует вне иерархии DOM родительского компонента.
NoneBashCSSCC#GoHTMLJavaJavaScriptJSONPHPPowershellPythonRubySQLTypeScriptYAMLCopy
ReactDOM.createPortal(child, container)Первый аргумент — это любой дочерний элемент React с возможностью рендеринга, такой как элемент, строка или фрагмент. Второй аргумент — элемент DOM.
15. Что такое компоненты без состояния?
Если поведение не зависит от его состояния, то оно может быть компонентом без состояния. Вы можете использовать либо функцию, либо класс для создания компонентов без сохранения состояния. Но если вам не нужно использовать хук жизненного цикла в своих компонентах, вам следует использовать функциональные компоненты. Есть много преимуществ, если вы решите использовать здесь функциональные компоненты; их легко написать, понять и протестировать, они немного быстрее, и вы можете вообще избежать этого ключевого слова.
16. Что будет, если использовать реквизит в начальном состоянии?
Если реквизиты компонента изменены без обновления компонента, новое значение реквизита никогда не будет отображаться, поскольку функция конструктора никогда не обновит текущее состояние компонента. Инициализация состояния из реквизита запускается только при первом создании компонента.
Компонент ниже не будет отображать обновленное входное значение:
NoneBashCSSCC#GoHTMLJavaJavaScriptJSONPHPPowershellPythonRubySQLTypeScriptYAMLCopy
class MyComponent extends React.Component {
constructor(props) {
super(props)
this.state = {
records: [],
inputValue: this.props.inputValue
};
}
render() {
return <div>{this.state.inputValue}</div>
}
}Использование props внутри метода рендеринга обновит значение:
NoneBashCSSCC#GoHTMLJavaJavaScriptJSONPHPPowershellPythonRubySQLTypeScriptYAMLCopy
class MyComponent extends React.Component { constructor(props) { super(props)this.state = { record: [] } }render() { return <div>{this.props.inputValue}</div> } }
Реактивный маршрутизатор
17. Каково назначение методов push() и replace() истории?
Экземпляр истории имеет два метода для навигации.
Если вы думаете об истории как о массиве посещенных местоположений, push() добавит новое местоположение в массив, а replace() заменит текущее местоположение в массиве новым.
18. Как программно перемещаться с помощью React Router v4?
Существует три разных способа программной маршрутизации/навигации внутри компонентов.
Использование функции высшего порядка withRouter():
Функция высшего порядка withRouter() вставит объект истории в качестве реквизита компонента. Этот объект предоставляет методы push() и replace(), чтобы избежать использования контекста.
import { withRouter } from 'react-router-dom' // this also works with 'react-router-native'const Button = withRouter(({ history }) => ( <button type='button' onClick={() => { history.push('/new-location') }} > {'Click Me!'} </button> ))
Использование компонента ‹Route› и шаблона реквизитов рендеринга.
Компонент ‹Route› передает те же реквизиты, что и withRouter(), поэтому вы сможете получить доступ к методам истории через реквизит истории.
import { Route } from 'react-router-dom'const Button = () => ( <Route render={({ history }) => ( <button type='button' onClick={() => { history.push('/new-location') }} > {'Click Me!'} </button> )} /> )
Использование контекста.
Этот вариант не рекомендуется и рассматривается как нестабильный API.
const Button = (props, context) => (
<button
type='button'
onClick={() => {
context.history.push('/new-location')
}} >
{'Click Me!'}
</button>
)
Button.contextTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
})
}19. Как получить параметры запроса в React Router v4?
Возможность анализировать строки запроса была удалена из React Router v4, потому что на протяжении многих лет от пользователей поступали запросы на поддержку различных реализаций. Таким образом, пользователям было дано решение выбрать ту реализацию, которая им нравится. Рекомендуемый подход — использовать библиотеку строк запросов.
const queryString = require('query-string');
const parsed = queryString.parse(props.location.search);Вы также можете использовать URLSearchParams, если хотите что-то нативное:
const params = new URLSearchParams(props.location.search)
const foo = params.get('name')Вы должны использовать применить заливку для IE11.
Реагировать Редукс
20. Что такое селекторы Redux и зачем их использовать?
Селекторы – это функции, которые принимают состояние Redux в качестве аргумента и возвращают некоторые данные для передачи компоненту.
Например, чтобы получить сведения о пользователе из состояния:
const getUserData = state => state.user.dataЭти селекторы имеют два основных преимущества:
- Селектор может вычислять производные данные, позволяя Redux хранить минимально возможное состояние.
- Селектор не пересчитывается, пока не изменится один из его аргументов.
21. Какие существуют способы написания mapDispatchToProps()?
Существует несколько способов привязки создателей действий к dispatch() в mapDispatchToProps().
Ниже приведены возможные варианты:
const mapDispatchToProps = (dispatch) => ({
action: () => dispatch(action())
})
const mapDispatchToProps = (dispatch) => ({
action: bindActionCreators(actioimport { ADD_TODO } from './actionTypes'
export default (state = [], action) => {
switch (action.type) {
case ADD_TODO:
return [
...state,
{
text: action.text,
completed: false
}
];
default:
return state
}
}
n, dispatch)
})
const mapDispatchToProps = { action }Третий вариант является лишь сокращением для первого.
22. В чем разница между компонентом и контейнером в React Redux?
Компонент — это класс или функциональный компонент, описывающий презентационную часть вашего приложения.
Контейнер — это неофициальный термин для компонента, подключенного к хранилищу Redux. Контейнеры подписываются на обновления состояния Redux и действия dispatch и обычно не отображают элементы DOM; они делегируют рендеринг презентационным дочерним компонентам.
23. Какова ментальная модель редукс-саги?
Saga — это как отдельный поток в вашем приложении, который несет полную ответственность за побочные эффекты. redux-saga — это промежуточное программное обеспечение с сокращением, что означает, что этот поток можно запускать, приостанавливать и отменять из основного приложения с помощью обычных действий Redux, он имеет доступ к полному состоянию приложения Redux и может отправлять действия Redux. также.
24. В чем разница между call() и put() в redux-saga?
И call(), и put() являются функциями создания эффекта. Функция call() используется для создания описания эффекта, которое указывает промежуточному программному обеспечению вызывать промис. Функция put() создает эффект, который дает промежуточному ПО указание отправить действие в хранилище.
Давайте рассмотрим пример того, как эти эффекты работают для получения определенных пользовательских данных.
function* fetchUserSaga(action) { // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function. // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable const userData = yield call(api.fetchUser, action.userId)// Instructing middleware to dispatch corresponding action. yield put({ type: 'FETCH_USER_SUCCESS', userData }) }
25. Что такое Redux Thunk?
ПО промежуточного слоя Redux Thunk позволяет вам создавать генераторы действий, которые возвращают функцию вместо действия. Преобразователь можно использовать для задержки отправки действия или для отправки только при выполнении определенного условия. Внутренняя функция получает в качестве параметров методы хранилища dispatch() и getState().
26. Что такое селекторы Redux и зачем их использовать?
Селекторы – это функции, которые принимают состояние Redux в качестве аргумента и возвращают некоторые данные для передачи компоненту.
Например, чтобы получить сведения о пользователе из состояния:
const getUserData = state => state.user.dataЭти селекторы имеют два основных преимущества:
- Селектор может вычислять производные данные, позволяя Redux хранить минимально возможное состояние.
- Селектор не пересчитывается, пока не изменится один из его аргументов.
Мы создали совершенно бесплатную электронную книгу, которую вы можете загрузить по ссылке ниже, потому что мы не можем добавить все 300+ полных списков вопросов из-за ограничений по количеству символов.
Эта электронная книга содержит подробные инструкции для всех, кто хочет попрактиковаться и улучшить свои навыки работы с react.js. Я призываю вас заранее внимательно все прочитать, а также попрактиковаться и отточить свои навыки реакции. Это самая полная книга вопросов для интервью по React JS. В нем много важных и часто задаваемых вопросов и ответов на собеседованиях по React JS. Новичкам, опытным профессионалам, старшим разработчикам и тестировщикам будет полезен широкий спектр вопросов, которые охватывают не только основы React JS, но и самые сложные вопросы. Ваше здоровье!! Удачного кодирования и удачи !!
