[ Реагировать ] Резюме вопросов интервью

React.js

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.
  • Поскольку дочерние элементы одинаковы, они не будут удаляться и обновляться, а только перемещаться, что повышает производительность.

2. Что такое повышение статуса?

3. Что такое компонента высшего порядка?

4. Что такое контролируемые и неконтролируемые компоненты?

5. Что такое чистая функция?

6. Что такое контекст?

7. Что такое Portal в реакции?

8. Каковы границы ошибок react16?

3. Жизненный цикл (реагировать17)

4. Общение

1. Общение отца и сына

2. Связь компонентов Brother

3. Общайтесь между несколькими слоями компонентов

4. Связь между произвольными компонентами

5. Отличия

1. В чем разница между React и Vue?

2. В чем разница между состоянием и реквизитом (компонента)?

3. В чем разница между презентационным компонентом и компонентом-контейнером?

4. В чем разница между элементом и компонентом в React?

5. В чем разница между createElement и cloneElement в React?

6. Маршрутные (маршрутные) статьи

7. Редукс статьи

8. Миксин (I)

9. НОЦ (II)

10. Реагирующие крючки (III)