React面试题(附简单版答案)

蔓越莓
240 阅读6分钟

真的遇到过的面试题

  1. React 的生命周期有哪些？
  2. 你用过哪些React的Hooks？
  3. React为什么有自己的合成事件？
  4. React的hooks useMemo 和 useCallBack的区别？
  5. redux的流程描述一下？
  6. vue 和react的区别？
  7. React的性能优化都做过哪些？
  8. React.Memo() 和useMemo() 的区别？
  9. useEffect 怎么实现的异步 ，useEffect怎么实现的同步?
  10. 介绍下React的fiber？
  11. 了解SSR吗？
  12. 介绍jsx的过程？
  13. jsx 和vue 的template的区别是什么？
  14. React函数式编程的好处是什么？
  15. 为什么React的hooks 不能使用if？
  16. React key的作用是什么？
  17. useState初始值是函数时，state的值会是什么？
  18. React的通信方式有哪些？有自己实现过发布订阅模式吗？
  19. 介绍一下vue的双向数据绑定和React的单向数据流？

背景介绍：

React 目前当前比较流行的前端框架；用于构建用户界面JS库；由FaceBoook开发并开源；有虚拟DOM、diff算法、单向数据流、V16.8 引入Hook语法，可替换原来的类组件写法，更便捷；V16引入Fiber架构，对核心算法的重构，解决传统渲染一旦开始不可暂停导致的渲染卡顿问题；V16.6引入React并发实验阶段

答案：

  1. React 的生命周期有哪些？

挂载阶段4个：constructor\static getDerivedStateFromProps\render\componentDidMount

更新阶段4个：getDerivedStateFromProps\shouldComponentUpdate\render getSnapshotBeforeUpdate\componentDidUpdate

卸载阶段4个：componentWillUnmount

移除的3个：componentWillMount + componentWillReceiveProps + componentWillUpdate

错误捕获2个（V16加入的）：getDerivedStateFromError + componentDidCatch

  1. 你用过哪些React的Hooks？

useState、useEffect、useLayoutEffect、useContext

useRef、useImperativeHandle、useMemo、 useCallback、useReducer

redux中的 useDispatch useSeletor

router中的 useNavigate useHistory useLocation useParams

  1. React的hooks useMemo 和 useCallBack的区别？

useMemo 用来缓存变量，返回一个计算结果，useCallback用来缓存函数

  1. 介绍一下useEffect ？

react 的副作用函数，通常用来进行数据请求，手动操作dom，订阅等；第二个参数是依赖数组，不传递的话每次变更都执行，传入依赖数组的话，数组的数据变化，函数执行；空数组的话只有初始化和挂载执行一次；执行顺序和浏览器的任务队列机制有关；

React 在更新 DOM 之后会异步执行useEffect

  1. useEffect 怎么实现的异步 ，useLayoutEffect怎么实现的同步?

useLayoutEffect在【DOM更新后，浏览器绘制前执行】

使用场景：获取dom元素的宽高，样式等，并希望在绘制前生效；

⚠️：useEffect不是微任务也不是宏任务；

他的执行时机类似微任务的执行时机，但他是由 React 内部调度，

在组件更新后的下一个渲染阶段（在 DOM 更新后）执行，它的执行依赖于 React 的更新调度机制，不是由浏览器的微任务队列直接调度。

  1. useState初始值是函数时，state的值会是什么？

函数的返回结果，没有返回值则是undefined

  1. React key的作用是什么？

key 是每个虚拟dom节点的唯一标识，可以帮助react快速的识别哪些节点是相同的；

优化列表渲染：在列表渲染的时候，如果没有key，react就会全部卸载重建，有key的话会复用，移动； 避免使用索引， 因为当列表顺序发生变化或者增删时，索引会变

  1. 为什么React的hooks 不能使用if？（两个原因）
  1. react是会记录hooks的调用顺序的， 后续更新会按照这个固定顺序来更新；放在if中会破坏顺序
  2. 函数组件中其实是个闭包的环境，这样具体的操作函数可以访问外部的state；如果放在if中的话，就会导致获取的值不是最新的；不符合预期
  1. React为什么有自己的合成事件？
  1. 浏览器兼容性
  2. 性能优化：通过事件委托的方式减少dom事件的注册，减少内存使用；引入事件池，避免频繁的创建和销毁
  3. 安全上，组件卸载的时候合成事件会自动销毁
  4. 简化事件处理逻辑，只需要关心事件冒泡就可以了
  5. 统一开发体验

react中是合成事件，所以可以自动清理； 但是如果是键盘，鼠标，滚动条，窗口的大小等， 还是需要在卸载时候清理的， 避免内存泄漏

  1. React.Memo() 和useMemo() 的区别？

都是用来进行性能优化的

  • 作用对象不同

    • React.Memo ： 组件级别的，高阶函数
    • useMemo(): 函数内部，函数式组件的hook，

  • 比较方式不同：

    • 根据传递的依赖数组进行比较
    • 浅比较props，有变化了才去渲染子组件，解决父组件更新 ，子组件也会更新的问题

  • 使用场景不同：

    • 优化函数组件
    • 缓存计算开销大的且依赖特定的props或者state的计算结果
  1. 介绍jsx的过程？

jsx不能直接在浏览器中运行， 需要转译，通过babel会被转译成React.createElement()，这个函数会根据传入的参数生成虚拟dom； 转译后的代码会在ReactDom.render() 渲染成真实的DOM，并插入文档中；状态发生变化后，这个过程会重新执行，先更新 虚拟dom，再更新真实dom

  1. jsx 和vue 的template的区别是什么？

  2. vue 和react的区别？

  3. 介绍一下vue的双向数据绑定和React的单向数据流？

React遵循单项数据流原则，数据从父组件流向子组件，自上而下传递；父组件以属性传入，子组件不能直接修改父组件传递过来的数据，如需要修改，则要通过调用父组件传递下的回调函数等方式 ，父组件改变相应的数据后，再由父组件重新传递更新后的数据给子组件；以此保证数据流向 清晰可追踪

  1. React的性能优化都做过哪些？

React 性能优化：

使用shouldComponentUpdate

使用pureComponent

使用React.Memo()

使用16.6 引入的懒加载 react.lazy 和suspense

渲染使用react-virtualizaed 虚拟列表 实现只渲染可视区域

  1. 介绍下React的fiber？

V16 引入了fiber架构：旨在解决大型复杂渲染卡顿的问题：传统React的更新是同步的，一旦更新无法中断，fiber有任务优先级，任务切片，可暂停可恢复；dom diff树变链表；Fiber节点包含了组件的状态和副作用等信息

  1. React的通信方式有哪些？

props+ 回调函数 事件总线 context redux

  1. redux的流程描述一下？

创建全局唯一状态树，只读

定义action 和action 创建函数

定义reducer

将reducer ，state，中间件作为参数传入createstore中

从ui层用dispatch分发action,是唯一改变state的方式

store 会在reducer中根据action 类型返回新的state

ui层就会更新了

  1. 了解SSR吗？

服务器端渲染， 为了解决SPA 首屏加载太慢，以及SEO不友好的问题；工作原理就是服务端将React组件渲染为HTML字符串，然后把这个字符串发送给客户端；但是对服务器性能要求比较高，开发复杂度会增加

avatar
文章
阅读
粉丝