【React】Hooks面试题集锦

---

本文集合一些React的Hooks面试题，方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案，如果想要了解更深刻，可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。

1. react hooks与class组件的区别在于什么

参考链接： https://juejin.cn/post/6844904179136200712#heading-4

区别	react hooks	class组件
语法	使用函数和状态钩子来管理组件状态	使用 this 关键字和生命周期方法来管理组件状态
状态管理	通过状态钩子useState等管理状态	通过 this.state属性管理状态
可重用性	可以轻松地将Hooks用于不同的组件	不能轻松地将组件的方法和状态重用于不同的组件(HOC)

2. 为什么 hooks 不能写在循环或者条件判断语句里

参考链接： https://juejin.cn/post/7116730718356504613

确保 Hooks 在每一次渲染中都按照同样的顺序被调用。我们可以把文件里所有的Hooks按照出现顺序当成一个链表，每次更新的时候这个链表都得保持一致，然而当条件存在时，当条件从真->假时，这个链表会变化。

3. react的hooks有哪些常用的，作用分别是什么

参考链接：https://juejin.cn/post/7118937685653192735

常用Hooks	具体功能
useState	数据驱动更新
useReducer	订阅状态，创建reducer,更新视图
useEffect	异步状态下，视图更新后，执行副作用
useLayoutEffect	同步状态下，视图更新前，执行副作用
useContext	订阅并获取react context上下文，用于跨层级传递状态
useRef	获取元素或组建实例
useImperativeHandle	允许父组件直接访问子组件的实例，调取子组件方法
useMemo	缓存值，常用于性能优化
useCallback	缓存函数，常用于性能优化

4. useState 和 useRef 的区别

参考链接：https://juejin.cn/post/7029852195398877198

区别	useState	useRef
渲染	改变会引起渲染	改变不会引起渲染
返回值	返回一个数组。分别是值和函数	只返回值
何时使用	存储需要展示组件的数据	获取用户输入，操作Dom

5. useCallback 和 useMemo 的区别

参考链接： https://www.jianshu.com/p/b8d27018ed22

区别	useCallback	useMemo
返回值	一个缓存的回调函数	一个缓存的值
参数	需要缓存的函数	需要缓存的值
场景	通常用于回调函数	通常用于在组件重新渲染时保持不变的值。

6. useEffect 和useLayoutEffect的区别

参考链接：https://zhuanlan.zhihu.com/p/348701319

区别	useEffect	useLayoutEffect
执行	异步执行	同步执行
执行时机	浏览器完成渲染之后	浏览器把内容真正渲染到界面之前等价于ComponentDidMount

7. useEffect是如何清除副作用的

参考链接：https://juejin.cn/post/7083718507069702152

useEffect返回一个函数，函数里写清除副作用的方法，类似于类组件里的componentWillUnmount

8. useState和useReducer的区别

参考链接： https://juejin.cn/post/6844903869437181960

区别	useState	useReducer
使用场景	单组件，细粒度的状态管理	组件嵌套，低成本的数据流
关系	是useReducer的子集	可实现useState

待续….