本文集合一些React的Hooks面试题，方便读者以后面试查漏补缺。作者给出自认为可以让面试官满意的简易答案，如果想要了解更深刻，可以点击链接查看对应的详细博文。在此对链接中的博文作者非常感谢🙏。
- react hooks与class组件的区别在于什么
参考链接： https://juejin.cn/post/6844904179136200712#heading-4
区别 |
react hooks |
class组件 |
语法 |
使用函数和状态钩子来管理组件状态 |
使用 |
状态管理 |
通过状态钩子 |
通过 |
可重用性 |
可以轻松地将 |
不能轻松地将组件的方法和状态重用于不同的组件(HOC) |
- 为什么 hooks 不能写在循环或者条件判断语句里
参考链接： https://juejin.cn/post/7116730718356504613
确保 Hooks 在每一次渲染中都按照同样的顺序被调用。我们可以把文件里所有的Hooks按照出现顺序当成一个链表，每次更新的时候这个链表都得保持一致，然而当条件存在时，当条件从真->假时，这个链表会变化。
- react的hooks有哪些常用的，作用分别是什么
参考链接：https://juejin.cn/post/7118937685653192735
常用Hooks |
具体功能 |
useState |
数据驱动更新 |
useReducer |
订阅状态，创建reducer,更新视图 |
useEffect |
异步状态下，视图更新后，执行副作用 |
useLayoutEffect |
同步状态下，视图更新前，执行副作用 |
useContext |
订阅并获取react context上下文，用于跨层级传递状态 |
useRef |
获取元素或组建实例 |
useImperativeHandle |
允许父组件直接访问子组件的实例，调取子组件方法 |
useMemo |
缓存值，常用于性能优化 |
useCallback |
缓存函数，常用于性能优化 |
- useState 和 useRef 的区别
参考链接：https://juejin.cn/post/7029852195398877198
区别 |
useState |
useRef |
渲染 |
改变会引起渲染 |
改变不会引起渲染 |
返回值 |
返回一个数组。分别是值和函数 |
只返回值 |
何时使用 |
存储需要展示组件的数据 |
获取用户输入，操作Dom |
- useCallback 和 useMemo 的区别
参考链接： https://www.jianshu.com/p/b8d27018ed22
区别 |
useCallback |
useMemo |
返回值 |
一个缓存的回调函数 |
一个缓存的值 |
参数 |
需要缓存的函数 |
需要缓存的值 |
场景 |
通常用于回调函数 |
通常用于在组件重新渲染时保持不变的值。 |
- useEffect 和useLayoutEffect的区别
参考链接：https://zhuanlan.zhihu.com/p/348701319
区别 |
useEffect |
useLayoutEffect |
执行 |
异步执行 |
同步执行 |
执行时机 |
浏览器完成渲染之后 |
浏览器把内容真正渲染到界面之前等价于ComponentDidMount |
- useEffect是如何清除副作用的
参考链接：https://juejin.cn/post/7083718507069702152
useEffect返回一个函数，函数里写清除副作用的方法，类似于类组件里的componentWillUnmount
- useState和useReducer的区别
参考链接： https://juejin.cn/post/6844903869437181960
区别 |
useState |
useReducer |
使用场景 |
单组件，细粒度的状态管理 |
组件嵌套，低成本的数据流 |
关系 |
是useReducer的子集 |
可实现useState |
