React.js useEffect与依赖数组：自定义Hook疑问解析
2026-8-6
自定义useAnyKeyToRender Hook疑问解答
1. 为什么const [ , forceRender ] = useState();要忽略第一个元素，取第二个？
useState()返回的数组里，第一个是状态变量，第二个是更新状态的函数。这里我们完全不需要用到这个状态变量——我们的目标只是触发组件重新渲染，根本不用管这个状态具体是什么值，所以用逗号占位符跳过第一个元素，直接拿第二个更新函数就行。
2. 为什么不用setForceRender这类命名？
forceRender这个名字更直接：调用它的目的就是强制组件重新渲染，而不是“设置某个叫forceRender的状态”。虽然React里习惯用setXXX命名更新函数，但这个场景下，forceRender能更清晰地表达函数的实际用途，让代码一看就懂。
3. forceRender是怎么被调用的？
代码里把forceRender绑定成了window的keydown事件回调。当你按下任意按键时，浏览器会触发keydown事件，自动调用forceRender。当然你也可以手动写forceRender()来触发渲染，但这里是通过键盘事件自动触发的。
4. 这个Hook的运行机制和forceRender的工作原理是什么？
Hook运行流程：
- 组件
App挂载时，调用useAnyKeyToRender，内部执行useState()得到更新函数forceRender。 - 依赖为空数组的
useEffect执行，给window添加keydown事件监听器，回调就是forceRender；同时返回清理函数，组件卸载时会移除这个监听器，避免内存泄漏。
forceRender的工作原理：
从你提供的console输出能看到，forceRender本质是React内部的dispatchAction函数。调用这个函数时，React会标记当前组件需要重新渲染，然后启动组件的重新渲染流程——哪怕你调用时没传新的状态值（这里连参数都没传），React只要检测到状态更新操作，就会触发渲染。
另外提一句：这里useState()没传初始值，所以状态初始是undefined，但这不影响，因为我们从始至终都不会用到这个状态值。
内容的提问来源于stack exchange，提问作者Stéphane
相关产品推荐
相关产品推荐
