react面试解答

1.谈谈Fiber

旧版React通过递归方式进行渲染，使用的是JS引擎自身的函数调用栈，它会一直执行到栈空为止。而Fiber实现了自己的组件调用栈，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。

（1）为什么会出现Fiber?

在页面元素很多，且需要频繁刷新的场景下，react15版本会出现掉帧的现象。原因是大量的同步计算阻塞浏览器的UI渲染。

Fiber的解决思路：将运算分为多个步骤，分批完成。即完成一部份任务之后，将控制权交还给浏览器，让浏览器有时间渲染页面，然后再接着执行之前未完成的任务。

2.Component和PureComponent的区别

Component的默认行为是state和props只要有一个发生变化，都触发render;而PureComponent相当于在Component里添加了默认的shouleComponentUpdate，会先对state和props进行浅比较（对于引用类型比较内存地址），不同的时候才会render。

3.React性能优化

（1）尽量减少不必要的渲染，使用

                Immutable：通过Immutable创建的Immutable Data一旦被创建，就不能再更改，对Immutable对象进行修改、添加或删除操作，都会返回一个新的Immutable对象。

                在组件中绑定方法提前绑定this，绑定属性提前定义

（2）复杂状态与简单状态不要共用一个组件

（3）多个react组件性能优化，key的优化

4.什么是Virtual Dom ？

VD将页面的状态抽象为JS对象的形式，配合不同的渲染工具，是跨平台渲染成为可能。在进行页面更新的时候，借助VD，DOM元素的改变可以在内存中进行比较，再结合框架的事务机制将多次比较的结果合并后一次性更新到页面上，从而有效地减少页面渲染的次数，提高渲染效率。

5.如何实现虚拟DOM和真实DOM间的映射？

借助JSX编译器，将文件中的HTML转化为函数形式，根据这个函数生成Virtual DOM对象，然后遍历VD对象，使用createElement， 生成真实的DOM。

6.什么是Diff算法？

（1）state变化，生成一个新的virtual DOM对象

（2）比较VD和之前VD的差异（唯一标识key提高性能）

（3）生成差异对象

（4）遍历差异对象并更新DOM

7.React的事件绑定机制

React的事件是绑定在document节点上，触发的事件是对原生事件的包装。

用户点击button按钮触发click事件后，DOM将event传给ReactEventListener,它将事件分发到当前组件及以上的父组件。然后ReactEventEmitter对每个组件进行事件的执行 ，先构造React合成事件，然后以队列的方式调用JSX中声明的callback。

8.setState是同步的还是异步的？

为了更客观的性能，react执行setState时会推迟它，稍后会一次性更新这些组件，这样造成不能在setState之后立刻能拿到改变的结果。