考试题整理

1. 说说你对react的理解？有哪些特性？

react，它是用于构建用户界面的javascript库，它只提供了前端方面的解决方案。它遵循着组件化设计模式，声明式编程范式和函数式编程概念。以使前端程序更加高效。它使用虚拟DOM来操作DOM，它遵循着高阶组件到低阶组件的单向数据流。
react的特性：单向数据流、JSX语法、虚拟DOM、声明式编程。Component。

2. 说说Real DOM和Virtual DOM的区别？优缺点？

两者的区别如下：
虚拟 DOM 不会进行排版与重绘操作，而真实 DOM 会频繁重排与重绘
虚拟 DOM 的总损耗是“虚拟 DOM 增删改+真实 DOM 差异增删改+排版与重绘”，真实 DOM 的总损耗是“真实 DOM 完全增删改+排版与重绘”

真实 DOM 的优势：
易用
缺点：
效率低，解析速度慢，内存占用量过高
性能差：频繁操作真实 DOM，易于导致重绘与回流
使用虚拟 DOM 的优势如下：
简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行
缺点：
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

3. 说说React生命周期有哪些不同的阶段？每个阶段对应的方法是？

一共有三个阶段，分别为

挂载阶段（Mounting）:已插入真实的Dom阶段

更新阶段(Updating):正在被重新渲染的阶段

卸载阶段（Unmounting）:已移出真是dom阶段

挂载阶段:

constructor() 在 React 组件挂载之前，会调用它的构造函数。
componentWillMount: 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用
更新运行阶段:

componentWillReceiveProps: 在接受父组件改变后的props需要重新渲染组件时用到的比较多，外部组件传递频繁的时候会导致效率比较低
shouldComponentUpdate():用于控制组件重新渲染的生命周期，state发生变化，组件会进入重新渲染的流程，在这里return false可以阻止组件的更新
render(): render() 方法是 class 组件中唯一必须实现的方法。
*componentWillUpdate(): shouldComponentUpdate返回true以后，组件进入重新渲染完成之前进入这个函数。
**componentDidUpdate(): 每次state改变并重新渲染页面后都会进入这个生命周期
卸载或销毁阶段
componentWillUnmount ()： 在此处完成组件的卸载和数据的销毁。

4.说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

react-redux

react-redux 是的官方 React UI 绑定层，允许您的 React 组件从 Redux 存储中读取数据，并将操作分派到存储以更新状态。

@reduxjs/toolkit

@reduxjs/toolkit 是对 Redux 的二次封装，开箱即用可的一个高效的 Redux 开发工具集，使得创建store、更新store

5.react性能优化有哪些？

react性能是什么？
React凭借virtual DOM和diff算法拥有高效的性能，但是某些情况下，性能明显可以进一步提高

在前面文章中，我们了解到类组件通过调用setState方法， 就会导致render，父组件一旦发生render渲染，子组件一定也会执行render渲染

如何做
我们了解到如何避免不必要的render来应付上面的问题，主要手段是通过shouldComponentUpdate、PureComponent、React.memo，这三种形式。

除此之外还有常见的性能优化手段如下：

避免使用内联函数

服务端渲染

事件绑定方式

懒加载组件

使用 Immutable

使用 React Fragments 避免额外标记

总结
我们了解到react常见的性能优化可以分成三个层面：

代码层面
工程层面
框架机制层面
通过这三个层面的优化结合，能够使基于react项目的性能更上一层楼

6.props和state相同点和不同点？render方法在哪些情况下会执行？

props：

props是一个从外部传进组件的参数，由于React具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据，它是不可改变的，如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props和展示形式不会改变，props除了可以传字符串，数字，还可以传递对象，数组甚至是回调函数

state：

state主要作用是用于组件保存，控制及修改自己的状态，它只能在constructor中初始化，state是可以被改变的，state放改动的一些属性，比如点击选中，再点击取消，类似这种属性就放入带state中，注意：没有state的叫做无状态组件，多用props少用state，多写无状态组件，注意：修改state的值时，必须通过调用setState方法，当我们调用this.setState方法时,React会更新组件的数据状态，并且重新调用render方法

下面来列举一下两者的异同：

不同点：1.props不可以在组件内部修改，但state可以在组件内部修改

2.可以从父组件修改自组件的props，而不能从父组件修改自组件的state

相同点：1.props和state都是导出HTML的原始数据。

2.props和state都是确定性的，如果我们写的组件为同一props和state的组合生成了不同的输出，那木我们肯定在哪里做错了

3.props和state都会触发渲染更新

4.props和state都是纯JS对象（用typeof来判断，结果都是object）

5.可以从父组件得到初始值props和state的初始值

render方法
原理

在类组件和函数组件中，render函数的形式是不同的。
在类组件中render函数指的就是render方法；而在函数组件中，指的就是整个函数组件

在render过程中，React 将新调用的 render函数返回的树与旧版本的树进行比较，这一步是决定如何更新 DOM 的必要步骤，然后进行 diff 比较，更新 DOM树

触发时机

类组件调用 setState 修改状态：
函数组件通过useState hook修改状态：
函数组件通过useState这种形式更新数据，当数组的值不发生改变了，就不会触发render

总结

render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM

在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render

组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state

在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染

所以，一旦执行了setState就会执行render方法，useState 会判断当前值有无发生改变确定是否执行render方法，一旦父组件发生渲染，子组件也会渲染

7. 调和阶段setState干了什么？

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态
这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间
代码中调用setState后，react会将传入的参数对象与组件当前的状态合并，然后触发调和阶段，在调和阶段，react会以相对搞笑的方式来根据新的状态来构建React元素树并且着手重新渲染页面进行重渲染

8. 怎么理解回流跟重绘？什么场景下会触发？

一、定义
回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

二、浏览器解析渲染机制
1、解析HTML，生成DOM树，解析CSS，生成CSSOM树
2、将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3、Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4、Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
5、Display:将像素发送给GPU，展示在页面上

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变
当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来
当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了重绘

三、什么场景会触发？
回流触发时机：
（1）DOM结构发生改变 （添加新的节点或者移除节点）
（2）布局发生改变（修改了width、height、padding、font-size等值）
（3）窗口大小发生改变
（4）调用getComputedStyle方法获取尺寸、位置信息
（5）内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所代替
（6）页面一开始渲染的时候

重绘触发时机：
（1）修改网页内容的样式时，比如文字颜色，背景颜色，边框颜色，文本方向的修改等。
（2）触发回流一定会触发重绘

四、如何避免回流？
修改样式时尽量一次性修改
比如通过cssText修改，比如通过添加class修改；
2.尽量避免频繁的操作DOM
我们可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成，再一次性的操作；
3.尽量避免通过getComputedStyle获取尺寸、位置等信息；
4.对某些元素使用position的absolute或者fixed
并不是不会引起回流，而是开销相对较小，不会对其他元素造成影响。
5.避免设置多项内联样式
6.避免使用css的JavaScript表达式