[Резюме интервью] Помните неудачное резюме интервью bilibili (3)

опрос

портал

React, Vue и Angular сформировали трехсторонний тренд в мире фронтенда. Особенно React и Vue, превосходная экология React и полная документация Vue на китайском языке уже являются предпочтительными наборами передовых технологий для большинства компаний в Китае. Также очень необходимо понимать базовые тестовые точки знаний React и Vue. Разберем основные тестовые точки React и Vue в виде сравнения, а напоследок приложу собственное знание.

ps: Возможно, я много контактировал с React в своей недавней работе, и Vue может иметь неподходящие слова.Как только я найду это, я немедленно исправлю это.

Базовые знания тестового сайта React и Vue

Жизненный цикл

React

Жизненный цикл React можно условно разделить на 3 типа.

  • Создайте
    • componentWillMount—— Срабатывает перед монтированием компонента;
    • render- создать дерево элементов React;
    • componentDidMount—— Срабатывает после монтирования компонента, в это время страница уже существует в DOM, здесь рекомендуется инициировать запрос и другие операции для завершения инициализации данных;
  • возобновить
    • componentWillReceiveProps—— Компонент получит реквизиты вышестоящего, где значение состояния может быть изменено через реквизиты;
    • shouldComponentUpdate——Важный API для оптимизации React, чтобы решить, следует ли обновлять компонент.Когда компонент наследует PureComponent, shouldComponentUpdate выполнит неглубокое сравнение между свойствами и состоянием, чтобы решить, следует ли обновлять;
    • componentWillUpate- Компонент будет обновлен в ближайшее время
    • render- создать дерево элементов React;
    • componentDidUpdate- Компонент обновлен
  • удалить
    • componentWillUnmount—— Компонент вот-вот будет уничтожен.Здесь можно почистить таймер, отменить подписное поведение RxJS и т. д., чтобы предотвратить переполнение памяти.

После React V16 из-за введения механизма Fiber некоторые из предыдущих API могут вызываться повторно, поэтому React частично скорректировал API жизненного цикла.

  • Создайте
    • componentWillMount static getDerivedStateFromProps(nextProps, state)- Новый API - это статический метод, который возвращает объект для обновления состояния, если он возвращает ноль, он ничего не обновляет, спасибо @ Я могу меня исправить
    • render
    • componentDidMount
  • возобновить
    • componentWillReceiveProps static getDerivedStateFromProps
    • shouldComponentUpdate
    • componentWillUpate
    • render
    • getSnapshotBeforeUpdate- Вызывается перед самым последним выводом рендеринга (фиксация в узле DOM), он позволяет компоненту получать некоторую информацию из DOM (например, позицию прокрутки) до ее изменения. Любое возвращаемое значение из этого жизненного цикла будет передано в качестве параметра в componentDidUpdate().
    • componentDidUpdate
  • удалить
    • componentWillUnmount

vue

Жизненный цикл VueСначала прикрепите официальную документацию.

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

  • Создайте
    • beforeCreate—— Начинается хаос, завершается инициализация экземпляра
    • created—— После создания экземпляра инициализация атрибута данных завершена, и к нему можно получить доступ, но он не монтируется в DOM
    • beforeMount-- Скомпилировать шаблон, но не привязывать данные к представлению
    • mounted—— Завершите привязку данных к представлению и завершите операцию монтирования DOM.
  • возобновить
    • beforeUpdate- Доступ к существующему DOM перед обновлением DOM
    • updated- Обновление DOM завершено
  • удалить
    • beforeDestory- Функция ловушки вызывается перед уничтожением экземпляра. На этом шаге экземпляр еще полностью доступен, и здесь выполняются такие операции, как очистка таймера для предотвращения переполнения памяти,
    • destroyed- Функция ловушки вызывается после уничтожения экземпляра Vue. После вызова все, на что указывает экземпляр Vue, будет развязано, все прослушиватели событий будут удалены, а все дочерние экземпляры уничтожены.

Взаимодействие компонентов — родительские и дочерние компоненты

React

class Parent extends Component {
    state = { a: 6 }
    
    changeA = () => this.setState({ a: this.state.a + 1 })

    render() {
        return (
            <div>
                <Child 
                    // 完成 父 => 子 通信，直接通过设置 props 传递
                    a={this.state.a} 
                    // 子 => 父 通信，通过传入绑定 this 的函数完成
                    changeA={this.changeA}
                />
            <div>
        )
    }
}

class Child extends Component {
    render() {
        return (
            <div>
                {this.props.a}
                <button 
                    // 触发父组件的方法，改变a的值，完成 子 => 父 的通信
                    onClick={this.props.changeA}
                > +1 <button>
            <div>
        )
    }
}

Vue

<template>
    <div>
        <Child 
            <!-- 完成 父 => 子 的通信 -->
            :a="a"
            <!-- 自定义事件 addOne 触发时, 执行methods中的 addOne 方法 -->
            <!-- 完成 子 => 父 的通信 -->
            @addOne="addOne"
        ></Child>
    </div>
</template>

<script>
    import Child from 'xxx';
    export default {
        name: 'Parent',
        data() {
            return { a: 5 }
        },
        methods: {
            addOne(value) {
                this.data = value
            }
        },
        components: { Child }
    }
</script>

<template>
    <div>
        {{a}}
        <button @click={changeA}>+1</button>
    </div>
</template>

<script>
    export default {
        name: 'Child',
        props: { a: Number },
        methods: {
            changeA() {
                // 出发 自定义事件 addOne, 并将第二个常数作为参数传递
                this.$emit('addOne', this.a + 1)
            }
        }
    }
</script>

Ответ React одним предложением

Почему состояние не может получить значение после правильной настройки после выполнения setState?

После setState React не изменяет значение состояния немедленно, потому что вычислять и генерировать новое дерево VDom и обновлять Dom каждый раз при изменении состояния дорого, Подход React заключается в разработке setState как асинхронного поведения, многократного. будут объединены в один, а в конце будет сгенерирован Dom для оптимизации производительности.

    this.setState({
        a: 5
    }, () => {
        // setState 提供的第二个参数是一个回调函数
        // 这里能够正确获取 state 里面的值
    })

Почему рекомендуется функция без состояния

  • Меньше кода, понятнее логика
  • Больше соответствует первоначальному дизайнерскому замыслу потока данных React, начинающегося сверху.
  • Не используйте метод привязки

Как React использует Virtual Dom и его преимущества

Накладные расходы на работу с Dom в JS вызовут механизм переупорядочения и перерисовки в браузере, а потребление производительности будет очень значительным, а затем работа с объектами в JS будет очень эффективной. Команда React использует алгоритм Diff для сравнения содержимого старого и нового VDom, поиска различий и одновременного обновления Dom для сокращения накладных расходов. Команда React уменьшила сложность алгоритма до O(n) путем прямого сравнения содержимого того же слоя и других оптимизаций алгоритма.

Ответ Vue одним предложением

Разница между v-if и v-show

v-if удалит Dom непосредственно из текущего дерева Dom, v-show эквивалентно установкеdisplay: noneОднако DOM все еще существует в дереве DOM. Есть два случая неблагоприятных и негативных последствий, подобных кэшированию, и разные варианты различны.

Почему данные используют функцию для возврата объекта

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

Разница между вычисляемыми и методами

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

Насколько vue отзывчив

Отзывчивость vue можно разделить на две части: сбор зависимостей и ответ, Короче говоря, часть сбора зависимостей сообщает, какие места в настоящее время полагаются на это свойство, а часть ответа получает функции set и get hook через Object.defineProperty(). Операция выполняется в функции ловушки для достижения отзывчивости.

Суммировать

Фреймворк сам по себе является инструментом, а фреймворк 🐂🍺 не представляет собой проект 🐂🍺 嗷.

ps: Начальник также может просветить меня на некоторых общих тестовых площадках и сделать последующие дополнения

Категории