React为什么需要引入React Fiber

React Fiber是React 16这个版本加入，React Fiber这个大改变Facebook已经折腾两年多了，按照官方的说法React Fiber 是对核心算法的一次重新实现，可以说是大费周折，为什么？这个是我希望去了解的问题。

首先我们先了解一下加入React Fiber之前是怎么渲染的？

在之前React通过递归对比Vitrual DOM树，找出需要变动的节点，然后去同步更新它们，同步更新就容易出现掉帧，出现卡顿的现象，现在可以想象一下，现在更新一个组件需要1毫秒，现在有300个组件需要更新，那么就需要300毫秒的更新过程，此时浏览器的主线程在专心做更新操作，已经没空去做任何其它事情了。如果在这300毫秒之内用户需要在组件的输入框输入内容，敲键盘输入也不会获得任何响应，因为渲染你输入的结果也是浏览器主线程的工作，但是主线程已经被占用，等React更新过程结束之后，你输入的内容一下子就出现在输入框内

React 16版本之前就很大可能出现这种问题，因为更新过程是同步的一层组件套一层组件，逐渐深入的过程，在更新完所有组件之前不停止，如果你的组件树很深，则会出现很长时间都不会返回。

由于js是单线程的特点，下一个同步任务想要执行，需要等上一个同步任务执行完，React的更新过程就是犯了这个禁忌，React Fiber出现就是要改变这种现状

React Fiber的方式

React Fiber处理js同步操作时间过长的方法其实很简单，就是使用分片

具体操作是把一个耗时较长的任务分成很多小片，这样每一个小片的运行时间就变得很短了，虽然总的时间依旧很长，但是可以在每个小片执行完之后，可以给其它任务一个执行的机会，这样能避免了线程被独占的问题了。

React在调度的每一小片的时候，会先看看有没有其它紧急的任务需要做，如果有，则优先做紧急任务，没有则继续更新。

维护每一个分片的数据结构，就是Fiber

注意：这看起来蛮简单的，但是React实现这一点却很不容易，要不然也不会搞了年多才实现

如何升级版本

如果你版本是React 16之前的，可以直接在package.json修改一下版本，然后重新npm i一下即可