面试 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

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash?1.1

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

Python GUI框架中的PyQt详解

《PythonGUI框架中的PyQt详解》PyQt是Python语言中最强大且广泛应用的GUI框架之一,基于Qt库的Python绑定实现,本文将深入解析PyQt的核心模块,并通过代码示例展示其应用场... 目录一、PyQt核心模块概览二、核心模块详解与示例1. QtCore - 核心基础模块2. QtWid

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(