V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
LinkedIn
w4ngzhen
V2EX  ›  React

虚心请教,这样的 React 面试题目是否合理?

  •  
  •   w4ngzhen · 79 天前 · 5004 次点击
    这是一个创建于 79 天前的主题,其中的信息可能已经有所发展或是发生改变。

    各位真大佬,鄙人最近在面试 React 初 /中级,请问一下这个问题是否合理?

    // 按钮挂载后,10 秒点击按钮 N 次,打印的效果?
    const [count, setCount] = useState(0)
    useEffect(() => { 
        setTimeout(() => {  
          console.log(count);
        }, 10 * 1000 )
     }, []);
    <button onClick={() => setCount(count + 1)} />
    

    个人感觉这个问题还是会考察候选人对 React 、React 的 useEffect 理解,不知道各位大佬怎么看?

    51 条回复    2022-09-06 16:31:02 +08:00
    uen
        1
    uen  
       79 天前
    useEffect 依赖参数传空数组只会组件初始化的时候渲染一次
    Leviathann
        2
    Leviathann  
       79 天前
    可以把 考察基本的闭包用法
    cyrbuzz
        3
    cyrbuzz  
       79 天前   ❤️ 11
    得给 button 加点文字,不然不好点(逃~)。
    yuningWang8
        4
    yuningWang8  
       79 天前
    useEffect 回调执行的是当前状态的缓存。这个代码不能打印出最新的 count 。
    dcsuibian
        5
    dcsuibian  
       79 天前
    还行,关键词:React 闭包陷阱
    guisheng
        6
    guisheng  
       79 天前 via iPhone
    我最近在用 发现它死循环
    FaiChou
        7
    FaiChou  
       79 天前
    不错的, 可以筛选掉一些只会用 react 的人
    vone
        8
    vone  
       79 天前
    @uen 开发环境会重复触发。
    zepc007
        9
    zepc007  
       79 天前
    @guisheng 监听某个 state 的时候再更新这个 state ?
    zhuangzhuang1988
        10
    zhuangzhuang1988  
       79 天前
    太魔法了.
    Leviathann
        11
    Leviathann  
       79 天前
    @zhuangzhuang1988 这个就是 hook 的基石,结合 memo 、callback 啥的,搞到后面越写越复杂,所以很多人都很喜欢 solidjs 的设计
    ragnaroks
        12
    ragnaroks  
       79 天前
    合理
    guisheng
        13
    guisheng  
       79 天前
    @zepc007 是的。
    ragnaroks
        14
    ragnaroks  
       79 天前   ❤️ 1
    setTimeout 、依赖列表、useEffect 清理、闭包捕获的变量的值,都是常见可能失误的地方
    mameng
        15
    mameng  
       79 天前
    结果是 0 , [] 里面为空只有第一次渲染,更新不渲染
    gdrk
        16
    gdrk  
       79 天前
    gdrk
        17
    gdrk  
       79 天前   ❤️ 3
    我这 markdown 真的是用的稀烂... [博文]( https://overreacted.io/zh-hans/a-complete-guide-to-useeffect)
    w4ngzhen
        18
    w4ngzhen  
    OP
       79 天前
    @gdrk 是的,我主要是看了这篇文章
    yuthelloworld
        19
    yuthelloworld  
       79 天前
    []里没有监测的变量。所以不会打印吧
    westoy
        20
    westoy  
       79 天前
    @gdrk v 站回复不支持 markdown.......
    darkengine
        21
    darkengine  
       79 天前
    短短几行代码,包含了很多坑,用来考核挺好的
    XTTX
        22
    XTTX  
       79 天前
    除非想读十秒前的值, 不然需要用 ref.current 更新到最新的。 我觉得挺经典的一道题。
    yuuko
        23
    yuuko  
       79 天前
    React hook 的最大缺点就是对用户来说不直观,心智负担不小,所以还是 solidjs 更胜一筹
    h1104350235
        24
    h1104350235  
       79 天前
    有大佬解释下吗
    wenbinwu
        25
    wenbinwu  
       79 天前
    如果有公司让你看代码说结果,就不用去这种公司了
    dtdths1
        26
    dtdths1  
       79 天前
    但凡是写过 react hooks 的,应该都知道吧
    damngoto
        27
    damngoto  
       79 天前
    @h1104350235 装个 EsLint 插件就不会犯错了。依赖加上去。

    useEffect(() => {
    setTimeout(() => {
    console.log(count);
    }, 10 * 1000);
    }, [count]);
    qfdk
        28
    qfdk  
       79 天前 via iPhone
    @gdrk 感谢送上 回家地铁阅读理解➕1
    rabbbit
        29
    rabbbit  
       79 天前   ❤️ 1
    useEffect(() => {}, []) 只会在挂载时调用, 所以打出 来的都是 0
    解决办法是使用 useRef
    感觉 hook 限制顺序还是写着难受, 带着镣铐的舞蹈
    zhouyg
        30
    zhouyg  
       79 天前
    这个面试题可以
    mufeng
        31
    mufeng  
       79 天前
    @rabbbit useRef 不会 re-render ,这个题还可以考察一下 re-render 怎么处理,useCallback 使用
    ericls
        32
    ericls  
       79 天前 via iPhone
    非常不合理 代码是给电脑跑的
    mara1
        33
    mara1  
       79 天前
    我不想做这种题,但遇到的面试许多这样的,接受不能改变的,改变能改变的。

    我改变自己,我选择转行。
    Exuanbo
        34
    Exuanbo  
       78 天前
    这不是很基础的东西吗...
    okampfer
        35
    okampfer  
       78 天前
    挺不错的题,也是挺基础的题。正好下周有个面试,就用这道题考考候选人。

    还有一个点我觉得可以考一下,就是 setCount 有没有更安全的调用方式,就是 setCount(prevCount => prevCount + 1) 。

    不过各位我有个疑问,https://codesandbox.io/s/react-interview-increment-useeffect-g4r99j?file=/src/App.tsx ,我加了一个 useEffect 并依赖于 countRef.current ,我点 increment 了之后居然输出了 countRef.current 的最新值?!不是说更新 ref 不会触发重新渲染吗?

    说起来我觉得即使有经验的 React 开发都可能会偶尔懵逼犯这些低级错误,React 在心智负担这点上面确实不如 Vue 、solidjs 有优势。

    很高兴有人提到 solidjs ,就是生态还不行得等。
    looking0truth
        36
    looking0truth  
       78 天前
    @okampfer 因为你的 setCount 触发的 rerender 啊
    gydi
        37
    gydi  
       78 天前 via Android
    @okampfer ref 不会变,ref.current 会,你改成依赖 ref 试试
    okampfer
        38
    okampfer  
       78 天前
    @looking0truth #36 不是这个原因,那个 useEffect 没有依赖 count 。
    @gydi #37 改成依赖 countRef 就只输出一次了。
    gydi
        39
    gydi  
       78 天前 via Android
    @okampfer 你之前的代码里点击触发 rerender 是因为 setcount 了,不是因为 ref current 的值变了
    MrBrother
        40
    MrBrother  
       78 天前 via Android
    @westoy #20

    移动端不支持,电脑上可以
    westoy
        41
    westoy  
       78 天前
    @MrBrother

    不是, 我一直用的电脑端, 主楼才支持 MD , 回复一直不行的啊

    难道 V 站也搞 abtest.......
    DOLLOR
        42
    DOLLOR  
       78 天前
    这题目对 react 来说是非常基础的东西,可以说是踏入 react 生态的第一步就要遇到的问题。
    okampfer
        43
    okampfer  
       78 天前
    @gydi @looking0truth #39 是的,我又实验了一下,确实是……一旦注释掉 setCount 那一行,就无法输出最新的 ref.current 值了。
    AyaseEri
        44
    AyaseEri  
       78 天前
    会被打死,不如考考 React Fiber
    vision1900
        45
    vision1900  
       78 天前
    @AyaseEri 初中级就考 Fiber ,真卷啊
    vision1900
        46
    vision1900  
       78 天前
    可以参考这篇文章: https://beta.reactjs.org/learn/state-as-a-snapshot
    React 的 state 不是普通的 JS 变量
    zhaomeicheng
        47
    zhaomeicheng  
       77 天前 via Android
    @rabbbit 应该只会打印出来一个 0 吧,只执行了一次
    MrBrother
        48
    MrBrother  
       77 天前 via Android
    @westoy
    😂原来如此,我没在电脑上回复过,还以为也可以
    vision1900
        49
    vision1900  
       77 天前
    可以这么写,虽然有点 hack 的感觉:

    ```
    useEffect(() => {
    setTimeout(() => {
    setCount(val => {
    console.log(val)
    return val;
    })
    }, 10 * 1000);
    }, [])
    ```
    prayx
        50
    prayx  
       61 天前
    合理,考察对 React Hooks 和闭包的理解。
    likunyan
        51
    likunyan  
       19 天前
    主要考的还是 setTimeout
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   984 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 21:31 · PVG 05:31 · LAX 14:31 · JFK 17:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.