react面试题（四）面试必备

1. setState 何时同步何时异步？

(1) setState
只在合成事件（react为了解决跨平台，兼容性问题，自己封装了一套事件机制，代理了原生的事件，像在jsx中常见的onClick、onChange这些都是合成事件）和钩子函数（生命周期）中是“异步”的，在原生事件和
setTimeout 中都是同步的

（2）setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数
setState(partialState, callback) 中的callback拿到更新后的结果

(3）setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout
中不会批量更新，在“异步”中如果对同一个值进行多次 setState ， setState
的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在更新时会对其进行合并批量更新

2. react渲染机制

（1）当页面一打开，就会调用render构建一棵DOM树

（2）当数据发生变化（ state | props ）时，就会再渲染出一棵DOM树

（3）此时，进行diff运算，两棵DOM树进行差异化对比，找到更新的地方进行批量改动

3. React中refs 的作用是什么？

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄

我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄

该值会作为回调函数的第一个参数返回

4.在构造函数中调用 super(props) 的目的是什么

在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用
super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props

5. setState的两个参数

第一个参数是要改变的state对象

第二个参数是state导致的页面变化完成后的回调，等价于componentDidUpdate

6、为什么虚拟 DOM 会提高性能? 说下他的原理

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

7、理解“在React中，一切都是组件”这句话

组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分
每个组件彼此独立，而不会影响 UI 的其余部分

8. 了解redux么，说一下redux

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer

三大原则：

1 唯一数据源(整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个store 中)
2 reducer必须是纯函数（输入必须对应着唯一的输出）
3 State 是只读的, 想要更改必须经过派发action

9. redux的工作流程：

使用通过reducer创建出来的Store发起一个Action，reducer会执行相应的更新state的方法，当state更新之后，view会根据state做出相应的变化

1 提供getState()获取到state
2 通过dispatch(action)发起action更新state
3 通过subscribe()注册监听器

10.redux数据流通的过程

1 用户操作视图 　　
2 发起一次dispatch。有异步：返回一个函数（使用thunk中间件），没有异步：return {} 　　
3 进入reducer,通过对应的type去修改state,最后返回一个新的state

11.redux本身有什么不足？

1 向事件池中追加方法时，没有做去重处理 　　
2 把绑定的方从在事件池中移除掉时，用的是arr.splice(index,1)，这样可能会引起数组塌陷 　　
3 reducer中state，每次返回都需要深克隆，可以在redux中获取状态信息时，深克隆，这样就不用在reducer里深克隆了

12 列出 Redux 的组件

1 Action – 这是一个用来描述发生了什么事情的对象
2 Reducer – 这是一个确定状态将如何变化的地方
3 Store – 整个程序的状态/对象树保存在Store中
4 View – 只显示 Store 提供的数据

13. 解释 Reducer 的作用

Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action
来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态

14 Store 在 Redux 中的意义是什么？

Store 是一个 JavaScript
对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux
非常简单且是可预测的。我们可以将中间件传递到 store 处理数据，并记录改变存储状态的各种操作。所有操作都通过 reducer
返回一个新状态