Немного знаний о React

react.jpg

скажи это прямо

Резюме реагировать думал делать последние полгода, каждый (во) вид (тай) первоначальный (лань) причина (ле), да мне лень. Когда я пошел на медосмотр в прошлом месяце, я находился под различным психологическим давлением, когда я проверял отчет о медицинском осмотре, и, как я предполагал, у меня были различные профессиональные заболевания и слабое здоровье. Так что теперь постарайтесь рано ложиться спать и рано вставать, а затем рано вставать и успеть подвести итоги. Вещи, которые были у меня на уме, снова всплыли. Я надеюсь, что это резюме хоть немного поможет вам в вашем ежедневном развитии или на собеседовании при смене работы.В любом случае, оно очень полезно для меня, так что я могу извлечь уроки из прошлого! ! !

Он сказал, что куча дерьма, это резюме может быть, вероятно, может быть подвезти в вопросе и форме ответа, которую я надеюсь, что вы все сможете сломаться, как проход через карту как тоже! Давайте начнем ! Поехали!

[1] Есть несколько формулировок компонентов реакции? Кто они такие?

① Функционально определенные компоненты без сохранения состояния (Stateless Functional)

• Более эффективная производительность и более простой код
• Без государства, то есть без гражданства
• Нет необходимости управлять/поддерживать жизненный цикл компонентов
• Чистая функция, одни и те же реквизиты получат тот же результат рендеринга пользовательского интерфейса.

    function List (props) {
        return <div>我是一个函数式定义的react组件</div>
    }

②Сборка ES5 определена способом React.createClass(От этого метода отказались, и официальная документация рекомендует использовать ① и ③)
③ Компоненты, определенные ES6 (компоненты класса)

    class List extends React.Component {
        render() {
            return <div>我是一个es6方式定义的react组件</div>
        }
    }

Официальный документ довольно загадочен.Давайте сначала скажем нам, что эффект рендеринга пользовательского интерфейса методов ① и ③ одинаков, но «У классов есть некоторые дополнительные функции...» Метод класса больше, чем функциональный метод. другое место . Итак, вот в чем проблема.Какие еще разные?Возможно, вы нашли что-то другое,с государством или без,С жизненным циклом или без него...Ждать

【2】Итак, когда следует использовать Stateless Functional, а когда — Class?

Рекомендуется использовать Функциональный.Если вы можете использовать Функциональный, вы можете использовать Функциональный.
Еще одно слово. Класс используется для созданияжизненный цикл состоянияа такжеВзаимодействие с пользователемсложные компоненты, и когда компонент используется толькочистый дисплейилиреквизиты передаются при рендеринге (отображении), Помимо всего прочего, пожалуйста, быстро создавайте компоненты с помощью Stateless Functional.

【3】Каковы преимущества и недостатки Stateless Functional

• преимущество

1. Синтаксис/код более краток
2. Небольшой объем памяти (без свойств, таких как свойства), лучшая производительность при первом рендеринге.
3. Нет необходимости управлять/поддерживать жизненный цикл компонентов
4. Чистая функция, одни и те же реквизиты получат тот же результат рендеринга пользовательского интерфейса.
5. Юнит-тесты делать проще. Поскольку логика перемещена за пределы уровня представления, модульному тестированию не нужно ничего отображать, и оно может сосредоточиться на одной логике.

• недостаток

1. Нет функции жизненного цикла. Для функции не должно быть жизненного цикла. Конечно, мы можем использовать компоненты более высокого порядка для реализации жизненного цикла.
2. Нет этого. В Stateless это не определено.

【4】Сколько способов есть у React.Component для привязки методов?

    //第一种方法:构造函数中绑定
    
    class List extends React.Component {
        constructor(props) {
            super(props)
            this.onClickList = this.onClickList.bind(this)
        }
        
        onClickList() {
            console.log('我被点了')
        }
        
        render() {
            return <div onClick={this.onClickList}>点我点我点我</div>
        }
        
    }
    
    //第二种方法: 在render()行内事件使用bind来绑定
    
    class List extends React.Component {
        
        onClickList() {
            console.log('我被点了')
        }
        
        render() {
            return <div onClick={this.onClickList.bind(this)}>点我点我点我</div>
        }
        
    }
    
    //第三种方法: 使用箭头函数 => 
    
    class List extends React.Component {
        
        onClickList = () => {
            console.log('我被点了')
        }
        
        render() {
            return <div onClick={this.onClickList}>点我点我点我</div>
        }
        
    }
    
    //第四种，当然，你要在render()行内使用箭头函数也行
    
    class List extends React.Component {
        
        onClickList() {
            console.log('我被点了')
        }
        
        render() {
            return <div onClick={() => this.onClickList()}>点我点我点我</div>
        }
        
    }

Я предпочитаю использовать его для ежедневного развитиястрелочная функцияметод, из-за лени объем кода меньше, чем первый метод. Конечно, официально сказано, что создание функций в рендере (втором и четвертом) может иметь проблемы с производительностью. но часто требуетпередать параметрыилиПерезвонитевремя, нужно использовать. Например:

    <button onClick={() => this.handleClick(id)} />
    <button onClick={this.handleClick.bind(this, id)} />

【5】Смарт-компонент против кукольного компонента? Или контейнерные компоненты против презентационных компонентов?

Смарт-компоненты и Dumb-компоненты должны быть знакомы друзьям, разрабатывавшим React-проекты.

Тупой компонент, по названию можно сказать, что такого рода компонент очень тупой, потому что кукольный компонент заботится только об одном — рендеринге в соответствии с пропсами.
а такжеУмные компонентыОн очень умен, специализируется на логике, связанной с данными, имеет дело с различными данными, ajax получает данные, определяет соответствующие функции для манипулирования данными, а затем напрямую передает эти данные и функции конкретным компонентам реализации (тупым компонентам). Итак, согласноТребуется ли высокая степень повторного использования, разделите компоненты на Dumb и Smart компоненты.

Совет 1: Смарт-компоненты не очень пригодны для повторного использования или даже не нуждаются в повторном использовании.Глупые компоненты часто очень многоразовые, но Глупые компоненты не должны привносить слишком много в Смарт-компоненты, потому что слишком много логики приведет к дублированию.Сниженное удобство использования. Выбор между ними необходимо учитывать при проектировании компонентов.

Совет 2: Подкомпоненты тупых компонентов также должны быть тупыми компонентами.

О жизненном цикле React

Что касается жизненного цикла, мне всегда нравится спрашивать что-то связанное во время интервью, и если вы хотите понять код реакции, написанный другими, также очень важно иметь глубокое понимание жизненного цикла реакции. Пока не смотрите вниз, закройте глаза и подумайте, что вы знаете о жизненном цикле реакции?

...

...

...

...

...

...

liftcycle.jpg

хорошо, вы должны сделать думать об этом. Существует ли следующий процесс? (На картинке классическая схема крепления компонентов из интернета)

Методы жизненного цикла реагирующих компонентов можно разделить на четыре фазы: инициализация, фаза монтирования (Mounting), фаза обновления (Updating) и фаза размонтирования (Unmounting).

Далее, давайте взглянем на маленькие точки знания жизненного цикла.

【6】Монтаж -- следующие методы будут вызываться после того, как экземпляр компонента будет создан и вставлен в DOM.

• constructor()
• componentWillMount()
• render()
• componentDidMount()

【7】Обновление — изменения свойств или состояния приведут к обновлениям. Следующие методы вызываются при повторном рендеринге компонента.

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

【8】Размонтирование — этот метод будет вызываться при удалении компонента из DOM.

• componentWillUnmount()

Ниже приводится краткое введение в несколько жизненных циклов.

【9】1. componentWillMount

componentWillMout() вызывается перед монтированием компонента (mount).

Относительно использования setState в componentWillMount:можно использовать. Поскольку он вызывается перед методом рендеринга, setState также не вызывает повторного рендеринга.

【10】2. componentDidMount

componentDidMount() выполняется сразу после монтирования компонента

Подходит к этому крючку:

• ajax-запрос
• Операции, которые инициализируют узлы DOM
• Установите таймер setTimeout или setInterval (теплое напоминание, не забудьте отключить эти таймеры в componentWillUnmount)

Относительно использования setState в componentDidMount:можно использовать. Но часто приводит к проблемам с производительностью. Конечно, вы должны получить размер и положение узла DOM перед рендерингом, его можно использовать.

эпизод. Вопрос из интервью: в каком жизненном цикле должен находиться запрос ajax? Почему?

【11】3. componentWillReceiveProps(nextProps)

componentWillReceiveProps будет всмонтированныйВызывается до того, как смонтированный компонент получит новые реквизиты. такИнициализировать монтирование реквизитадаНе будетзапустить эту функцию.непосредственно setStateтакжеНе будетзапустить эту функцию.

Подходит к этому крючку:

• Обновите значение состояния (например, сброс)
• Сравните this.props и nextProps

Особенно важно отметить, что когда родительский компонент вызывает повторную визуализацию компонента, даже если свойства не изменились, react может выполнить функцию ловушки. Итак, если вы действительно хотите обрабатывать изменения в реквизитах, не забудьте сравнить текущие реквизиты с nextProps.

Что касается использования setState в componentWillReceiveProps:можно использовать.

【12】4. shouldComponentUpdate(nextProps, nextState)

ShouldComponentUpdate будет вызываться при изменении состояния или реквизита и перед рендерингом.Короче говоря, эта функция ловушки используется, чтобы сообщить React, нужно ли повторно рендерить компонент.

shouldComponentUpdate по умолчанию возвращает true, если возвращает falsecomponentWillUpdate,render,componentDidUpdateне будет называться. Имейте в виду, что при возврате false это не предотвращает повторный рендеринг дочерних компонентов при изменении их состояния.

shouldComponentUpdate не вызывается в двух случаях:

• Инициализация компонента
• Дело о forceUpdate

Все должны быть shouldComponentUpdate.Еще один момент знаний связан с оптимизацией производительности реагирующих компонентов. да. Вы можете сравнить this.state с nextState, this.props с nextProps, чтобы определить возврат false и сообщить, что не нужно обновлять компонент. Если вы выполняете только поверхностное сравнение данных, вместо этого вы можете использовать PureComponent (глубоко вложенные данные PureComponent ничего не может сделать)

React не рекомендует делать глубокие сравнения или использовать JSON.stringify() в shouldComponentUpdate, поскольку это снижает производительность.

【13】5. componentWillUpdate(nextProps, nextState)

Вызывается перед повторным рендерингом после обновления состояния или свойств.

Примечание. Не используйте this.setState в componentWillUpdate или redux для отправки действия (отправки действия Redux), потому что обновление компонента будет запущено до componentWillUpdate. Если вам нужно выполнить вышеуказанные операции, вы можете сделать это в componentWillReceiveProps.

【14】6. componentDidUpdate(prevProps, prevState)

componentDidUpdate вызывается сразу после обновления компонента.

В этой функции хука вы можете:

• Манипулировать DOM
• инициировать сетевой запрос

【15】7. componentWillUnmount

Вызывается перед размонтированием и уничтожением компонента.

В componentWillUnmount вы можете выполнить любой метод, который необходимо очистить. Например:

• очистить таймер
• Отключить сетевой запрос
• отвязать дом событие
• так далее

[16] Таблица жизненного цикла

Жизненный цикл	Можно ли вызвать this.setState	Выполнять ли инициализацию
componentWillMount	Могу	да
componentDidMount	Могу	да
componentWillReceiveProps	Могу	нет
shouldComponentUpdate	Не можем	нет
componentWillUpdate	Не можем	нет
componentDidUpdate	Могу	нет
componentWillUnmount	Не можем	нет

Обратите особое внимание на:
①componentWillMount и componentWillReceiveProps вызывают setState без повторного рендеринга (повторного рендеринга)
②componentDidUpdate, вы не можете напрямую использовать this.setState, иначе он переполнит стек. Вам нужно оценить prevProps, this.props, prevState и this.state перед выполнением this.setState. Так же, как цикл while не может застрять в бесконечном цикле.

Отлично. Длинный разговор о жизненном цикле реакции. Без причины, просто потому что это очень важно. Будь то собеседования, ежедневная разработка или чтение и понимание кода других людей, это очень важно. Какая фаза запускает какой жизненный цикл, что можно делать, а что нельзя, что более подходит, а что нет. Приходить! Как только это будет сделано, давайте двигаться дальше!

......
.....
....
...
..
.
Спасибо, что вы есть, давайте копать дальше....
.
..
...
....
.....
......

【17】Разница между props и state

1. «Props» — чужой, props реализует передачу состояния между компонентами, props — передача данных от родительского компонента к дочернему; «state» — ваше собственное, состояние можно определить только внутри компонента, и определить собственное состояние компонента.
2. props неизменяемы, состояние можно изменить через this.setState

【18】 реквизит против состояния

?	props	state
Можно ли получить начальное значение из родительского компонента?	Yes	Yes
Может ли он быть изменен родительским компонентом?	Yes	No
Может ли внутренний (текущий) компонент установить значение по умолчанию?	Yes	Yes
Можно ли изменить внутренние (текущие) компоненты?	No	Yes
Можно ли установить начальное значение для дочернего компонента?	Yes	Yes
Можно ли изменить дочерние компоненты?	Yes	No

【19】что такое jsx?

Когда я впервые столкнулся с детской обувью React, когда я увидел jsx, моя первая реакция была «уродливой». Честно говоря, я тоже сначала отказывался писать jsx, но я не ожидал, что синтаксис jsx и логика, лежащие в его основе, упростят создание реактивных компонентов. Так что же такое jsx? jsx — это расширение синтаксиса JavaScript, очень похожее на XML. Грубо говоря, jsx — это не продвинутая технология, можно сказать, что это просто относительно продвинутый, но интуитивно понятный синтаксический сахар. Это очень полезно, но не обязательно, React без jsx будет работать нормально: до тех пор, пока вы будете счастливы создавать эти виртуальные элементы DOM с кодом JavaScript (но это очень громоздко).

jsx преимущества:

• Более быстрое выполнение, потому что оно оптимизировано после компиляции в код JavaScript.
• Он типобезопасен, и во время компиляции могут быть обнаружены ошибки.
• Писать шаблоны проще и быстрее
• Более интуитивно понятный и легко читаемый

Взгляните на следующий код:
1. Когда мы описываем кнопку с помощью HTML, вы обнаружите, что элемент DOM содержит только три части информации:Имя тега, атрибут, дочерний элемент.

    <div id="btn-wrap">
        <button class="btn">click</button>
    </div>

2. Если мы используем js для описания, мы можем передать объект JSON и по-прежнему включать элементИмя тега, атрибут, дочерний элемент

    {
        type: 'div',
        props: { id: 'btn-wrap' },
        children: {
            type: 'button',
            props: { className: 'btn' },
            children: 'click'
        }
    }

Если вы посмотрите внимательно, вы найдете, что HTML и JS описывают кнопку, и их соответствующая структура практически одинакова, то есть интерфейс пользовательского интерфейса, построенный HTML, может быть описан JS. Вы найдете, что написание кнопки в HTML намного лучше, чем писать в JS, и структура более понятна. Но если вы решите использовать JS для записи, я не буду объектировать. Приходить! Попробуйте написать тентоуровневый вложенный Div первым?

React предоставляет синтаксический сахар jsx, который напрямую добавляет синтаксис html в код JavaScript, а затем преобразует его в JavaScript через компилятор (babel) и выполняет в браузере.

Мы модифицируем код src/index.js следующим образом.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class HappyReact extends Component {
  render() {
    return (
        <div>
            <h1 id="title">happy react !</h1>
        </div>
    )
  }
}

ReactDOM.render(<HappyReact />, document.getElementById('root'));

В этот момент вы увидите, что браузер страницы автоматически обновляется, и на странице отображаются слова «счастливый ответ!».

Если приведенный выше код скомпилирован, он станет:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class HappyReact extends Component {
  render() {
    return (
      React.createElement(
        'div',
        null,
        React.createElement(
            'h1',
            { id: 'title' },
            'happy react !'
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(
        HappyReact,
        null
    ),
    document.getElementById('root')
);

Результаты рендеринга двух фрагментов кода до и после компиляции одинаковы, вы должны были найти код jsxБолее интуитивно понятный и простой в обслуживанииНу давай же!

Хотя html, который вы видите, написан в коде js, вы всегда должны помнить, что «jsx на самом деле в концеОбъект JavaScript". React использует этот объект для создания или обновления виртуальных элементов и, наконец, для управления виртуальным DOM (виртуальным DOM)

Объектные элементы JSX можно понимать как взаимно однозначное соответствие с реальными элементами, а их создание, обновление и удаление выполняются в памяти. Он не будет напрямую отображаться в реальном DOM.Единственная операция всего приложения реагирования на DOM:

    ReactDOM.render(<HappyReact />, document.getElementById('root'));

[20] Вы, наверное, знаете, что такое jsx. Нам нужно потратить некоторое время на изучение/понимание/вспоминание того, как написан jsx.

1. Функция рендеринга может возвращать только один корневой узел, который может быть обернут только одной меткой.
2. Имена компонентов пишутся с заглавной буквы, а теги HTML — строчными.
3. Если дочерних узлов нет, вы можете использовать самозакрывающийся
4. комментарии jsx {/* */}
5. Выражение свойства JavaScript, значение свойства равно {}
6. Тернарное выражение
7. Рекурсия массива (Список рендеринга) Карта
8. Два специальных атрибута class, for Поскольку class, for являются ключевыми словами в JavaScript. Поэтому требуется преобразование из первых рук. Другие атрибуты могут быть добавлены точно так же, как html.
9. стиль написания jsx
10. Обработка событий с использованием встроенного верблюжьего регистра, например onClick, onChange
11. Экранирование HTML --> опасноSetInnerHTML={{__html: '
    hhh
    '}}
12. Используйте оператор ...spread в es6. Например

    const helloProps = {
        value: 'hello',
        show: true,
    }
 <HelloWorld ...helloProps />

1. Если значение свойства истинно, напишите имя свойства прямо здесь. Например

    <Button disabled={true} /> 
    可以写成
    <Button disabled /> 

1. false, null, undefined, true являются допустимым дочерним содержимым, но не будут отображаться. Следующие выражения дают тот же результат:

    <div />
    <div></div>
    <div>{false}</div>
    <div>{null}</div>
    <div>{undefined}</div>
    <div>{true}</div>

15 ...

...ну, может быть, я так много думал какое-то время.

【двадцать один】Что такое рефы? (функция refs, как реализовать?)

react предоставляет специальное свойство, которое позволяет вам напрямую обращаться к элементу DOM или экземпляру компонента. ref может возвращать строку (string) или функцию обратного вызова (cb), которая будет выполняться сразу после создания или уничтожения компонента.

Строковые ссылки могут быть удалены в будущих версиях, поэтому вместо них рекомендуются обратные вызовы.

    class TextInput extends Component {
        componentDidMount() {
            this.textInput.focus()
        }
        
        render() {
            return (
                <input ref={(input) => this.textInpuf = input} />
            )
        }
    }

Официально рекомендуется несколько хороших способов использования рефов:

• Управление фокусом, выделением текста или воспроизведением мультимедиа
• Запуск важных анимаций
• Интеграция сторонних библиотек DOM

Конечно, старайтесь не использовать ссылки, если можете, и не слишком полагайтесь на ссылки для решения проблем.

【двадцать два】Что такое контролируемый компонент и что такое неконтролируемый компонент

В реактивной форме компоненты можно разделить на две категории: контролируемые компоненты и неконтролируемые компоненты.

• Управляемые компоненты
  Мы просто понимаем, что (тег формы) с установленным значением является контролируемым компонентом.
  Когда мы устанавливаем значение «привет» (определенное значение), и когда значение отображается на странице, мы вводим любое значение в отображаемый элемент, и это не работает. Потому что реакция присвоила значение «привет». Чтобы изменить значение, его также необходимо реализовать с помощью onChange и setState.

Конечно, вы также можете посмотреть документацию на официальном веб-сайте о том, как определить контролируемые компоненты.

В HTML такие элементы формы, как , и <select>, обычно сохраняют свое собственное состояние и обновляются в зависимости от ввода пользователя. В React изменяемое состояние обычно хранится в свойстве состояния компонента и может быть обновлено только с помощью setState().</select>

Мы можем сделать это, сделав состояние React "принцип единого источника истины«Объединение этих двух форм. Реагистрационная форма и компоненты рендеринга также могут контролировать поведение после ввода пользователя. Эта форма, которая контролируется значением входного элемента входного элемента, называемого« управляемыми компонентами ».

Нечего сказать, давай, код:

    class App extends Component {
        constructor(props) {
            super(props)
            this.state = { value: 'hi' }
        }
        
        onInputChange = (e) => {
            this.setState({ value: e.target.value })
        }
        
        render() {
            const { value } = this.state
            return (
                <input value={value} onChange={this.onInputChange} />
            )
        }
    }

React официально рекомендует использовать компоненты контролируемой формы. Подводя итог вышеизложенному, обновление кода контролируемого компонента представляет собой процесс состояния:

1. Инициализируйте состояние, чтобы установить значение формы по умолчанию, например, this.state = { value: 'hi' }
2. Всякий раз, когда значение формы изменяется, вызывается событие onChange
3. Получить измененное состояние через объект e, например e.target.value
4. Обновите значение приложения через setState и запустите представление для повторного рендеринга и, наконец, завершите обновление компонента формы.

    // 第四步 setState 我们还可以对表单值进行直接修改或者验证
    // 受控组件支持即时字段验证，允许您有条件地禁用/启用按钮，强制输入格式
    onInputChange = (e) => {
        this.setState({ value: e.target.value.substring(0, 140).toUpperCase() })
    }

Особое внимание! ! ! ! Если значение не определено, оно становится неуправляемым компонентом.

• неконтролируемые компоненты
  После понимания контролируемого компонента вы должны знать, что неконтролируемый компонент — это компонент формы без атрибута value (переключатель/кнопка проверки установлен). Начальное значение компонента можно установить, задав параметры defalutValue / defalutChecked.

Чтобы быть более подробным, defalutValue / defalutChecked будет отображаться только один раз и не будет работать при последующих отображениях.

Поскольку он не контролируется состоянием/реквизитом, нам нужно добавить к нему ссылку, чтобы получить доступ к визуализируемому элементу DOM, чтобы, наконец, получить измененное значение/проверить. Я до сих пор помню, как в предложении refs говорилось: «Если вы можете использовать refs, постарайтесь не использовать refs». Поэтому официальный представитель React по-прежнему рекомендует использовать контролируемые компоненты.

......
.....
....
...
..
.
Надоело смотреть, давайте немного сэкономим и вернемся завтра. . .
.
..
...
....
.....
......

О setState

setState должен быть знаком каждому другу, который использовал реакцию. Есть также несколько слов, непосредственно связанных с ним: «изменить состояние», «асинхронно», «перерендерить»…

Приходите к вопросу, чтобы потренировать руки? Хотя обычно я такой **код не пишу, но кто знает, будет ли интервью? Добро пожаловать, чтобы написать свой ответ!

    ...
    this.state = { count : 0 }
    ...
    componentDidMount() {
        this.setState({ count: this.state.count + 1 }, () => {
            console.log(`apple...${this.state.count}`)
        })
        
        console.log(`orange...${this.state.count}`)
        
        setTimeout(() => {
            console.log(`lemen...${this.state.count}`)

            this.setState({ count: this.state.count + 1 }, () => {
                console.log(`banana...${this.state.count}`)
            })
            
            setTimeout(() => {
                console.log(`grape...${this.state.count}`)
            }, 0)
            
            this.setState({ count: this.state.count + 1 }, () => {
                console.log(`strawberry...${this.state.count}`)
            })
            
            console.log(`pear...${this.state.count}`)
        }, 0)
    }

【двадцать три】Вот как официальное определение setState

очереди setState()Изменить состояние компонентаи обновить состояние, чтобы сообщить React, что этот компонент и его дочерние элементы нуждаютсяперерисовать. Это основной метод, используемый обработчиками событий ++response++ и ++serverresponse++ для обновления пользовательского интерфейса.

Я помню, когда я впервые научился реагировать, в документации не было четко сказано, что вызов setState является асинхронным, было просто сказано, что «синхронность не гарантируется». Но недавно я пошел посмотретьофициальная документация, в документации сказано, что вызов setState теперь асинхронный.

【двадцать четыре】Что на самом деле происходит, когда вызывается setState()?

Проще говоря, это изменение состояния и обновление пользовательского интерфейса.
сложный, т.Как объединить новое состояние, как обновить пользовательский интерфейс в соответствии с новым состоянием

【25】Каков второй параметр setState()? Что оно делает?

Второй параметр setState — необязательная функция обратного вызова. Эта функция обратного вызова будет выполнена после завершения setState и повторной визуализации компонента. В этой функции обратного вызова вы можете получить значение только что обновленного состояния. Но такую ​​логику официально рекомендуется использовать componentDidUpdate.

【26】Как получить измененное значение сразу после setState

1. Второй параметр setState, полученный из функции обратного вызова
2. использовать setTimeout

    setTimeout(() => {
        this.setState({ value: 'hhh' })
        
        console.log(this.state.value) // hhh
    }, 0)
    // 看到这里最开始的那道练手题，是不是已经可以迎刃而解了。哈哈哈哈哈

【27】Есть два способа передать первый параметр setState: 1. Объект 2. Функция В чем разница между этими двумя способами записи?

Например

    ...
    this.state = { text : '这是一个栗子' }
    ...

    // 使用传递对象的写法
    handleClick = () => {
        this.setState({ text: this.state.text + '111' })
        this.setState({ text: this.state.text + '222' })
    }
    
    // 使用传递函数的写法
    handleClick = () => {
        this.setState((prevState) => {
            return { text: prevState.text + '111' }
        })
        this.setState((prevState) => {
            return { text: prevState.text + '222' }
        })
    }

    render() {
        return <div onClick={this.handleClick}>{this.state.text}</div>
    }

Результаты, полученные двумя методами передачи, различны.

• Передать объект => this.state.text => 'Это каштан 222'
• Передаточная функция => this.state.text => 'Это каштан 111222'

Чтобы повысить производительность, setState выполняет пакетное изменение состояния и выполняет унифицированный рендеринг DOM. В этом процессе пакетного выполнения, если вы несколько раз передаете кучу объектов, он будет выполнять некоторые операции слияния или объединения объектов, такие как Object.assign({}, { a: '111' }, { a : '222' } ). Если значение ключа такое же, более позднее значение перезапишет предыдущее значение. Но передайте функцию несколько раз, каждый раз, когда React выполняет функцию из setState и обновляет ваше состояние, передавая обновленное состояние. Это позволяет функции setState устанавливать состояние на основе предыдущего состояния.

Будьте осторожны при использовании setState! ! !

1. setState может вызвать ненужный рендеринг (shouldComponentUpdate/PureComponent)
2. setState не может полностью контролировать состояние всех компонентов в приложении (Redux/Mbox)

[28] Что такое компонент высшего порядка и как он используется?

Компонент более высокого порядка – это функция. Компонент более высокого порядка – это функция. Компонент более высокого порядка – это функция. не является компонентом. С точки зрения непрофессионала, он принимает компонент React в качестве входных данных и выводит новую расширенную версию компонента React.

Чтобы привести пример, который может быть неуместным, каждый может играть в King Pesticide, а играть в Blue Dad или Red Dad — это улучшенная версия самого героя. Поедание синего папочки не повлияет на то, что вы едите красную папочку, и не повлияет на то, какое оборудование вы покупаете и т. д.

Что ж, тогда определим одну из простейших компонент высокого порядка

    const MyContainer = (WrappedComponent) => {
        return class NewComponent extend Component {
            render() {
                return <WrappedComponent />
            }
        }
    }

Передайте класс компонента в качестве параметра функции компонента более высокого порядка.

    class Welcome extends Component {
        ...
    }
    
    export default MyContainer(Welcome)

Или используйте декораторы ES7

    @MyContainer
    class Welcome extends Component {
        ...
    }
    export default Welcome

Конфигурация декоратора в приложении create-реагировать:

1. npm run eject
2. npm install --save-dev plugin-transform-decorators-legacy
3. Найдите элемент «Вавилон» в Package.json, добавьте «плагины»: ["Transform-Decorators-Legacy]

При оптимизации кода (извлечении общей логики) или разделении компонентов мы можем рассмотреть возможность использования компонентов более высокого порядка, что поможет повысить гибкость нашего кода и возможность повторного использования логики.

【29】Что такое чистый компонент? В чем разница между PureComponent и shouldComponentUpdate?

PureComponentЭто то же самое, что и Component, просто замените унаследованный класс с Component на PureComponent. PureComponent изменяет shouldComponentUpdate, который автоматически проверяет, был ли компонент перерендерен. То есть функция рендеринга будет вызываться только тогда, когда PureComponent обнаружит изменения в пропсах или состоянии, поэтому никаких дополнительных проверок писать не нужно. Это также может сократить процесс генерации и сравнения Virtual DOM для достижения цели повышения производительности.

Уведомление:В PureComponent shouldComponentUpdate выполняет только поверхностное сравнение (состояние, структура объекта реквизита проста, можно понять, что объект имеет только один слой), и при сравнении сложных и глубоко вложенных данных будут отклонения. Для глубоких сравнений вы можете выполнить проверку глубокого сравнения в shouldComponentUpdate, чтобы определить, отображается ли компонент, но вы должны знать, что глубокие сравнения очень дороги. Конечно, вы, вероятно, знаете, как использовать Immutable для быстрого сравнения вложенных данных.

【30】Что делает shouldComponentUpdate и почему это важно?

shouldComponentUpdate позволяет намвручнуюЧтобы определить, следует ли обновлять компонент, установка разумного возвращаемого значения функции в соответствии со сценарием применения компонента может помочь нам избежать ненужных обновлений.

【31】Почему мы используем специальный ключ prop в компонентах, сгенерированных циклом?

    // list = [{ id: 0, name: 'xiaoming', age: 18 }, { id: 1, name: 'xiaohong', age: 16 }]
    render() {
        return (
            <ul>
                list.map((item, index) => {
                    return <li key={item.id}>{item.name} - {item.age}</li>
                })
            </ul>
        )
    }

Если вы не добавите ключевое свойство, будет выдано предупреждение: Предупреждение: каждый дочерний элемент в массиве или итераторе должен иметь уникальное свойство "ключ"...

Ключи — это то, что React использует для отслеживания того, какие элементы находятся в списке.модифицированный,ДобавленилиудаленныйДополнительный идентификатор
Ключ необходим, потому что реакция очень эффективна, она будет использовать значение ключа элемента, чтобы определить, создан ли элемент заново или перемещен (заменен местами), тем самым уменьшая ненужный повторный рендеринг элемента. Более интуитивно, React ленив и повторно использует элементы, которые можно использовать повторно, и не хочет воссоздавать новые элементы.

Итак, что, если приведенный выше код key={index} ? Вы обнаружите, что предупреждения не будет, но эффективность этого очень-очень низкая.

Взгляните на следующие примеры:

    // list = [a, b, c, d]
    <div>
        list.map((item, index) => <div key={index}>{item}</div>)
    </div>

После завершения рендеринга наш abcd соответствует 0123 соответственно.

    a -> 0
    b -> 1
    c -> 2
    d -> 3

Предположим, мы только что изменили позицию d на первый список = [d, a, b, c]

    a -> 1
    b -> 2
    c -> 3
    d -> 0

До и после преобразования вы должны обнаружить, что ключ, соответствующий abcd, изменился, так что реагирующий виртуальный DOM будет повторно отображать обновление независимо от того, существует ли тот же элемент. Следовательно, нам нужно убедиться, что ключ элемента уникален среди его родственных элементов.Значение этого ключа может напрямую возвращать идентификатор фоновых данных, потому что идентификатор фона уникален.

Помните, что в реальной разработке не используйте индекс счетчика циклов напрямую, это немного лжет самому себе. Я просто использовал реакцию, а также индекс...

Связь между реагирующими компонентами

Связь между компонентами также является клише. В интервью часто упоминаются не только фактические разработки, но и оценки.

Коммуникации между компонентами можно условно разделить на следующие типы:

1. Родительский компонент взаимодействует с дочерним компонентом
2. Дочерний компонент взаимодействует с родительским компонентом
3. Связь между родственными компонентами

【32】Родительский компонент взаимодействует с дочерним компонентом

В React данные передаются в одну сторону, родительский компонент может передать props дочернему компоненту, а дочерний компонент сделает соответствующую обработку после получения props, так родительский компонент общается с дочерним компонентом.

    class Parent extends Component {
    
        constructor(props) {
            super(props)
            this.state = { wishes: '2018新年快乐！' }
        }
        
        render() {
            return (
                <Child title={this.state.wishes} />
            )
        }
    }
    
    class Child extends Component {
        
        render() {
            return (
                <h3>{this.props.title}</h3>
            )
        }
    }

【33】Дочерний компонент взаимодействует с родительским компонентом

Дочерний компонент передает данные (связь) родительскому компоненту, передавая функцию через реквизиты, дочерний компонент вызывает эту функцию и передает данные, которые дочерний компонент должен передать в качестве параметра родительскому компоненту.

    class Parent extends Component {
    
        constructor(props) {
            super(props)
            this.state = { wishes: '2018新年快乐！' }
        }
    
        onSend = (msg) => {
            this.setState({ wishes: msg })
        }
        
        render() {
            return (
                <Child onSend={this.onSend} title={this.state.wishes} />
            )
        }
    }
    
    class Child extends Component {
    
        onChildSend = () => {
            this.props.onSend('谢谢你的祝福！')
        }
        
        render() {
            return (
                <h3 onClick={this.onChildSend}>{this.props.title}</h3>
            )
        }
    }

【34】Связь между родственными компонентами

Передачу данных между двумя родственными компонентами мы можем осуществить через их общий родительский компонент. Ребенок1 передает информацию родителю, а родитель передает информацию от ребенка1 к ребенку2. Конечно, мы также используем реквизиты.

Давайте напишем абзац, который нажимает на Child1, а затем отправляет информацию, которую Child1 хочет передать Child2, Child2.

    class Parent extends Component {
    
        constructor(props) {
            super(props)
            this.state = { wishes: '' }
        }
    
        onSend = (msg) => {
            this.setState({ wishes: msg })
        }
        
        render() {
            return (
              <div>
                <Child1 onSend={this.onSend} />
                <Child2 fromChild1Wishes={this.state.wishes} />
              </div>
            )
        }
    }
    
    class Child1 extends Component {
    
        onChild1Send = () => {
            this.props.onSend('嗨，老二新年快乐！')
        }
        
        render() {
            return (
                <h3 onClick={this.onChild1Send}>我是老大Child1</h3>
            )
        }
    }
    
    class Child2 extends Component {
    
        onChild1Send = () => {
            this.props.onSend('嗨，老二新年快乐！')
        }
        
        render() {
            return (
                <div>
                    <h3>我是老二Child2</h3>
                    {
                      this.props.fromChild1Wishes ?
                      <p>来自老大的祝福 - this.props.fromChild1Wishes</p>
                      : null
                    }
                </div>
            )
        }
    }

[35] Краткий обзор связи компонентов

Вышеуказанные три метода являются наиболее распространенными. Но реальные проекты часто намного сложнее, чем это общение. Потому что вложенность компонентов в сложные проекты часто похожа на лиственное дерево. Например:

1. Связь между компонентами n-уровня — это связь между Родительским компонентом и подкомпонентами его подкомпонентов или подкомпонентная связь подкомпонентов подкомпонентов. …

2. Связь невложенных компонентов, только что упомянутый братский компонент является простейшим невложенным компонентом, и существует больше вложенных невложенных компонентов, которые не являются одним и тем же родительским компонентом. Проще говоря, это тот случай, когда вы общаетесь с внуком/сыном брата деда.

Приведенное выше решение определенно да.

1. Вы не возражаете против передачи реквизита слой за слоем (более трех слоев не рекомендуется)
2. Используя контекст, предоставляемый react, он подобен большому глобальному контейнеру, в который мы помещаем информацию, которую хотим передать, и можем взять ее оттуда, если она нам понадобится.
3. Способы настройки событий. Пользовательское событие — это типичный шаблон публикации/подписки, который реализует межкомпонентное взаимодействие путем добавления слушателей к объекту события и запуска событий.
4. Инструменты управления состоянием mobx redux и др.

Еще одна загвоздка, абсолютно все способы коммуникации можно использовать под любой проект. Но, как подруга,Самый подходящий - лучший.

Более...

Конечно, в интервью могут быть более глубокие и развивающие вопросы.

• Если бы вы могли улучшить одну функцию React, что бы это было? (минусы реакции)
• Каков принцип immutable.js?Подробное объяснение Immutable и практика в React
• Какова оптимизация производительности реакции?
• Алгоритм сравнения реакции
• принцип реакции виртуального дома
• что такое реакция
• Разница между реагированием и vue
• ...

Для стека реактивной технологии react-router, redux, конечно, много.

• За какие функции отвечает redux react-redux?
• использование подключения к провайдеру
• хранить поток данных
• Три принципа редукции
• ...

Reference

reactjs.org/
GitHub.com/Волшебство двери/Ешьте…
woohoo.info Q.com/talent/articles…
сегмент fault.com/ah/119000000…
Woohoo.OSCHINA.net/translate/…
сегмент fault.com/ah/119000000…
woohoo.brief.com/afraid/convenient 915 9 из 9…