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
返回一个新状态
15. context 在函数组件中与类组件中分别是如何获取并使用的？
类组件：const context=React.createContext()
页面使用：<context.Provider value={themes.dark}><Home/></context.Provider>
子组件使用<context.Consumer> {()=>{}} </context.Consumer>
hooks：context=React.createContext()
使用：
```jsx
<context.Provider value={themes.dark}>
<Home/>
</context.Provider>
子组件：:const context=useContext(context)
16. 路由直系页面可以直接使用 history,那非直系，隔代页面中如何使用路由相关信息？
withRouter
17. 三列布局，左右分别为宽为 200px,中间自适应，要求使用三种以上方法实现！
定位 浮动 flex
18. 浏览器兼容性问题有哪些？（css、js）
- img 下面白边
- a 下划线
- li 父级有边框浏览器不同可能在边框外面也可能在边框里面
19. 如何实现一个元素垂直水平居中，用三种以上代码实现？
定位(定位中有俩种方法：一种是直接定位，一种是配合css3中的transform：translateY加具体的高度来实现垂直居中)flex
20. 在使用 react 项目开发时，你们是如何与后端进行接口联调的？
通过代理发送请求，然后ajax+axios获取请求数据看数据能不能用
21. 在我们使用 mobx 时，我们在具体页面中如何使用 mobx 中的 state，如何操作 setState?
@withRouter
@inject("first")
@observa
this.props.first.定义的名称
通过@action 进行数据改写
使用 this.porps.first.事件名称调用
22. 在使用 redux 如何修改 state，通过什么方法实现，分别是什么？
通过 reducer 返回一个新数据，使用 action 进行改变 state，用 dispatch 操作了具体 action
23. 在 redux 中 action 是做什么用的？如何书写？
action 是改变 state 的
24. 在 redux 中如何实现一个 ajax 请求？
通过 Actions 中进行 ajax 请求
25. 如何将两个或多个组件嵌入到一个组件中？
用div或者<React.Fragment></React.Fragment>标签包裹
26. 如何在组件更新时再发起一个ajax 请求，在更新时需要注意什么？
在ComponentDidUpdata中写ajax请求，需要注意的是，为了防止死循环，需要加一个if判断，满足条件时再发起请求。
27. 路由直系页面可以直接使用history,那非直系，隔代页面中如何使用路由相关信息？
使用withRouter将非直系包裹。
28.hooks的出现给react带来了什么好处?
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性
29. React.PureComponent和Component的区别？
purecomponent是一个更具有性能的component，它可以通过props和state的浅层对比来实现组件的shouldComponentUpdate，更新，而component没有
30.PureComponent优缺点
优点：
不需要开发者自己实现shouldComponentUpdate，就可以进行简单的判断来提升性能。
缺点：
可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新。
