web前端常见面试题(react篇)

基础部分:

请讲一下react的生命周期?

 

答:React的生命周期从广义上分为三个阶段:挂载、渲染、卸载。

  1. componentWillMount() – 在渲染之前执行,在客户端和服务器端都会执行。
  2. componentDidMount() – 仅在第一次渲染后在客户端执行。
  3. componentWillReceiveProps() – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
  4. shouldComponentUpdate() – 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。
  5. componentWillUpdate() – 在 DOM 中进行渲染之前调用。
  6. componentDidUpdate() – 在渲染发生后立即调用。
  7. componentWillUnmount() – 从 DOM 卸载组件后调用。用于清理内存空间。
  8. getDerivedStateFromProps(nextProps, prevState)-新的钩子,当从父类接收到 props 并且在调用另一个渲染器之前调用。
  9. getSnapshotBeforeUpdate(prevProps, prevState)-新的钩子,在render之后,在 DOM 中进行渲染之前调用。

 

什么是JSX?

 

答:JSX 是J avaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能。就是可以js和xml写到同一文件了。

 

什么是展示组件?什么是容器组件?

 

答:展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。(子组件)
容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 Flux actions,并将其作为回调提供给展示组件。容器组件经常是有状态的,因为它们是(其它组件的)数据源。(父组件)

 

React中Component与PureComponent的区别?

 

答:PureComponent和Component几乎一样对于PureComponent而言,当其props或者state改变之时,新旧propsstate将进行浅对比(shallow comparison)。另一方面,Component默认的情况下其shouldComponentUpdate方法并不进行新旧propsstate的对比。 

 

React 中 key 的重要性是什么?

 

答:key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串,React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

 

什么是有状态组件?什么是无状态组件?

 

答:有状态组件它属于一个class类,有继承,可以通过this来接收状态和属性,有生命周期。

无状态组件 它是一种函数式组件,没有state, 接收Props,渲染DOM,而不关注其他逻辑。

 

什么是ref?

 

答:React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。

这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。

 

什么是高阶组件(HOC)?

 

答:高阶组件是重用组件逻辑的高级方法,是一种源于 React 的组件模式。 HOC 是自定义组件,在它之内包含另一个组件。它们可以接受子组件提供的任何动态,但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯(Pure)”组件。

 

你能用HOC做什么?

 

答:HOC可用于许多任务,例如:

  • 代码重用,逻辑和引导抽象
  • 渲染劫持
  • 状态抽象和控制
  • Props 控制

 

react hook是什么?

 

答:react hook是react 1.6+的新特性,hook是允许从功能组件(function component)“挂钩”React状态和生命周期功能的功能。

 

react组件之间是怎么通信的?

答:

父传子:利用props

子传父:利用props 传入回调函数,或者redux等状态管理框架

跨级组件通信:使用context,或者redux等状态管理框架

 

redux是什么?具体怎么去使用?

答:

 

底层原理:

解析一下react渲染原理和过程?

 

答:因为操作dom元素会触发浏览器的回流和重绘,影响性能,所以减少操作dom就能提升性能。React会调用render函数构建一棵虚拟Dom树。当state/props改变时,react会再次调用render函数,构建一个新的虚拟Dom树,和旧的树作对比,批量更新节点。

 

react使用什么更新节点?原理和过程是什么?

 

答:主要使用了diff算法,react根据两个假设

1.两个相同的组件产生类似的DOM结构,不同组件产生不同DOM结构

2.对于同一层次的一组子节点,它们可以通过唯一的id区分

对传统的diff作了更改。将算法复杂度从O(n^3)降低到O(n)。

react的diff函数只对同层的节点进行比对比,即父节点相同会进行对比,因为不同组件的dom结构不同,所以没必要对比子节点。

如果出现节点不同的情况,会直接删除节点,重新新建节点。

如果节点相同属性不同,则会更新属性。

 

请简述react的事件机制?

 

答:react利用了事件委托机制实现事件机制,事件并没有绑定在真实的dom节点上面,是绑定在最外层的docment上。使用一个统一的监听器,所有的事件都由这个监听器统一分发。

组件挂载更新时,会将事件分门别类放进事件池,事件触发根据event找到对应的组件,再组件标识和事件类型找到对应的事件进行监听回调,然后,执行回调函数。

 

fiber是什么?

 

答:因为js的运数、页面布局和页面绘制都在浏览器的主线程里,所以,如果js占用浏览器主线程事件长会造成掉帧。所以,react团队重写了Reconciler 层,即组件生命周期和diff算法,react团队命名为fiber Reconciler,建立了自己的组件调用栈,让diff计算可打断。

 

请简述fiber的原理和流程?

 

答:Fiber 树在首次渲染的时候会一次过生成,这个树是由Virtual Dom和一些调度信息组成,每个节点包括父节点、子节点、兄弟节点、节点实列。后续进行diff计算时,会根据已有树和最新 Virtual DOM 的信息,生成一棵新的树。这个树每生成一个节点,都会把控制权交还个浏览器,去查看有没有优先级较高的任务需要处理,没有就继续构建。如果有就会放弃当前生成的树,等空闲再重新执行。生成fiber 树的过程中,如果发现需要更新的信息时,fiber Reconciler 会将信息保存Effect List当中,等树构建完之后批量更新,批量更新跟构建fiber不同,是无法打断的。

 

什么是服务器渲染?

 

答:服务器接到用户请求之后,计算出用户需要的数据,然后将数据更新成视图(也就是一串dom字符)发给客户端,客户端直接将这串字符塞进页面即可。

 

服务器渲染和浏览器渲染对比有什么优点?有什么缺点?

 

答:页面相应比较快,用户体验比较好。另外对于搜索引擎比较友好,优化seo。缺点是增加了一层nodejs,增加了服务器的计算。前后端分工不明,不能很好并行开发。

 

posted @ 2020-03-31 22:19  misterng  阅读(...)  评论(...编辑  收藏