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

[w4ngzhen]

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

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

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

[uen]

useEffect 依赖参数传空数组只会组件初始化的时候渲染一次

[Leviathann]

可以把 考察基本的闭包用法

[cyrbuzz]

得给 button 加点文字，不然不好点(逃~)。

[yuningWang8]

useEffect 回调执行的是当前状态的缓存。这个代码不能打印出最新的 count 。

[dcsuibian]

还行，关键词：React 闭包陷阱

[guisheng]

我最近在用 发现它死循环

[FaiChou]

不错的, 可以筛选掉一些只会用 react 的人

[vone]

@uen 开发环境会重复触发。

[zepc007]

@guisheng 监听某个 state 的时候再更新这个 state ？

[zhuangzhuang1988]

太魔法了.

[Leviathann]

@zhuangzhuang1988 这个就是 hook 的基石，结合 memo 、callback 啥的，搞到后面越写越复杂，所以很多人都很喜欢 solidjs 的设计

[ragnaroks]

合理

[guisheng]

@zepc007 是的。

[ragnaroks]

setTimeout 、依赖列表、useEffect 清理、闭包捕获的变量的值，都是常见可能失误的地方

[mameng]

结果是 0 ， [] 里面为空只有第一次渲染，更新不渲染

[gdrk]

我就说看着眼熟，dan 这篇[博文] ( https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/)算是完整的讲解了这题的几个关键点。感觉面中级这题是不是简单了点, 毕竟 dan 的这篇文章还挺入门的

[gdrk]

我这 markdown 真的是用的稀烂... [博文]( https://overreacted.io/zh-hans/a-complete-guide-to-useeffect)

[w4ngzhen]

@gdrk 是的，我主要是看了这篇文章

[yuthelloworld]

[]里没有监测的变量。所以不会打印吧

[westoy]

@gdrk v 站回复不支持 markdown.......

[darkengine]

短短几行代码，包含了很多坑，用来考核挺好的

[XTTX]

除非想读十秒前的值, 不然需要用 ref.current 更新到最新的。 我觉得挺经典的一道题。

[yuuko]

React hook 的最大缺点就是对用户来说不直观，心智负担不小，所以还是 solidjs 更胜一筹

[h1104350235]

有大佬解释下吗

[wenbinwu]

如果有公司让你看代码说结果，就不用去这种公司了

[dtdths1]

但凡是写过 react hooks 的，应该都知道吧

[damngoto]

@h1104350235 装个 EsLint 插件就不会犯错了。依赖加上去。

useEffect(() => {
setTimeout(() => {
console.log(count);
}, 10 * 1000);
}, [count]);

[qfdk]

@gdrk 感谢送上 回家地铁阅读理解➕1

[rabbbit]

useEffect(() => {}, []） 只会在挂载时调用, 所以打出 来的都是 0
解决办法是使用 useRef
感觉 hook 限制顺序还是写着难受, 带着镣铐的舞蹈

[zhouyg]

这个面试题可以

[mufeng]

@rabbbit useRef 不会 re-render ，这个题还可以考察一下 re-render 怎么处理，useCallback 使用

[ericls]

非常不合理 代码是给电脑跑的

[mara1]

我不想做这种题，但遇到的面试许多这样的，接受不能改变的，改变能改变的。

我改变自己，我选择转行。

[Exuanbo]

这不是很基础的东西吗...

[okampfer]

挺不错的题，也是挺基础的题。正好下周有个面试，就用这道题考考候选人。

还有一个点我觉得可以考一下，就是 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]

@okampfer 因为你的 setCount 触发的 rerender 啊

[gydi]

@okampfer ref 不会变，ref.current 会，你改成依赖 ref 试试

[okampfer]

@looking0truth #36 不是这个原因，那个 useEffect 没有依赖 count 。
@gydi #37 改成依赖 countRef 就只输出一次了。

[gydi]

@okampfer 你之前的代码里点击触发 rerender 是因为 setcount 了，不是因为 ref current 的值变了

[MrBrother]

@westoy #20

移动端不支持，电脑上可以

[westoy]

@MrBrother

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

难道 V 站也搞 abtest.......

[DOLLOR]

这题目对 react 来说是非常基础的东西，可以说是踏入 react 生态的第一步就要遇到的问题。

[okampfer]

@gydi @looking0truth #39 是的，我又实验了一下，确实是……一旦注释掉 setCount 那一行，就无法输出最新的 ref.current 值了。

[AyaseEri]

会被打死，不如考考 React Fiber

[vision1900]

@AyaseEri 初中级就考 Fiber ，真卷啊

[vision1900]

可以参考这篇文章： https://beta.reactjs.org/learn/state-as-a-snapshot
React 的 state 不是普通的 JS 变量

[zhaomeicheng]

@rabbbit 应该只会打印出来一个 0 吧，只执行了一次

[MrBrother]

@westoy
😂原来如此，我没在电脑上回复过，还以为也可以

[vision1900]

可以这么写，虽然有点 hack 的感觉:

```
useEffect(() => {
setTimeout(() => {
setCount(val => {
console.log(val)
return val;
})
}, 10 * 1000);
}, [])
```

[prayx]

合理，考察对 React Hooks 和闭包的理解。

[QKgf555H87Fp0cth]

主要考的还是 setTimeout