1、说⼀下React
React是Facebook 开发的前端JavaScript库
V层：react并不是完整的MVC框架，⽽是MVC中的C层
虚拟DOM：react引⼊虚拟DOM，每当数据变化通过reactdiff运算，将上⼀次的虚拟DOM与本次渲染的DOM进⾏对⽐，仅仅只渲染更新的，有效减少了DOM操作
JSX语法：js+xml，是js的语法扩展，编译后转换成普通的js对象
组件化思想：将具有独⽴功能的UI模块封装为⼀个组件，⽽⼩的组件⼜可以通过不同的组合嵌套组成⼤的组件，最终完成整个项⽬的构建
单向数据流：指数据的流向只能由⽗级组件通过props讲数据传递给⼦组件，不能由⼦组件向⽗组件传递数据
要想实现数据的双向绑定只能由⼦组件接收⽗组件props传过来的⽅法去改变⽗组件数据，⽽不是直接将⼦组件数据传给⽗组件 ⽣命周期：简单说⼀下⽣命周期：Mounting(挂载)、Updateing(更新)、Unmounting(卸载)
2、什么是JSX？为什么浏览器⽆法读取JSX
JSX 是JavaScript XML 的简写，是 React 使⽤的⼀种⽂件 它利⽤ JavaScript 的表现⼒和类似 HTML 的模板语法
使得 HTML ⽂件⾮常容易理解。此⽂件能使应⽤⾮常可靠，并能够提⾼其性能
浏览器只能处理 JavaScript 对象，⽽不能读取常规 JavaScript 对象中的 JSX
所以为了使浏览器能够读取 JSX，⾸先，需要⽤Babel转换器将 JSX ⽂件转换为 JavaScript 对象，然后再将其传给浏览器
3、React与Angular有何不同？
react是Facebook出品，angular是Google react只有MVC中的C，angular是MVC react使⽤虚拟DOM，angular使⽤真实DOM react是单项数据绑定，angular是双向数据绑定
4、react⽣命周期函数 （1）Mounting挂载阶段 constructor()
componentWillMount()组件挂载到页⾯之前
render()创建虚拟DOM，进⾏diff运算，更新DOM树。不可进⾏setState() componentDidMount()组件挂载到页⾯之后，可以在此请求数据 （2）Updateing更新阶段
componentWillReceiveProps()⽗级数据发⽣变化 shouldComponentUpdate()
性能优化：这个函数只返回true或false，表⽰接下来的组件是否需要更新（重新渲染）
返回true就是紧接着以下的⽣命周期函数，返回false表⽰组件不需要重新渲染，不再执⾏任何⽣命周期函数（包括render） componentWillUpdate() 组件更新之前，不可进⾏setState() 会导致函数调⽤shouldComponentUpdate从⽽进⼊死循环
render()
componentDidUpdate()组件更新之后 （3）Unmounting卸载阶段
componentWillUnmount 组件卸载和销毁之前⽴刻停⽤
可以在此销毁定时器，取消⽹络请求，消除创建的相关DOM节点等
5、shouldComponentUpdate是做什么的，（react性能优化是哪个周期函数？） shouldComponentUpdate 这个⽅法⽤来判断是否需要调⽤render⽅法重新绘制dom
因为DOM的描绘⾮常消耗性能，如果我们能在shouldComponentUpdate ⽅法中能够写出更优化的 dom diff 算法，可以极⼤的提⾼性能
6、为什么虚拟 DOM 会提⾼性能? 说下他的原理
虚拟 dom 相当于在 js 和真实 dom 中间加了⼀个缓存，利⽤ dom diff 算法避免了没有必要的 dom 操作，从⽽提⾼性能 Virtual DOM ⼯作过程有三个简单的步骤
1）每当底层数据发⽣改变时，整个 UI 都将在 Virtual DOM 描述中重新渲 2）然后计算之前 DOM 表⽰与新表⽰的之间的差异 3）完成计算后，将只⽤实际更改的内容更新 real DOM
7、调⽤setState之后发⽣了什么？
当调⽤setState后，新的 state 并没有马上⽣效渲染组件，⽽是，先看执⾏流中有没有在批量更新中
如果有，push到存⼊到dirtyeComponent中，如果没有，则遍历dirty中的component，调⽤updateComponent,进⾏state或props的更新 然后更新UI，react进⾏diff运算，与上⼀次的虚拟DOM相⽐较，进⾏有效的渲染更新组件
8、react diff 原理
diff（翻译差异）：计算⼀棵树形结构转换成另⼀棵树形结构的最少操作 1）把树形结构按照层级分解，只⽐较同级元素
2）给列表结构的每个单元添加唯⼀的 key 属性，⽅便⽐较
3）React 只会匹配相同 class 的 component（这⾥⾯的 class 指的是组件的名字）
4）合并操作，调⽤ component 的 setState ⽅法的时候, React 将其标记为 dirty.到每⼀个事件循环结束, React 检查所有标记 dirty 的component 重新绘制
5）选择性⼦树渲染。开发⼈员可以重写 shouldComponentUpdate 提⾼ diff 的性能
9、setState 何时同步何时异步？
1）setState 只在合成事件（react为了解决跨平台，兼容性问题，⾃⼰封装了⼀套事件机制，代理了原⽣的事件，像在jsx中常见的onClick、onChange这些都是合成事件）和钩⼦函数（⽣命周期）中是“异步”的，在原⽣事件和 setTimeout 中都是同步的
2）setState的“异步”并不是说内部由异步代码实现，其实本⾝执⾏的过程和代码都是同步的，只是合成事件和钩⼦函数的调⽤顺序在更新之前，导致在合成事件和钩⼦函数中没法⽴马拿到更新后的值，形式了所谓的“异步”，当然可以通过第⼆个参数 setState(partialState,callback) 中的callback拿到更新后的结果
3）setState 的批量更新优化也是建⽴在“异步”（合成事件、钩⼦函数）之上的，在原⽣事件和setTimeout 中不会批量更新，在“异步”中如果对同⼀个值进⾏多次 setState ， setState 的批量更新策略会对其进⾏覆盖，取最后⼀次的执⾏，如果是同时 setState 多个不同的值，在更新时会对其进⾏合并批量更新
10、react渲染机制
1）当页⾯⼀打开，就会调⽤render构建⼀棵DOM树
2）当数据发⽣变化（ state | props ）时，就会再渲染出⼀棵DOM树
3）此时，进⾏diff运算，两棵DOM树进⾏差异化对⽐，找到更新的地⽅进⾏批量改动
11、React中refs 的作⽤是什么？
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄 该值会作为回调函数的第⼀个参数返回
12、组件的状态(state)和属性(props)之间有何不同
State 是⼀种数据结构，⽤于组件挂载时所需数据的默认值。State 可能会随着时间的推移⽽发⽣突变，但多数时候是作为⽤户事件⾏为的结果
Props(properties 的简写)则是组件的配置。props 由⽗组件传递给⼦组件，并且就⼦组件⽽⾔，props 是不可变的 组件不能改变⾃⾝的 props，但是可以把其⼦组件的 props 放在⼀起(统⼀管理)
13、在构造函数中调⽤ super(props) 的⽬的是什么
在 super() 被调⽤之前，⼦类是不能使⽤ this 的，在 ES2015 中，⼦类必须在 constructor 中调⽤ super()。传递 props 给 super() 的原因则是便于(在⼦类中)能在 constructor 访问 this.props
14、为什么在componentDidMount()中请求数据
componentDidMount⽅法中的代码，是在组件已经完全挂载到⽹页上才会调⽤被执⾏，所以可以保证数据的加载
15、何为受控组件(controlled component)
在HTML 中，类似 ,