JS Vue React 面试题

React

为什么用key

React生命周期

React父子组件生命周期

mountComponent负责管理生命周期中的mounting阶段的方法调用

mountComponent本质上是通过递归渲染内容的，由于递归的特性，父组件的componentWillMount在其子组件的componentWillMount之前调用，而父组件的componentDidMount在其子组件的componentDidMount之后调用

updateComponent负责管理生命周期中的updating阶段的方法调用

updateComponent本质上是通过递归渲染内容的，由于递归的特性，父组件的componentWillUpdate在其子组件的componentWillUpdate之前调用，而父组件的componentDidUpdate在其子组件的componentDidUpdate之后调用

React单向数据流

为什么要用SyntheticEvent合成事件机制？

React17将事件绑定从document移到了root上

React的batchUpdate机制

setState异步还是同步？

哪些能命中batchUpdate机制

哪些不能命中batchUpdate机制

jsx的渲染过程

jsx会经过babel编译成createElement函数的结构，然后createElement执行产生虚拟dom结构VNode(就是一个有一定属性的对象结构)，然后通过render函数处理VNode为虚拟节点，在页面中渲染

dom的更新过程

diff算法对比新旧VNode，如果新旧VNode不一样就调用render重新渲染视图的过程

diff算法流程

setState触发后的整个逻辑主要脉络

React Fiber & Concurrent Mode

Vue

理解React的调和器Reconciler

React原理 – 浅析React Fiber架构

React的Fiber和diff，与Vue2对比

为什么需要requestIdleCallback ？

在网页中，有许多耗时但是却又不能那么紧要的任务。它们和紧要的任务，比如对用户的输入作出及时响应的之类的任务，它们共享事件队列。如果两者发生冲突，用户体验会很糟糕。我们可以使用setTimout，对这些任务进行延迟处理。但是我们并不知道，setTimeout在执行回调时，是否是浏览器空闲的时候。

而requestIdleCallback就解决了这个痛点，requestIdleCallback会在帧结束时并且有空闲时间。或者用户不与网页交互时，执行回调。

JS

二分查找

let arr=[1,2,3,56,99,106]
function searching(tar) {
    var start = 0,
    end = arr.length - 1,
    middle, element
    while (start <= end) {
        middle = Math.ceil((start + end) / 2);
        console.log('中位数:', middle);
        element = arr[middle];console.log('中位数对应的值:', element);
        if (element === tar) {
            return middle;
        } else if (tar < element) {
            end = middle - 1
        } else {
            start = middle + 1
        }
    }
    return - 1;
}
console.log(searching(99));

快速排序

function partition(arr, start, end) {
    // 以最后一个元素为基准
    const pivotValue = arr[end];
    let pivotIndex = start;
    for (let i = start; i < end; i++) {
        if (arr[i] < pivotValue) {
            // 交换元素
            [arr[i], arr[pivotIndex]] = [arr[pivotIndex], arr[i]];
            // 移动到下一个元素
            pivotIndex++;
        }
    }

    // 把基准值放在中间
    [arr[pivotIndex], arr[end]] = [arr[end], arr[pivotIndex]]
    return pivotIndex;
};