2022年面试题之react

1. react hooks中的 userLayouteffect 和 userEffect 有啥区别

useEffect 是异步执行的，而 useLayoutEffect 是同步执行的。
useEffect 的执行时机是浏览器完成渲染之后，而 useLayoutEffect 的执行时机是浏览器把内容真正渲染到界面之前，和 componentDidMount 等价。

一句话总结：二者的不同在于执行时机。

useEffect是在渲染函数执行完成，并绘制到屏幕之后，再异步执行。

大概流程如下：

1. 触发渲染函数执行（改变状态，或者父组件重新渲染）
2. React调用组件的渲染函数
3. 屏幕中重绘完成
4. 执行useEffect

useLayoutEffect，是在渲染函数执行之后，但是屏幕重绘前同步执行。（注意：它可能会影响渲染体验）

大概流程如下：

1. 触发渲染函数执行（改变状态，或者父组件重新渲染）
2. React调用组件的渲染函数
3. 执行useLayoutEffect，并且React等待它执行完成
4. 屏幕中重绘完成

详细理解可以参考下面链接（重点关注实例说明）

https://juejin.cn/post/6844904177521426439

2. react hooks 为什么不能在循环和条件判断语句中调用

这是因为React通过单链表来管理Hooks。update阶段，每次调用 useState，链表就会执行 next 向后移动一步。如果将 useState 写在条件判断中，假设条件判断不成立，没有执行里面的 useState 方法，会导致接下来所有的 useState 的取值出现偏移，从而导致异常发生。

3. setState 是同步的还是异步的

setState本身并不是异步，只是因为react的性能优化机制体现为异步。在react的生命周期函数或者作用域下为异步，在原生的环境下为同步。

4. 事件流是什么？

事件流分为事件冒泡和事件捕获

事件流：就是事件的流向,先捕获,再到事件源,最后在冒泡,一共分为三个阶段:捕获阶段、事件源、冒泡阶段

事件冒泡：从事件源朝父级一直到根元素(html).当某个元素的某类型事件被触发时,那么
它的父元素同类型的事件也会被触发,一直触发到根源上；
事件捕获 ：从根元素(HTML)到事件源,当某个元素的某类型事件被触发时,先触发根元素的同类型事件,
朝子一级触发,一直触发到事件源

5. react 的合成事件？react 事件和原生事件的区别？

React合成事件是React 模拟原生DOM事件所有能力 的一个事件对象。

react 中的事件是绑定到 document 上面；而原生的事件是绑定到 dom 上面。相对绑定的地方来说，dom上的事件要优先于document上的事件执行，react的事件对象是合成对象，不是原生的。

具体实例参考：https://www.php.cn/website-design-ask-491123.html

6. react hook中userCallback的用途？

优化子组件渲染次数

7. react hooks 中的 useCallback 和 useMemo

useMemo和useCallback接收的参数都是一样,第一个参数为回调，第二个参数为要依赖的数据

共同作用：依赖数据发生变化, 才会调用，也就是起到缓存的作用。useCallback缓存函数，useMemo缓存返回值。

userMemo：

https://juejin.cn/post/6897038904914870286 

https://github.com/puxiao/react-hook-tutorial/blob/master/11%20useMemo%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md

• 如果你的value是个函数，那么你就可以写成useMemo(()=>(x)=> console.log(x))
• useMemo的目的是“减少组件重新渲染时不必要的函数计算”

userCallback: https://blog.csdn.net/m0_58001779/article/details/125802185

• useCallback函数是一个记忆函数，主要作用就是提高系统性能，在之前，每当状态改变的时候，整个函数组件比如里面的函数，变量都会重新执行，使用这个函数之后，只有当依赖项发生变化，才会重新声明相关函数

8. 为什么要使用shouldComponentUpdate?

shouldComponentUpdate 是 Reac t组件的钩子函数之一，该函数会在组件重新渲染之前调用，由函数的返回的bool值决定是否重新渲染组件。

9. react hooks 函数组件实现 shouldcompensUpdate？

使用 userMemo 实现。

父组件调用子组件，父组件中的任何一个state发生变化，子组件中的方法代码都会重新进行渲染使用 userMemo 可解决重复渲染和多余渲染问题

10. react 项目中使用 class 组件和 函数组件要怎么通信？

使用 ref 通信

具体实例参考：https://blog.csdn.net/yang423712/article/details/117930596

11. react 中的 hooks 解决了什么问题？为啥要出现 hooks ？

① 从组件中提取状态逻辑，解决了在组件之间复用状态逻辑很难的问题；
② 将组件中相互关联的部分拆分成更小的函数，解决了复杂组件的问题；
③ 在非class的情况下使用更多的React特性，解决了class组件与函数组件有差异的问题。