2021.8-React面试题

一.讲下redux的核心概念和⼯作流程？

核心概念：

• Store：保存数据的地⽅，你可以把它看成⼀个容器，整个应⽤只能有⼀个Store；
• State：Store对象包含所有数据，如果想得到某个时点的数据，就要对Store⽣成快照，这种时点的数据集合，就叫State；
• Action： State的变化,会导致View的变化。但是，⽤户接触不到State，只能接触到View。所以，State的变化必须是View导致的。Action就是View发出的通知，表示State应该要发⽣变化了；
• Action Creator：View要发送多少种消息，就会有多少种Action。如果都⼿写，会很麻烦，所以我们定义⼀个函数来⽣成Action，这个函数就叫Action Creator；
• Reducer：Store收到Action以后，必须给出⼀个新的State，这样View才会发⽣变化。这种State的计算过程就叫做Reducer。Reducer是⼀个函数，它接受Action和当前State作为参数，返回⼀个新的State；
• dispatch：是View发出Action的唯⼀⽅法。

然后我们过下整个⼯作流程：

1. ⾸先，⽤户（通过View）发出Action，发出⽅式就⽤到了dispatch⽅法；
2. 然后，Store⾃动调⽤Reducer，并且传⼊两个参数：当前State和收到的Action，Reducer会返回新的State；
3. State⼀旦有变化，Store就会调⽤监听函数，来更新View。
   到这⼉为⽌，⼀次⽤户交互流程结束。可以看到，在整个流程中数据都是单向流动的，这种⽅式保证了流程的清晰。

二.React中key作用是什么？

目的：帮助 React 跟踪哪些项目已更改、添加或从列表中删除。在diff算法中，key用来判断该元素节点是被 移动过来的还是新创建元素，减少不必要的元素重复渲染。

三.React组件生命周期的阶段是什么？

React 组件的生命周期有三个不同的阶段：

1. 初始渲染阶段：这是组件即将开始其生命之旅并进入 DOM 的阶段。
2. 更新阶段：一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
3. 卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。

四.简单聊聊生命周期（指出（组件）生命周期方法的不同）

• constuctor:在构造函数中初始化props和state
• componentWillMount–在组件渲染之前执行，对state进行最后的修改 render:渲染
• componentDidMount– 在组件渲染之后执行
• componentWillReceiveProps – 这个周期函数作用于特定的 prop 改变导致的 state 转换
• shouldComponentUpdate --用来做性能优化的，根据特定条件返回 true 或
  false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。
• componentWillUpdate – 数据在改变之前执行
• componentDidUpdate --渲染发生后立即调用
• componentWillUnmount – 从 DOM 卸载组件后调用。用于清理内存空间

五.区分Real DOM和Virtual DOM

Real DOM	Virtual DOM
1.更新缓慢	1.更新更快
2.可以直接更新HTML	2.无法直接更新HTML
3.如果元素更新，则创建新DOM	3.如果元素更新，则更新JSX
4.DOM操作代价很高	4.DOM操作很简单
5.消耗的内存较多	5.很少消耗内存

六.区分有状态和无状态组件。

有状态组件	无状态组件
1.在内存中存储有关组件状态变化的信息	1.计算组件的内部状态
2.有权改变状态	2. 无权改变状态
3. 包含过去、现在和未来可能的状态变化情况	3. 不包含过去，现在和未来可能发生的状态变化情况
4. 接受无状态组件状态变化要求的通知，然后将 props 发送给他们。	4.从有状态组件接收 props 并将其视为回调函数。

七.React中的合成事件是什么？

合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。

八.你对 React 的 refs 有什么了解？

refs是提供一种方式让我们访问DOM节点或在render方法中创建React元素，在某些特殊的情况下，能够获取到组件实例或者DOM元素进行操作

九.当你调用setState的时候，发生了什么事？

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。

一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。

通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。