2021.8-React面试题

野性酷女 2022-09-11 03:11 241阅读 0赞

### 一.讲下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 ###

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

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

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

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

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

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

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

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

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

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

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