面试 React 框架八股文十问十答第七期

本文主要是介绍面试 React 框架八股文十问十答第七期,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

面试 React 框架八股文十问十答第七期

作者:程序员小白条,个人博客

相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!

⭐点赞⭐收藏⭐不迷路!⭐

1)React 废弃了哪些生命周期?为什么?

在React 16.3版本后,React废弃了一些生命周期方法,这是为了简化API、提高可维护性以及引入更好的异步渲染机制。以下是被废弃的生命周期方法:

  • componentWillMount: 该方法在组件即将被挂载到DOM之前调用。由于异步渲染的引入,React团队建议在 componentDidMount 中执行相应的操作,因为此时可以确保组件已经被挂载。
  • componentWillUpdate: 该方法在组件即将重新渲染时调用。React 16.3之后,建议使用 componentDidUpdate 替代,因为这样可以避免在同一生命周期中执行可能导致副作用的操作。
  • componentWillReceiveProps: 该方法在组件即将接收新的props时调用。React团队认为这个生命周期容易出错且难以理解,因此推荐使用 static getDerivedStateFromPropscomponentDidUpdate 来替代。

这些变更的目标是为了更好地支持异步渲染,并提供更一致的生命周期方法。

2)React 16.X 中 props 改变后在哪个生命周期中处理

在React 16.X中,当组件接收到新的props时,props的改变会在 componentDidUpdate 生命周期中被处理。在这个生命周期方法中,你可以比较前后的props,执行相应的操作,例如根据新的props更新组件的内部状态。

componentDidUpdate(prevProps) {// 检查props是否发生变化if (this.props.someProp !== prevProps.someProp) {// 执行相应的操作// 例如,更新组件的状态this.setState({/* updated state */});}
}

3)React 性能优化在哪个生命周期?它优化的原理是什么?

性能优化通常在 shouldComponentUpdate 生命周期中进行。在这个生命周期方法中,你可以控制组件是否需要重新渲染。默认情况下,React会在每次 setState 调用时重新渲染组件,但通过在 shouldComponentUpdate 中进行适当的比较,你可以避免不必要的渲染,提高性能。

shouldComponentUpdate 接收两个参数:nextPropsnextState。你可以比较这些新的props和state与当前的props和state,如果它们相等或符合某些条件,返回 false 阻止重新渲染,否则返回 true 允许重新渲染。

这一优化原理是避免不必要的渲染,减少了虚拟DOM的比较和实际DOM的更新操作,从而提升了性能。

4)state 和 props 触发更新的生命周期分别有什么区别?

  • props 触发更新:
    • 当组件的props发生变化时,会触发组件的更新。
    • 与props相关的生命周期方法包括 componentWillReceiveProps(已废弃)和 componentDidUpdate
    • componentDidUpdate 中可以比较新旧props,执行相应的操作。
  • state 触发更新:
    • 当组件的state发生变化时,也会触发组件的更新。
    • 与state相关的生命周期方法包括 shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate
    • 可以在 shouldComponentUpdate 中进行状态变化的判断,决定是否进行更新,从而进行性能优化。

5)React中发起网络请求应该在哪个生命周期中进行?为什么?

发起网络请求通常应该在组件的 componentDidMount 生命周期中进行。这是因为 componentDidMount 在组件挂载到DOM后调用,这样可以确保组件已经渲染到页面上,用户能够看到,并且此时可以执行异步操作,如网络请求。

componentDidMount 中发起网络请求有以下好处:

  • 避免了阻塞渲染:在 componentDidMount 中进行网络请求,不会阻塞组件的渲染过程,用户能够快速看到页面内容。
  • 避免重复请求:由于 componentDidMount 只会在组件挂载时被调用一次,因此可以避免重复发起相同的网络请求。

在请求返回后,可以使用 setState 更新组件的状态,触发重新渲染以展示从服务器获取的数据。

6)React 16中新生命周期有哪些

在React 16中引入了新的生命周期方法,主要是为了支持异步渲染和更好地处理副作用。以下是React 16中引入的新生命周期方法:

  • static getDerivedStateFromProps(props, state): 这个静态方法在组件每次渲染前被调用,它接收新的props和当前的state作为参数,用于计算并返回新的state。与 componentWillReceiveProps 的替代关系最密切。
  • getSnapshotBeforeUpdate(prevProps, prevState): 在更新之前被调用,它的返回值将作为第三个参数传递给 componentDidUpdate。主要用于获取更新前的一些DOM信息,通常和 componentDidUpdate 一起使用。

7) 父子组件的通信方式?

父子组件之间通信的方式有多种,其中常见的包括:

  • props传递: 父组件通过props向子组件传递数据。
// 父组件
<ChildComponent data={someData} />// 子组件
const ChildComponent = (props) => {// 使用 props.data
};
  • 回调函数: 父组件通过回调函数将函数传递给子组件,子组件可以调用这个函数与父组件通信。
// 父组件
<ChildComponent onAction={handleAction} />// 子组件
const ChildComponent = ({ onAction }) => {// 调用父组件传递的回调函数onAction(data);
};
  • React Context: 使用React Context可以在组件树中共享数据,父组件提供Context,子组件通过Context订阅数据。
  • Redux或其他状态管理库: 对于大型应用,可以使用状态管理库进行状态的集中管理,实现组件之间的通信。

8)跨级组件的通信方式?

当组件层级较深,需要进行跨级通信时,可以使用以下方式:

  • React Context: 创建一个Context,然后在组件树中提供和消费这个Context,实现跨级组件之间的数据传递。
  • Redux或其他状态管理库: 在全局状态管理库中存储和获取数据,实现跨级组件的通信。

9)非嵌套关系组件的通信方式?

对于非嵌套关系的组件,可以使用中介者模式或全局状态管理库等方式进行通信。

  • 中介者模式: 可以创建一个中介者组件,负责管理和传递信息,其他组件通过中介者进行通信。
  • 全局状态管理库: 使用像Redux这样的全局状态管理库,将需要共享的数据存储在全局状态中,各个组件可以通过订阅和派发动作来进行通信。

10)如何解决 props 层级过深的问题

深层次的props传递可能导致代码难以维护和理解。为了解决这个问题,可以考虑以下几种方法:

  • 使用React Context: 将需要共享的数据使用React Context提供在组件树的上层,避免通过多层嵌套传递。
  • 使用状态管理库: 将共享的状态存储在全局状态管理库(如Redux)中,各组件通过连接器(Connector)或Hooks来获取和更新状态。
  • 组件组合: 将多个小组件组合成一个复合组件,内部进行props传递,外部只需与复合组件交互。
  • 提取组件: 当遇到深层次的props传递时,考虑是否有必要将一些相关的props提取到一个新的组件中,以减少每个组件的props数量。

通过这些方式,可以更好地管理和组织组件之间的数据传递,使代码更清晰和可维护。

开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star!

⭐点赞⭐收藏⭐不迷路!⭐

这篇关于面试 React 框架八股文十问十答第七期的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/604017

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

数据库面试必备之MySQL中的乐观锁与悲观锁

《数据库面试必备之MySQL中的乐观锁与悲观锁》:本文主要介绍数据库面试必备之MySQL中乐观锁与悲观锁的相关资料,乐观锁适用于读多写少的场景,通过版本号检查避免冲突,而悲观锁适用于写多读少且对数... 目录一、引言二、乐观锁(一)原理(二)应用场景(三)示例代码三、悲观锁(一)原理(二)应用场景(三)示例

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》:本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo