emo一天，但还是回馈一下牛客：滴滴前端研发部一面

好伤心，面试官结束时候评价是整体还行，等视频挂了5分钟内收到感谢信

这前后反差，我只好安慰面试官尊重自己，但是谁来安慰我呀

面试上来开始问八股
1，说说 url到浏览器页面显示整个过程
2，http 缓存
3，流式输出，你知道哪些可以实现的方式？AI生成到前端你觉得采用那种方式？
3，css 设置的元素要不断旋转，怎么写（不到一分钟面试官问我是否会，不会可以换一题，那我还行想到用什么，那换一题吧）
keyfram 里面设transform；animation 里面应用设定的spin；
代码如下：（linear 匀速转，infinite 无限循环）
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.spinner {
    animation: spin 2s linear infinite; /*持续2秒 转一圈*/
}

4，输出解释题：
function app() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        const interval = setInterval(() => {
            console.log('useEffect')
            setCount(count + 1)
        }, 1000)
    }, []) 

    return (
        <div>
            <h1>{count}</h1>
        </div> 
    )
}
会输出打印什么？h1位置 count 显示什么
那当然每隔1s 打印出0，页面显示也是0
5，好的，你分析他原来想要实现什么效果，然后现在这段代码怎么改能实现预期效果，你有几种方式？
【用useRef 、手写update函数，设定count 动态依赖项，使用setTimeout 递归（但是容易爆栈）】

我当时有点懵，当然是没考虑到
function app() {
    const [count, setCount] = useState(0)

    const countRef = useRef(count);
    useEffect(() => {
        setInterval(() => {
            console.log('count', count);
            // setCount(count + 1)
            setCount(countRef.current + 1)
        }, 1000)
    },[])

    useEffect(() => {
       const update = () => {
        console.log('update')
        setCount(count + 1) 
        setTimeout(update, 1000) // 递归调用, 会导致栈溢出
       } 
       update(); // 初始调用
    })

    useEffect(() => {
        const interval = setInterval(() => {
            console.log('useEffect')
            setCount(count + 1)
        }, 1000)
    }, [count]) // 动态依赖，但是频繁定时器创建和销毁

    return (
        <div>
            <h1>{count}</h1>
        </div> 
    )
}
7，输出顺序是什么？
function app() {
    
    promise.resolve().then(() => {
        console.log('promise')
    })
    useEffect(() => {
        console.log('useEffect')
    }, [count])
    useLayoutEffect(() => {
        console.log('useLayoutEffect')
    }, [count])

    return (
        <div>
            <h1>{count}</h1>
        </div> 
    )
}
输出：useLayoutEffect
promise
useEffect

useLayoutEffect（dom更新后，相当浏览器刷新渲染了，立即同步执行）、
promise (微任务，在同步执行完清空微任务队列）
useEffect（异步执行，事件循环后执行）

期间问了useLayoutEffect 和 useEffect 区别
8，看下面输出什么？（弱弱心想：不能出点其他的吗？）
function Foo() {
    getName = function () {
        alert(1);
    }
    return this;
}
Foo.getName = function () {
    alert(2);
}
Foo.prototype.getName = function () {
    alert(3);
}

var getName = function () {
    alert(4);
}
function getName() { alert(5); }
Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); // 3

看这是金典js输出，但是解释起来费劲呀，解释不断问我：变量提升到哪，函数提升到哪，可以修改一下代码看看提升到的位置，new 关键字分析一下，作为普通函数调用还是.... 
（问下牛友，这种题目去那找能复习到呀）

9，写个sum函数实现下面输出：
console.log(sum(1,2,3).sumOf()); // 6
console.log(sum(1,4)(2).sumOf()); // 7
console.log(sum(1)(2)(3)(4).sumOf()); // 10

function sum(...args) {
    let total = args.reduce((acc,cur) => acc + cur,0);
    function innerSum(...newArgs) {
        total += newArgs.reduce((acc,cur) => acc + cur,0);
        return innerSum;
    }
    innerSum.sumOf = () => total;
    return innerSum;
}
console.log(sum(1,2,3).sumOf()); // 6
console.log(sum(1,4)(2).sumOf()); // 7
console.log(sum(1)(2)(3)(4).sumOf()); // 10

#面试问题记录##面试吐槽bot#
#面试经验谈##听到哪句话就代表面试稳了or挂了？#