1. Основы
1. Какова роль ключей в React?
- Ключи — это вспомогательные идентификаторы, которые React использует для отслеживания того, какие элементы списка были изменены, добавлены или удалены.
render () {
return (
<ul>
{this.state.todoItems.map(({item, key}) => {
return <li key={key}>{item}</li>
})}
</ul>
)
}
- React использует ключ для идентификации компонентов, который является идентификатором личности.React считает один и тот же ключ одним и тем же компонентом, поэтому последующие компоненты, соответствующие тому же ключу, не будут созданы.
- С помощью ключевого атрибута можно установить соответствующую связь с компонентом, и реакция решает, следует ли уничтожить и воссоздать компонент или обновить компонент в соответствии с ключом.
- Ключи те же.Если свойства компонента изменяются, реакция только обновит свойства, соответствующие компонентам, если нет изменений, он не будет обновляться.
- Если значение ключа отличается, реакция сначала уничтожает компонент (будет выполнен компонент componentWillUnmount компонента с состоянием), а затем воссоздает компонент (будут выполнены конструктор и componentWillUnmount компонента с состоянием).
2. Что происходит после вызова setState?
- После вызова функции setState в коде ReactВходящий объект параметра объединяется с текущим состоянием компонента, что затем запускает так называемый процесс согласования.
- После процесса согласования React строит дерево элементов React на основе нового состояния и приступает к повторному рендерингу всего пользовательского интерфейса относительно эффективным способом.
- После того, как React получит дерево элементов, ReactОн автоматически рассчитает разницу узлов между новым деревом и старым деревом., а затем настроить интерфейс в соответствии с разницейСвести к минимуму повторный рендеринг.
- В алгоритме вычисления разницы React может с относительной точностью узнать, что изменилось и как должно было измениться, что гарантируетОбновление по требованию, вместо повторного рендеринга всех из них.
3. Если setstate запускается несколько раз, сколько раз будет выполняться рендеринг?
- Множественное setState будетсливатьсяДля рендера, потому что setState не сразу меняет значение состояния, а помещает его вочередь задачНаконец, несколько setStates объединяются для одновременного обновления страницы.
- Таким образом, мы можем вызывать setState несколько раз в коде, каждый раз нам нужно обращать внимание только на текущее измененное поле.
[Дополнение] Как изменить данные в состоянии в реакции? Почему setState является асинхронным?
- Изменить данные через this.setState (параметр 1, параметр 2)
- this.setState — асинхронная функция.
- Параметр 1: данные, которые нужно изменить, являются объектом
- Параметр 2: Это функция обратного вызова, которая может использоваться для проверки того, что данные могут успешно изменяться, и она может получить структуру DOM после обновления данных в эквиваленте ComponentDIDMount.
- В дополнение к объекту первый параметр в this.setState также может быть записан как функция!, первое значение в функции — prevState, а второе значение — prePprops this.setState((prevState,prop)=>({}))
Почему рекомендуется, чтобы параметр, передаваемый в setState, был обратным вызовом, а не объектом?
- Поскольку обновления this.props и this.state могут быть асинхронными, на их значения нельзя полагаться для расчета следующего состояния
Почему setState является асинхронным? (см. 3)
- При пакетном выполнении состояния рендеринг DOM может быть ускорен, то есть в процессе выполнения необходимо объединить несколько состояний множества.
4. Что делает react после this.setState?
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
5. Кратко опишите, как работает виртуальный DOM (виртуальный DOM)? (4 и 5, чтобы выбрать один ответ)
- При изменении данных, таких как setState, компонент будет повторно отображаться, и весь пользовательский интерфейс будет повторно отображаться в виде виртуального дома.
- Затем соберите разницу, то есть сравните разницу между новым виртуальным домом и старым виртуальным домом.
- Наконец, различия в очереди различий, такие как добавление узлов, удаление узлов, перемещение узлов, обновляются до реального DOM.
5. Почему виртуальный дом повышает производительность?
- Виртуальный дом эквивалентен добавлению кеша между js и реальным домом, используя алгоритм dom diff, чтобы избежать ненужных операций с домом, тем самым повышая производительность.
- Представление структуры дерева DOM с использованием структуры объекта JavaScript
- Затем используйте это дерево для построения реального дерева DOM, вставьте его в документ и перестройте новое дерево объектов при изменении состояния.
- Затем сравните новое дерево со старым деревом, запишите разницу между двумя деревьями, примените разницу, записанную на шаге 2, к настоящему дереву DOM, построенному на шаге 1, и представление обновится.
6. Принцип реакции diff
- Древовидная структура декомпозируется иерархически, и сравниваются только элементы одного уровня.
- Добавьте уникальный ключевой атрибут в каждую ячейку структуры списка для удобства сравнения.
- React будет сопоставлять только компоненты одного и того же класса (где класс относится к имени компонента)
- Операции слияния, когда вызывается метод setState компонента, React помечает его как грязный.В конце каждого цикла событий React проверяет все компоненты, помеченные как грязные, для перерисовки.
- Выборочный рендеринг поддерева. Разработчики могут переопределить shouldComponentUpdate, чтобы улучшить производительность сравнения.
7. Какова роль ссылок в React? (подробная версия)
- Рефы — это дескрипторы, которые React дает нам для безопасного доступа к элементам DOM или экземплярам компонента.
- Он используется родительским компонентом для получения элемента dom дочернего компонента.
- Мы можем добавить атрибут ref к элементу, а затем принять дескриптор элемента в дереве DOM в функции обратного вызова, и это значение будет возвращено в качестве первого параметра функции обратного вызова.
class CustomForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}
- Поле ввода в приведенном выше коде содержит атрибут ref, функция обратного вызова, объявленная этим атрибутом, получит элемент DOM, соответствующий вводу, и мы привяжем его к указателю this для использования в других функциях класса.
- Также стоит отметить, что ссылки не являются исключительными для компонентов класса, функциональные компоненты также могут использовать замыкания для временного хранения своих значений.
function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}
[подробная понятная версия (рекомендуется)]
1. ref установлен на обычную строку
<button ref="myBtn"></button>
- даватьэлементОпределите атрибут ref, и тогда вы сможете получить настоящий объект DOM через this.refs.myBtn.
- даватькомпонентыОпределите атрибут ref, и тогда вы сможете получить экземпляр объекта этого компонента через this.refs.myBtn
2. ref настроен на функцию стрелки
<button ref="{ (sl) => { this.myBtn = sl } }"></button>
- даватьэлементОпределите атрибут ref, и тогда вы сможете получить настоящий DOM-объект через this.myBtn.
- даватькомпонентыОпределите атрибут ref, и тогда вы сможете получить экземпляр объекта этого компонента через this.myBtn
8. Какие есть способы сборки компонентов в React?
- Функциональный компонент кажется просто функцией, возвращаемым значением которой является структура DOM, но за ней стоит идея компонентов без состояния.
- В функциональных компонентах вы не можете использовать ни состояние, ни методы жизненного цикла компонентов, которые определяют, что все функциональные компоненты являются презентационными компонентами, получающими реквизиты, отображающими DOM и не обращающими внимания на другую логику.
- В функциональном компоненте этого нет
- Функциональные компоненты легче понять. Когда вы видите функциональный компонент, вы знаете, что его функция заключается только в получении свойств и отображении страницы, он не выполняет логическую обработку, которая не имеет ничего общего с пользовательским интерфейсом, это просточистая функция. Неважно, насколько сложна структура DOM, которую он возвращает.
9. this обработчика событий указывает на проблему
[Дополнение] Как обработчики событий передают параметры?
- Параметры можно передавать с помощью bind
- Передайте обработчик события стрелочной функции, а затем вызовите метод, который я хочу вызвать в стрелочной функции.В это время я уже являюсь обычной функцией.
[Уведомление! ! ! ]
- Если обработчику события переданы дополнительные параметры, объект события будет помещен в последний
10.
2. Сто тысяч почему
1. Почему лучше не использовать индекс для ключа циклического рендеринга списка?
- Например
Значение массива до изменения — [1,2,3,4], а ключ — соответствующий индекс: 0, 1, 2, 3 Значение массива после изменения равно [4,3,2,1], а индекс, соответствующий ключу, также: 0, 1, 2, 3
- Затем алгоритм diff находит значение ключа = 0 в массиве до изменения, равное 1, и значение ключа = 0, найденное в массиве после изменения, равно 4
- Повторно удалить и обновить, потому что дочерние элементы отличаются
- Но если добавляется уникальный ключ, следующим образом:
Значение массива до изменения — [1,2,3,4], а ключ — соответствующий индекс: id0, id1, id2, id3
Значение массива после изменения равно [4,3,2,1], и нижний индекс, соответствующий ключу, тоже: id3, id2, id1, id0
- Затем алгоритм сравнения находит значение key=id0 в массиве до изменения, равное 1, и значение key=id0, найденное в массиве после изменения, также равно 1.
- Поскольку дочерние элементы одинаковы, они не будут удаляться и обновляться, а только перемещаться, что повышает производительность.