笔试题

对象扁平化

    // 给定的嵌套对象
const obj = { a: { b: { c: 1, d: 2 }, e: 3 }, f: { g: 2 } };
 
const flattern = (obj) => { 
    const res = {}; 
    const dfs = (curr, path) => { 
        if(typeof curr === 'object' && curr !== null) { 
            const isArray = Array.isArray(curr);
            for(let key in curr) { 
                const newPath = path ? isArray ? `${path}[${key}]` : `${path}.${key}` : key;
                dfs(curr[key], newPath); 
             } 
         } else { 
             res[path] = curr 
         } 
    } 
    dfs(obj); 
    return res; 
}

  

数组扁平化

    const fc = (arr, depth) => {
        if(!Array.isArray(arr) || depth <= 0) return arr
        return arr.reduce((pre,cur) => {
            return pre.concat(Array.isArray(cur) ? fc(cur,depth-1) : cur)
        },[])
    }

面试题

setstate是异步还是同步

react18之前源码中有个字段executionContext,它代表着目前该任务所处的一个阶段，如果executionContext被赋值该任务进入到了react调度流程中，此时react会对该任务进行一个异步处理，如果executionContext没有被赋值代表着它没有进入到react调度流程中，是同步执行，像合成事件都会进入到任务调度中，所以是异步处理，而像定时器延时器这些不会被放到任务调度中，所以都会同步处理， 在react18中使用了creatRoot创建应用后，都是所有事件都是异步处理，但是在项目中使用了render这种方式进行渲染依然和react17一样

react为什么要引入hooks

react引入hooks是为了解决类组件中存在一下问题： 1：在类组件中复用状态逻辑很难比如使用redux创建了一个状态仓库代码在好几个组件中都有使用那么你就得在每个组件都引入store，是可以解决问题，但是很繁琐，而hooks可以让你从组件中抽取状态逻辑，然后单独封装可以实现组件之间得状态复用保证代码得稳定性 2：复杂组件难以理解 随着项目越来越复杂，开发人员越来越多，项目代码会越来越难理解，像类组件得生命周期会处理一堆逻辑，让人难以理解，而我们可以用hooks把组件中关联得代码逻辑，都拆分成更小得函数，也可以按照功能将不同代码划分到同一个hook函数中，这样代码就具有很好得可读性，更好理解 3：避免难以理解得class写法