前端面试题-react

1 React 中 keys 的作⽤是什么？

Keys 是 React ⽤于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识

• 在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯⼀性。在 React
  Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动⽽来
  的元素，从⽽减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与
  本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性

2 传⼊ setState 函数的第⼆个参数的作⽤是什么？

该函数会在 setState 函数调⽤完成并且组件开始重渲染的时候被调⽤，我们可以⽤该函数来监听渲染是否完成：

this.setState(
{ username: 'tylermcginnis33' },
() => console.log('setState has finished and the component has re-rendere
)
this.setState((prevState, props) => {
return {
streak: prevState.streak   props.count
}
})

3 React 中 refs 的作⽤是什么

• Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄
• 可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为
  回调函数的第⼀个参数返回

4 在⽣命周期中的哪⼀步你应该发起 AJAX 请求

我们应当将AJAX 请求放到 componentDidMount 函数中执⾏，主要原因有下

• React 下⼀代调和算法 Fiber 会通过开始或停⽌渲染的⽅式优化应⽤性能，其会影响
  到 componentWillMount 的触发次数。对于 componentWillMount 这个⽣命周期函数
  的调⽤次数会变得不确定， React 可能会多次频繁调⽤ componentWillMount 。如果我
  们将 AJAX 请求放到 componentWillMount 函数中，那么显⽽易⻅其会被触发多次，⾃
  然也就不是好的选择。
• 如果我们将 AJAX 请求放置在⽣命周期的其他函数中，我们并不能保证请求仅在组件挂载
  完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成，并且调⽤了
  setState 函数将数据添加到组件状态中，对于未挂载的组件则会报错。⽽在
  componentDidMount 函数中进⾏ AJAX 请求则能有效避免这个问题

5 shouldComponentUpdate 的作⽤

shouldComponentUpdate 允许我们⼿动地判断是否要进⾏组件更新，根据组件的应⽤场景设置函数的合理返回值能够帮我们避免
不必要的更新

6 如何告诉 React 它应该编译⽣产环境版

通常情况下我们会使⽤ Webpack 的 DefinePlugin ⽅法来将 NODE_ENV变量值设置为 production 。编译版本中 React 会忽略
 propType 验证以及其他的告警信息，同时还会降低代码库的⼤⼩， React 使⽤了 Uglify插件来移除⽣产环境下不必要的注释
 等信息

7 概述下 React 中的事件处理逻辑

为了解决跨浏览器兼容性问题， React 会将浏览器原⽣事件（ BrowserNative Event ）封装为合成事件（ SyntheticEvent ）
传⼊设置的事件处理器中。这⾥的合成事件提供了与原⽣事件相同的接⼝，不过它们屏蔽了底层浏览器的细节差异，保证了⾏为的⼀致
性。另外有意思的是， React 并没有直接将事件附着到⼦元素上，⽽是以单⼀事件监听器的⽅式将所有的事件发送到顶层进⾏
处理。这样 React 在更新 DOM 的时候就不需要考虑如何去处理附着在 DOM 上的事件监听器，最终达到优化性能的⽬的

8 createElement 与 cloneElement 的区别是什么

createElement 函数是 JSX 编译之后使⽤的创建 React Element 的函数，⽽ cloneElement 则是⽤于复制某个元素并传
⼊新的 Props

9 redux中间件

中间件提供第三⽅插件的模式，⾃定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机
制可以让我们改变数据流，实现如异步 action ， action 过滤，⽇志输出，异常报告等功能

• redux-logger ：提供⽇志输出
• redux-thunk ：处理异步操作
• redux-promise ：处理异步操作， actionCreator 的返回值是 promise

10 redux有什么缺点

• ⼀个组件所需要的数据，必须由⽗组件传过来，⽽不能像 flux 中直接从 store 取。
• 当⼀个组件相关数据更新时，即使⽗组件不需要⽤到这个组件，⽗组件还是会重新
  render ，可能会有效率影响，或者需要写复杂的 shouldComponentUpdate 进⾏判断。

11 react组件的划分业务组件技术组件？

• 根据组件的职责通常把组件分为UI组件和容器组件。
• UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
• 两者通过 React-Redux 提供 connect ⽅法联系起来

12 react⽣命周期函数

初始化阶段

• getDefaultProps :获取实例的默认属性
• getInitialState :获取每个实例的初始化状态
• componentWillMount ：组件即将被装载、渲染到⻚⾯上
• render :组件在这⾥⽣成虚拟的 DOM 节点
• omponentDidMount :组件真正在被装载之后

运⾏中状态

• componentWillReceiveProps :组件将要接收到属性的时候调⽤
• shouldComponentUpdate :组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻⽌ render 调⽤，后⾯的函数不会被继续执⾏了）
• componentWillUpdate :组件即将更新不能修改属性和状态
  render :组件重新描绘
• componentDidUpdate :组件已经更新

销毁阶段

• componentWillUnmount :组件即将销毁

13 react性能优化是哪个周期函数

shouldComponentUpdate 这个⽅法⽤来判断是否需要调⽤render⽅法重新描
绘dom。因为dom的描绘⾮常消耗性能，如果我们能在
shouldComponentUpdate⽅ 法中能够写出更优化的 dom diff 算法，可以极
⼤的提⾼性能

14 为什么虚拟dom会提⾼性能

虚拟 dom 相当于在 js 和真实 dom 中间加了⼀个缓存，利⽤ dom diff 算法避免了没有必要的 dom 操作，从⽽提⾼性能

具体实现步骤如下

• ⽤ JavaScript 对象结构表示 DOM 树的结构；然后⽤这个树构建⼀个真正的 DOM 树，
  插到⽂档当中
• 当状态变更的时候，重新构造⼀棵新的对象树。然后⽤新的树和旧的树进⾏⽐较，记录两
  棵树差异
• 把2所记录的差异应⽤到步骤1所构建的真正的 DOM 树上，视图就更新

15 diff算法?

• 把树形结构按照层级分解，只⽐较同级元素。
• 给列表结构的每个单元添加唯⼀的 key 属性，⽅便⽐较。
• React 只会匹配相同 class 的 component （这⾥⾯的 class 指的是组件的名字）
• 合并操作，调⽤ component 的 setState ⽅法的时候, React 将其标记为 - dirty .
  到每⼀个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
• 选择性⼦树渲染。开发⼈员可以重写 shouldComponentUpdate 提⾼ diff 的性能

16 react性能优化⽅案

• 重写 shouldComponentUpdate 来避免不必要的dom操作
• 使⽤ production 版本的 react.js
• 使⽤ key 来帮助 React 识别列表中所有⼦组件的最⼩变化

17 简述flux 思想

 Flux 的最⼤特点，就是数据的"单向流动"。

• ⽤户访问 View
• View 发出⽤户的 Action
• Dispatcher 收到 Action ，要求 Store 进⾏相应的更新
• Store 更新后，发出⼀个 “change” 事件
• View 收到 “change” 事件后，更新⻚⾯

18 说说你⽤react有什么坑点？

1. JSX做表达式判断时候，需要强转为boolean类型

   如果不使⽤ !!b 进⾏强转数据类型，会在⻚⾯⾥⾯输出 0 。
   

render() {
const b = 0;
return <div>
{
!!b && <div>这是⼀段⽂本</div>
}
</div>
}

3. 尽量不要在 componentWillReviceProps ⾥使⽤ setState，如果⼀定要使⽤，那么需要判
   断结束条件，不然会出现⽆限重渲染，导致⻚⾯崩溃
4. 给组件添加ref时候，尽量不要使⽤匿名函数，因为当组件更新的时候，匿名函数会被当做
   新的prop处理，让ref属性接受到新函数的时候，react内部会先清空ref，也就是会以null为回
   调参数先执⾏⼀次ref这个props，然后在以该组件的实例执⾏⼀次ref，所以⽤匿名函数做ref
   的时候，有的时候去ref赋值后的属性会取到null
5. 遍历⼦节点的时候，不要⽤ index 作为组件的 key 进⾏传⼊

19 我现在有⼀个button，要⽤react在上⾯绑定点击事件，要怎么做？

class Demo {
render() {
return <button onClick={(e) => {
alert('我点击了按钮')
}}>
按钮
</button>
}
}

你觉得你这样设置点击事件会有什么问题吗？

由于 onClick 使⽤的是匿名函数，所有每次重渲染的时候，会把该onClick 当做⼀个新的 prop 来处理，会将内部缓存的 
onClick 事件进⾏重新赋值，所以相对直接使⽤函数来说，可能有⼀点的性能下降

修改

class Demo {
onClick = (e) => {
alert('我点击了按钮')
}
render() {
return <button onClick={this.onClick}>
按钮
</button>
}

20 react 的虚拟dom是怎么实现的

⾸先说说为什么要使⽤ Virturl DOM ，因为操作真实 DOM 的耗费的性能代价太⾼，所以 react 内部使⽤ js 实现了⼀套dom结构，
在每次操作在和真实dom之前，使⽤实现好的diff算法，对虚拟dom进⾏⽐较，递归找出有变化的dom节点，然后对其进⾏更新操作。
为了实现虚拟 DOM ，我们需要把每⼀种节点类型抽象成对象，每⼀种节点类型有⾃⼰的属性，也就是prop，每次进⾏ diff 的时候， react 会先⽐较该节点类型，假如节点类型不⼀样，那么react 会直接删除该节点，然后直接创建新的节点插⼊到其中，假如节点类型
⼀样，那么会⽐较 prop 是否有更新，假如有 prop 不⼀样，那么 react会判定该节点有更新，那么重渲染该节点，然后在对其⼦
节点进⾏⽐较，⼀层⼀层往下，直到没有⼦节点

21 react 的渲染过程中，兄弟节点之间是怎么处理的？也就是key值不⼀样的时候

通常我们输出节点的时候都是map⼀个数组然后返回⼀个 ReactNode ，为了⽅便 react 内部进⾏优化，我们必须给每⼀个 
reactNode 添加 key ，这个 key prop 在设计值处不是给开发者⽤的，⽽是给react⽤的，⼤概的作⽤就是给每⼀个 reactNode
 添加⼀个身份标识，⽅便react进⾏识别，在重渲染过程中，如果key⼀样，若组件属性有所变化，则 react 只更新组件对应的
 属性；没有变化则不更新，如果key不⼀样，则react先销毁该组件，然后重新创建该组件

22 那给我介绍⼀下react

1. 以前我们没有jquery的时候，我们⼤概的流程是从后端通过ajax获取到数据然后使⽤jquery
   ⽣成dom结果然后更新到⻚⾯当中，但是随着业务发展，我们的项⽬可能会越来越复杂，
   我们每次请求到数据，或则数据有更改的时候，我们⼜需要重新组装⼀次dom结构，然后
   更新⻚⾯，这样我们⼿动同步dom和数据的成本就越来越⾼，⽽且频繁的操作dom，也使
   我我们⻚⾯的性能慢慢的降低。
2. 这个时候mvvm出现了，mvvm的双向数据绑定可以让我们在数据修改的同时同步dom的更
   新，dom的更新也可以直接同步我们数据的更改，这个特定可以⼤⼤降低我们⼿动去维护
   dom更新的成本，mvvm为react的特性之⼀，虽然react属于单项数据流，需要我们⼿动实
   现双向数据绑定。
3. 有了mvvm还不够，因为如果每次有数据做了更改，然后我们都全量更新dom结构的话，也
   没办法解决我们频繁操作dom结构(降低了⻚⾯性能)的问题，为了解决这个问题，react内
   部实现了⼀套虚拟dom结构，也就是⽤js实现的⼀套dom结构，他的作⽤是讲真实dom在js
   中做⼀套缓存，每次有数据更改的时候，react内部先使⽤算法，也就是鼎鼎有名的diff算
   法对dom结构进⾏对⽐，找到那些我们需要新增、更新、删除的dom节点，然后⼀次性对
   真实DOM进⾏更新，这样就⼤⼤降低了操作dom的次数。 那么diff算法是怎么运作的呢，
   ⾸先，diff针对类型不同的节点，会直接判定原来节点需要卸载并且⽤新的节点来装载卸载
   的节点的位置；针对于节点类型相同的节点，会对⽐这个节点的所有属性，如果节点的所
   有属性相同，那么判定这个节点不需要更新，如果节点属性不相同，那么会判定这个节点
   需要更新，react会更新并重渲染这个节点。
4. react设计之初是主要负责UI层的渲染，虽然每个组件有⾃⼰的state，state表示组件的状
   态，当状态需要变化的时候，需要使⽤setState更新我们的组件，但是，我们想通过⼀个组
   件重渲染它的兄弟组件，我们就需要将组件的状态提升到⽗组件当中，让⽗组件的状态来
   控制这两个组件的重渲染，当我们组件的层次越来越深的时候，状态需要⼀直往下传，⽆
   疑加⼤了我们代码的复杂度，我们需要⼀个状态管理中⼼，来帮我们管理我们状态state。
5. 这个时候，redux出现了，我们可以将所有的state交给redux去管理，当我们的某⼀个state
   有变化的时候，依赖到这个state的组件就会进⾏⼀次重渲染，这样就解决了我们的我们需
   要⼀直把state往下传的问题。redux有action、reducer的概念，action为唯⼀修改state的
   来源，reducer为唯⼀确定state如何变化的⼊⼝，这使得redux的数据流⾮常规范，同时也
   暴露出了redux代码的复杂，本来那么简单的功能，却需要完成那么多的代码。
6. 后来，社区就出现了另外⼀套解决⽅案，也就是mobx，它推崇代码简约易懂，只需要定义
   ⼀个可观测的对象，然后哪个组价使⽤到这个可观测的对象，并且这个对象的数据有更
   改，那么这个组件就会重渲染，⽽且mobx内部也做好了是否重渲染组件的⽣命周期
   shouldUpdateComponent，不建议开发者进⾏更改，这使得我们使⽤mobx开发项⽬的时
   候可以简单快速的完成很多功能，连redux的作者也推荐使⽤mobx进⾏项⽬开发。但是，
   随着项⽬的不断变⼤，mobx也不断暴露出了它的缺点，就是数据流太随意，出了bug之后
   不好追溯数据的流向，这个缺点正好体现出了redux的优点所在，所以针对于⼩项⽬来说，
   社区推荐使⽤mobx，对⼤项⽬推荐使⽤redux

这篇好文章是转载于：学新通技术网