react面试题（第一版）
1. react是什么
react 是 Facebook 开发的前端JavaScript库；
虚拟DOM：react引入虚拟DOM，每当数据变化通过reactdiff运算，将上一次的虚拟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的生命周期函数
-
Mounting挂载阶段
constructor()
componentWillMount()组件挂载到页面之前
render()创建虚拟DOM，进行diff计算，更新DOM树。不可进行setState()
componentDidMount()组件挂载到页面之后，可以在此请求数据；
-
Updateing更新阶段
- componentWillReceiveProps()父级数据发生变化
- shouldComponentUpdate()
- 性能优化：这个函数只返回true或false，表示接下来的组件是否需要更新（重新渲染）；返回true，就是紧接着以下的生命周期函数，返回false表示组件不需要重新渲染，不再执行任何生命周期函数（包括render）
- componentWillUpdate()组件更新之前，不可进行setState()会导致函数调用shouldComponentUpdate()，从而进入死循环
- render()；
- componentDidUpdate()组件更新之后；
-
Unmounting卸载阶段
- componentWillUnmount()组件卸载和销毁之前立刻停用，可以在此销毁定时器，取消网络请求，消除创建的相关DOM节点等；
4.shouldComponentUpdate是做什么的，react性能优化是哪个生命周期函数？
shouldComponentUpdate()这个生命周期用来判断是否需要调用render()方法重绘DOM，因为DOM的描绘非常消耗性能，如果我们能在shouldComponentUpdate()方法中能够写出更优化的dom diff 算法，可以极大的提高性能
5. 为什么虚拟DOM会提高性能？说下原理
虚拟DOM相当于在js和真实DOM中间加了一个缓存，利用dom diff 算法避免了没有必要的DOM操作，从而提高性能；
Virtual DOM工作过程的三个简单步骤：
- 每当底层数据发生改变时，整个UI都将在Virtual DOM描述中重新渲染；
- 然后计算之前DOM表示与新DOM之间的差异；
- 完成计算后，将只用实际更改的内容更新 real DOM。
5. react diff 原理
diff（差异算法）：计算一棵树形结构转换成另一棵树形结构的最少操作。
- 把树形结构按照层级分解，只比较同级元素
- 给列表结构的每个单元添加唯一的key属性，方便比较
- react只会匹配相同class的component（class指的是组件的名称）
- 合并操作，调用component的setState() 方法的时候，react将其标记为dirty，到每一个事件循环结束，react检查所有标记dirty的component重新绘制
- 选择性子树渲染。开发人员可以重写shouldComponentUpdate() 提高diff的性能
