Каковы основные функции React?
Основные особенности React:
· Он использует VirtualDOM вместо RealDOM, учитывая, что манипуляции с RealDOM обходятся дорого.
· Поддерживает рендеринг на стороне сервера.
· Следует однонаправленному потоку данных или привязке данных.
· Использует повторно используемые/компонуемые компоненты пользовательского интерфейса для разработки представления.
В чем разница между элементом и компонентом?
Элемент — это простой объект, описывающий то, что вы хотите отобразить на экране с точки зрения узлов DOM или других компонентов. Элементы могут содержать другие элементы в своих свойствах. Создание элемента React дешево. После того, как элемент создан, он никогда не мутирует. Объектное представление React Element будет следующим:
константный элемент = React.createElement(
'див',
{идентификатор: ‘login-btn’},
'Авторизоваться'
)
Приведенная выше функция React.createElement() возвращает объект:
{
тип: «див»,
реквизит: {
дети: «Войти»,
идентификатор: «логин-кнопка»
}
}
И, наконец, он рендерится в DOM с помощью ReactDOM.render():
‹div id=’login-btn’›Вход‹/div›
Принимая во внимание, что компонент может быть объявлен несколькими различными способами. Это может быть класс с методом render(). В качестве альтернативы, в простых случаях, его можно определить как функцию. В любом случае он принимает props в качестве входных данных и возвращает дерево JSX в качестве вывода:
const Button = ({ onLogin }) =›
‹div id={‘login-btn’} onClick={onLogin}›Вход‹/div›
Затем JSX транспилируется в дерево функций React.createElement():
const Button = ({ onLogin }) => React.createElement(
'див',
{идентификатор: ‘login-btn’, onClick: onLogin},
'Авторизоваться'
)
В чем разница между обработкой событий HTML и React?
В HTML имя события должно быть в нижнем регистре:
‹button onclick=’activateLasers()’›
В то время как в React следует соглашению camelCase:
‹button onClick={activateLasers}›
В HTML вы можете вернуть false, чтобы предотвратить поведение по умолчанию:
‹a href='#' onclick='console.log("Ссылка была нажата."); вернуть ложь;’ /›
В то время как в React вы должны явно вызывать preventDefault():
функция handleClick (событие) {
событие.preventDefault()
console.log('Ссылка была нажата.')
}
В HTML вам нужно вызвать функцию, добавив () В то время как в реакции вы не должны добавлять () имя функции.
Что такое компоненты высшего порядка?
Компонент высшего порядка (HOC) — это функция, которая принимает компонент и возвращает новый компонент. По сути, это шаблон, полученный из композиционной природы React. Мы называем их чистыми компонентами, потому что они могут принимать любой динамически предоставляемый дочерний компонент, но они не будут изменять или копировать какое-либо поведение своих входных компонентов.
const EnhancedComponent = компонент высшего порядка (компонент в оболочке)
HOC можно использовать во многих случаях:
· Повторное использование кода, логика и абстракция начальной загрузки.
· Рендеринг угона.
· Государственная абстракция и манипулирование.
· Манипуляции с реквизитом.
Почему React использует className вместо атрибутов класса?
Класс — это ключевое слово в JavaScript, а JSX — это расширение JavaScript. Это основная причина, по которой React использует className вместо class. Передайте строку в качестве реквизита className.
оказывать() {
return ‹span className={'меню навигации-меню'}›{'Меню'}‹/span›
}
Хорошо ли использовать setState() в методе componentWillMount()?
Рекомендуется избегать асинхронной инициализации в методе жизненного цикла componentWillMount(). componentWillMount() вызывается непосредственно перед монтированием. Он вызывается перед render(), поэтому установка состояния в этом методе не вызовет повторный рендеринг. Избегайте введения каких-либо побочных эффектов или подписок в этом методе. Нам нужно убедиться, что асинхронные вызовы для инициализации компонента происходят в componentDidMount(), а не в componentWillMount().
компонентDidMount () {
axios.get(`api/todos`)
.тог((результат) =› {
это.setState({
сообщения: […result.data]
})
})
Можно ли заставить компонент выполнить повторную визуализацию без вызова setState?
По умолчанию, когда состояние вашего компонента или реквизиты изменяются, ваш компонент будет повторно отображаться. Если ваш метод render() зависит от каких-то других данных, мы можем сообщить React, что компонент нуждается в повторном рендеринге, вызвав forceUpdate().
component.forceUpdate (обратный вызов)
Рекомендуется избегать любого использования forceUpdate() и читать только из this.props и this.state в render().
Каковы основные принципы Redux?
Redux следует трем фундаментальным принципам:
· Единый источник достоверной информации: состояние всего вашего приложения хранится в дереве объектов в одном хранилище. Единое дерево состояний упрощает отслеживание изменений с течением времени, а также отладку или проверку приложения.
· Состояние доступно только для чтения: единственный способ изменить состояние — запустить действие, объект, описывающий, что произошло. Это гарантирует, что ни представления, ни сетевые обратные вызовы никогда не будут напрямую записываться в состояние.
· Изменения вносятся с помощью чистых функций: чтобы указать, как дерево состояний преобразуется действиями, вы пишете редюсеры. Редьюсеры — это просто чистые функции, которые принимают предыдущее состояние и действие в качестве параметров и возвращают следующее состояние.
Каковы недостатки шаблона MVW?
· Манипуляции с DOM обходятся очень дорого, из-за чего приложения работают медленно и неэффективно.
· Из-за циклических зависимостей вокруг моделей и представлений была создана сложная модель.
· Много изменений данных происходит для приложений для совместной работы (таких как Google Docs).
· Невозможно сделать отмену (путешествие назад во времени) легко, не добавляя так много дополнительного кода.
Какие правила должны соблюдаться для хуков?
Нам нужно следовать двум правилам, чтобы использовать хуки
· Вызывайте хуки только на верхнем уровне ваших реагирующих функций. т. е. вы не должны вызывать хуки внутри циклов, условий или вложенных функций. Это гарантирует, что хуки вызываются в одном и том же порядке каждый раз, когда компонент отрисовывается, и сохраняет состояние хуков между несколькими вызовами useState и useEffect.
· Вызывать хуки только из React Functions. т. е. вы не должны вызывать хуки из обычных функций JavaScript.
