1.说说你对react的理解?有哪些特性?
React是一个用于构建用户界面的JavaScript库,它专注于构建单页应用程序(SPA)中的用户界面。React 提供了一种高效、灵活和可维护的方式来构建用户界面,使得开发者能够更好地管理复杂的应用程序逻辑和交互。
特性:
-
组件化开发: React 强调将用户界面划分为小的、可重用的组件。每个组件可以拥有自己的状态(state)和属性(props),并且可以通过嵌套和组合来构建复杂的界面。
-
虚拟DOM: React 使用虚拟DOM(Virtual DOM)来提高性能。虚拟DOM 是 React 自己维护的一个内存中的表示,它会与真实的DOM进行比较,并最小化实际的DOM更新,从而提高渲染效率。
-
单向数据流: React 遵循单向数据流的原则,父组件可以将数据传递给子组件,但子组件不能直接修改父组件的数据。这有助于数据流的可追踪性和调试。
-
JSX 语法: React 使用 JSX(JavaScript XML)语法,它允许在 JavaScript 代码中嵌入类似于HTML的标记。这使得界面的构建更加直观和易于阅读。
-
生命周期方法: React 组件有一系列的生命周期方法,允许开发者在组件不同阶段执行代码。这包括组件的创建、更新和销毁等阶段。
-
状态管理: 除了组件的内部状态,React 还提供了一种用于管理全局状态的机制,称为"Context" 和 "Redux"。这些工具可以帮助在应用程序中有效地管理和传递状态。
-
高性能: React 通过虚拟DOM和有效的更新算法,提供了较高的性能。它可以避免频繁的DOM操作,从而提升应用程序的性能和响应速度。
-
可测试性: React 的组件化和单向数据流使得应用程序更容易测试。你可以针对每个组件编写单元测试,确保它们按预期工作。
2.说说Real DOM和Virtual DOM的区别?优缺点?
Real DOM(真实DOM):
- 定义: Real DOM,真实DOM, 意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实DOM结构.
- 更新过程: 当页面需要更新时,Real DOM会进行以下步骤:计算布局、绘制新的DOM元素、删除旧的DOM元素。这个过程可能会引起性能问题,尤其是在复杂的应用中。
- 性能问题: 因为更新Real DOM的成本高昂,频繁的DOM操作会导致页面性能下降,影响用户体验。
Virtual DOM(虚拟DOM):
- 定义: Virtual DOM是一个轻量级的、虚拟的内存表示,是对Real DOM的抽象。它只是一个JavaScript对象,可以快速进行创建、更新和比较。
- 更新过程: 当页面需要更新时,React首先在Virtual DOM中进行更新,然后将更新后的Virtual DOM与之前的Virtual DOM进行比较,找出实际发生变化的部分,最后只更新需要更新的部分到Real DOM中。
- 性能优势: 虚拟DOM的性能优势在于,它将DOM更新操作最小化,避免了频繁的布局计算和绘制操作,从而提高了页面性能。
优点和缺点:
Real DOM:
- 优点:直接操作真实的DOM,更容易使用。
- 缺点:频繁的DOM操作可能导致性能问题,页面更新效率低下。
Virtual DOM:
- 优点:
- 简单方便:如果使用手动操作真实DOM来完成页面,繁琐又容易出错,在大规模应用下维护起来也很困难
- 性能方面:使用Virtual DOM,能够有效避免真实DOM数频繁更新,减少多次引起重绘与回流,提高性能
- 跨平台:React借助虚拟DOM, 带来了跨平台的能力,一套代码多端运行
- 缺点:
- 在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
- 首次渲染大量DOM时,由于多了一层虚拟DOM的计算,速度比正常稍慢
3.说说React生命周期有哪些不同的阶段?每个阶段对应的方法是?
生命周期一共分为三个阶段:
- 创建阶段
- 更新阶段
- 卸载阶段
创建阶段:
constructor()
:组件的构造函数,在创建组件实例时调用。static getDerivedStateFromProps(props, state)
:接收外部属性props
和内部状态state
,返回新的状态对象,用于替代旧的componentWillReceiveProps
方法。render()
:渲染组件内容,返回 React 元素。componentDidMount()
:在组件第一次渲染完成后调用,通常用于执行副作用。
更新阶段:
static getDerivedStateFromProps(props, state)
:同挂载阶段。shouldComponentUpdate(nextProps, nextState)
:决定是否重新渲染组件,返回布尔值。可用于性能优化。render()
:同挂载阶段。- getSnapshotBeforeUpdate:该周期函数在render后执行,执行之时DOM元素还没有被更新
- componentDidUpdate:执行时机:组件更新结束后触发
componentDidUpdate(prevProps, prevState, snapshot)
:在组件更新完成后调用,通常用于处理更新后的副作用
卸载阶段:
- componentWillUnmount:此方法用于组件卸载前,清理一些注册是监听事件,或者取消订阅的网络请求等
4.说说React中setState执行机制?
一个组件的显示形态可以由数据状态和外部参数所决定,而数据状态就是state
当需要修改里面的值的状态需要通过调用setState
来改变,从而达到更新组件内部数据的作用。
在使用setState
更新数据的时候,setState
的更新类型分成:
-
异步更新:在组件生命周期或React合成事件中,setState是异步
-
同步更新:在setTimeout或者原生dom事件中,setState是同步
-
批量更新:对同一个值进行多次
setState
,setState
的批量更新策略会对其进行覆盖,取最后一次的执行结果
8-17更新:
5.介绍下 Tree Shaking?
Tree Shaking是一种用于减少JavaScript中定义对象属性的方法。通过该方法可以精确的控制对象的行为。
他接受三个参数:要定义属性的对象,要定义或修改的属性名,属性描述符(get,set, value ,configurable(是否可以被删除或修改)等)
6.清除浮动的几种方式,各自的优缺点,推荐使用哪种?
1)额外空标签法:给哪个标签清除浮动,就在其后面添加一个空白标签,设置其clear :bath;
优点:通俗易懂 ,书写方便。
缺点:添加许多无意义标签,结构化比较差。
2)父元素添加overflow:hidden:通过触发BFC方式,实现清除浮动。
优点:代码清晰简洁。
缺点:内容增加时容易造成不会自动换行导致的内容被隐藏掉,无法显示要溢出的元素。
3)使用伪元素after清除浮动
优点:符合闭合浮动的思想,结构化语义正确
缺点:IE6-7不支持伪元素;after,使用zoom:1;触发hasLayout。
4)为父元素设置高度
优点:简单除暴直接有效,清除了浮动带来的影响。
缺点:需要手动添加高度,程序后面高度发生变化还要再次修改高度,后期维护麻烦。
5)使用before和after双伪元素清除浮动:
优点:代码更简洁
缺点:使用zoom:1,;触发hasLayout。
通常情况下,推荐使用空标签加清除浮动的样式或overflow这种简单有效的方式,如果需要更强大的清除浮动的效果,则推荐使用伪元素清除。