面试题答案
一键面试依赖数组与闭包的关联
- 闭包特性：在JavaScript中，闭包是指函数可以访问其词法作用域之外的变量，即使该函数在其原始作用域之外执行。在React函数组件中，每次渲染都会创建新的函数作用域。
- 依赖数组影响闭包：React Hooks中的依赖数组（如
useEffect、useCallback、useMemo等钩子的第二个参数）用于控制钩子函数的重新执行或值的重新计算。依赖数组中的值会被闭包捕获。当依赖数组中的值发生变化时，相关的钩子函数会重新执行，此时闭包内捕获的值也会更新；若依赖数组未正确设置，闭包捕获的值可能不会按预期更新。
依赖数组更新不及时结合闭包原理导致的问题
- 过时数据问题：如果依赖数组没有包含所有会影响钩子内逻辑的变量，闭包捕获的变量可能是旧值。例如在
useEffect中，若依赖数组遗漏了某个状态变量，当该状态变量更新时，useEffect不会重新执行，闭包内使用的仍是旧的状态值，导致逻辑处理可能基于过时的数据。 - 回调函数问题：在
useCallback中，若依赖数组不完整，返回的回调函数可能捕获旧的变量值。这可能导致在回调函数执行时，使用的是不符合当前组件状态的旧数据，引发难以调试的逻辑错误。
解决这类问题的方法
- 正确设置依赖数组：确保依赖数组包含所有在钩子函数内会用到的、可能发生变化的变量。在React开发工具中，一些lint规则（如
eslint-plugin-react-hooks中的exhaustive-deps规则）可以帮助检测依赖数组是否遗漏变量。 - 使用
useRef：对于某些不需要触发钩子重新执行，但又希望在组件生命周期内保持可变的值，可以使用useRef。useRef返回的对象在组件的整个生命周期内保持不变，其.current属性可以随时修改。例如，如果需要在useEffect中使用一个不断变化但又不想作为依赖触发useEffect重新执行的值，可以将该值存入useRef，然后在useEffect中读取useRef.current。 - 使用
useReducer替代部分状态管理：在复杂的状态逻辑中，useReducer可以更好地管理状态变化。相比多个useState，useReducer可以通过reducer函数集中处理状态更新逻辑，并且更容易跟踪状态变化，在处理依赖关系时可能更清晰，减少因依赖数组设置不当导致的问题。