Мухаммад Умайр
Вопрос № 1: Почему бы нам не обновить состояние напрямую?
Если вы попытаетесь обновить состояние напрямую, компонент не будет повторно отображаться.
Wrong this.state.message = 'Hello world'
Вместо этого используйте метод setState(). Он планирует обновление объекта состояния компонента. Когда состояние изменяется, компонент отвечает повторным рендерингом.
//Correct this.setState({ message: 'Hello World' })
Примечание. Вы можете напрямую назначать объекту состояния либо в конструкторе, либо используя синтаксис объявления поля класса последней версии javascript.
Вопрос № 02: Какова цель функции обратного вызова в качестве аргумента setState()?
Функция обратного вызова вызывается, когда setState завершается и компонент визуализируется. Поскольку setState() является асинхронным, функция обратного вызова используется для любого действия с публикацией.
Примечание. Рекомендуется использовать метод жизненного цикла, а не эту функцию обратного вызова.
setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'))Вопрос № 3: В чем разница между обработкой событий HTML и React?
Ниже приведены некоторые из основных различий между обработкой событий HTML и React.
В HTML имя события обычно пишется нижним регистром по соглашению:
<button onclick='activateLasers()'>
В то время как в React следует соглашению camelCase:
jsx harmony <button onClick={activateLasers}>
В 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.')
}В HTML вам нужно вызвать функцию, добавив () В то время как в реакции вы не должны добавлять () к имени функции. (например, см. функцию «activateLasers» в первом пункте)
Вопрос № 4: Как связать методы или обработчики событий в обратных вызовах JSX?
Есть 3 возможных способа добиться этого:
Привязка в конструкторе. В классах JavaScript методы по умолчанию не связаны. То же самое относится к обработчикам событий React, определенным как методы класса. Обычно мы связываем их в конструкторе.
class Foo extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Click happened');
}
render() {
return <button onClick={this.handleClick}>Click Me</button>;
} }Синтаксис полей открытого класса. Если вы не хотите использовать подход с привязкой, можно использовать синтаксис полей открытого класса для правильной привязки обратных вызовов.
обработчик гармонии jsxClick = () => { console.log («это:», это) }
jsx harmony <button onClick={this.handleClick}> {'Click me'} </button>
Стрелочные функции в обратных вызовах. Вы можете использовать стрелочные функции непосредственно в обратных вызовах.
jsx harmony handleClick() {
console.log('Click happened');
} render() {
return <button onClick={() => this.handleClick()}>Click Me</button>;}
Примечание. Если обратный вызов передается в качестве реквизита дочерним компонентам, эти компоненты могут выполнить дополнительный повторный рендеринг. В таких случаях предпочтительнее использовать .bind() или синтаксис полей открытого класса с учетом производительности.
Вопрос № 5: Как передать параметр обработчику события или обратному вызову?
Вы можете использовать функцию стрелки, чтобы обойти обработчик событий и передать параметры:
jsx harmony <button onClick={() => this.handleClick(id)} />
This is an equivalent to calling `.bind`: ```jsx harmony <button onClick={this.handleClick.bind(this, id)} />
Apart from these two approaches, you can also pass arguments to a function which is defined as arrow function ```jsx harmony <button onClick={this.handleClick(id)} /> handleClick = (id) => () => {
console.log("Hello, your ticket number is", id)
};
Вопрос № 6: Что такое синтетические события в React?
SyntheticEvent — это кросс-браузерная оболочка собственного события браузера. Его API такой же, как и собственное событие браузера, включая stopPropagation() и preventDefault(), за исключением того, что события работают одинаково во всех браузерах.
Вопрос № 7: Что такое встроенные условные выражения?
Вы можете использовать либо операторы if, либо тернарные выражения, доступные в JS, для условного отображения выражений. Помимо этих подходов, вы также можете встроить любые выражения в JSX, заключив их в фигурные скобки, а затем логический оператор JS &&.
jsx harmony <h1>Hello!</h1>
{
messages.length > 0 && !isLogin?
<h2>
You have {messages.length} unread messages.
</h2>:
<h2>You don't have unread messages.</h2>
}
Вопрос № 8: Что такое «ключевой» реквизит и в чем польза от его использования в массивах элементов?
key — это специальный строковый атрибут, который должен включаться при создании массивов элементов. Свойство Key помогает React определить, какие элементы были изменены, добавлены или удалены.
Чаще всего в качестве ключа мы используем идентификатор из наших данных:
jsx harmony const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}
</li> )
When you don't have stable IDs for rendered items, you may use the item *index* as a *key* as a last resort:
jsx harmony
const todoItems = todos.map((todo, index) => <li key={index}> {todo.text}
</li> )
Примечание.
Использование индексов для ключей не рекомендуется, если порядок элементов может измениться. Это может отрицательно сказаться на производительности и вызвать проблемы с состоянием компонента.
Если вы извлекаете элемент списка как отдельный компонент, применяйте ключи к компоненту списка вместо тега li.
В консоли появится предупреждающее сообщение, если реквизит key отсутствует в элементах списка.
Вопрос № 9: Какая польза от рефов?
ref используется для возврата ссылки на элемент. Их следует избегать в большинстве случаев, однако они могут быть полезны, когда вам нужен прямой доступ к элементу DOM или экземпляру компонента.
Вопрос №10: Как создавать рефов?
Есть два подхода
Это недавно добавленный подход. Refs создаются с использованием React.createRef() метода и присоединяются к элементам React с помощью атрибута ref. Чтобы использовать refs во всем компоненте, просто назначьте ref свойству экземпляра в конструкторе.
jsx harmony class MyComponent extends React.Component { constructor(props) {
super(props) this.myRef = React.createRef()}
render() {
return <div ref={this.myRef} />
} }
Вы также можете использовать подход обратных вызовов ref независимо от версии React. Например, доступ к элементу ввода компонента панели поиска осуществляется следующим образом:
jsx harmony 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} />); }}
Вы также можете использовать ссылки в функциональных компонентах, используя замыкания. Примечание. Вы также можете использовать встроенные обратные вызовы ref, хотя это не рекомендуется.
