react面试题（第一版）

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的生命周期函数

1. Mounting挂载阶段

   1. constructor()

   2. componentWillMount()组件挂载到页面之前

   3. render()创建虚拟DOM，进行diff计算，更新DOM树。不可进行setState()

   4. componentDidMount()组件挂载到页面之后，可以在此请求数据；

2. Updateing更新阶段

   1. componentWillReceiveProps()父级数据发生变化
   2. shouldComponentUpdate()
      • 性能优化：这个函数只返回true或false，表示接下来的组件是否需要更新（重新渲染）；返回true，就是紧接着以下的生命周期函数，返回false表示组件不需要重新渲染，不再执行任何生命周期函数（包括render）
   3. componentWillUpdate()组件更新之前，不可进行setState()会导致函数调用shouldComponentUpdate()，从而进入死循环
   4. render()；
   5. componentDidUpdate()组件更新之后；

3. Unmounting卸载阶段

   1. componentWillUnmount()组件卸载和销毁之前立刻停用，可以在此销毁定时器，取消网络请求，消除创建的相关DOM节点等；

4.shouldComponentUpdate是做什么的，react性能优化是哪个生命周期函数？

shouldComponentUpdate()这个生命周期用来判断是否需要调用render()方法重绘DOM，因为DOM的描绘非常消耗性能，如果我们能在shouldComponentUpdate()方法中能够写出更优化的dom diff 算法，可以极大的提高性能

5. 为什么虚拟DOM会提高性能？说下原理

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

Virtual DOM工作过程的三个简单步骤：

1. 每当底层数据发生改变时，整个UI都将在Virtual DOM描述中重新渲染；
2. 然后计算之前DOM表示与新DOM之间的差异；
3. 完成计算后，将只用实际更改的内容更新 real DOM。

5. react diff 原理

diff（差异算法）：计算一棵树形结构转换成另一棵树形结构的最少操作。

1. 把树形结构按照层级分解，只比较同级元素
2. 给列表结构的每个单元添加唯一的key属性，方便比较
3. react只会匹配相同class的component（class指的是组件的名称）
4. 合并操作，调用component的setState() 方法的时候，react将其标记为dirty，到每一个事件循环结束，react检查所有标记dirty的component重新绘制
5. 选择性子树渲染。开发人员可以重写shouldComponentUpdate() 提高diff的性能

---