目录
什么是 React Fiber
Fiber是 React 16 中新的协调（reconcile）引擎，他的主要目的是使Virtual Dom可以进行增量渲染。
1)、背景
React在进行组件渲染时，从 setState开始到渲染完成整个过程是同步的(一气呵成”)。如果需要渲染的组件比较庞大，js执行会占据主线程时间较长，会导致页面响应度变差，使得 React在动画、手势等应用中效果比较差
页面卡顿: Stack reconciler的工作流程很像函数的调用过程。父组件里调子组件，可以类比为函数的递归；对于特别庞大的vDOM树来说， reconciliation过程会很长(x0oms)，超过16ms，在这期间，主线程是被js占用的，因此任何交互、布局、渲染都会停止，给用户的感觉就是页面被卡住了
2)、实现原理
旧版 React通过递归的方式进行渲染，使用的是Js引擎自身的函数调用栈，它会一直执行到栈空为止。而 Fiber实现了自己的组件调用栈，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。实现方式是使用了浏览器的 requestldleCallback这一API。 Fiber其实指的是一种数据结构，它可以用一个纯Js对象来表示:
constfiber={stateNode,// 节点实例child,// 子节点sibling,// 兄弟节点return,// 父节点}
react内部运转分三层
Virtual dom层，描述页面长什么样
Reconciler层，负责调用组件生命周期方法，进行Diff运算等
Renderer层，根据不同的平台，渲染出相应的页面，比较常见的是 ReactDOM和ReactNative
为了实现不卡顿，就需要有一个调度器( Scheduler)来进行任务分配。优先级高的任务(如键盘输入)可以打断优先级低的任务(如Diff的执行，从而更快的生效。任务的优先级有六种：
synchronous，与之前的 Stack Reconciler操作一样，同步执行
task，在 next tick之前执行
animation，下一帧之前执行
high，在不久的将来立即执行
low，稍微延迟执行也没关系
offScreen，下一次 render时或Scro时才执行
Fiber Reconciler( react)执行阶段:
阶段一，生成Fiber树，得出需要更新的节点信息。这一步是一个渐进的过程，可以被打断。
阶段二，将需要更新的节点一次过批量更新，这个过程不能被打断。
Fiber树：Fiber Reconciler在阶段一进行Diff计算的时候，会基于 virtual DOM树生成一棵 Fiber树，它的本质是链表。
渲染策略从 Stack Reconciler 到 Fiber Reconciler，源码层面其实就是干了一件同步递归改为基于优先级的异步调度的事情
示例
核心
把可中断的任务拆分成小任务（任务切片）
对正在做的工作调整优先次序、重做、复用等（任务调度）
操作系统进度调度策略：
先来先服务
短作业优先
高优先权优先
高响应比优先调度
时间片轮转法
多级反馈队列
聊聊 setState
React 的类组件通过 state 管理内部状态，而唯一改变状态更新的视图只能通过setState和forceUpdate。setState 最终也会走 forceUpdate。
更新流程
我们首先要知道，每个类组建都有一个 updater 对象用于管理 state 的变化，当我们调用 setState 传入 partialState 时，会将 partialState 存入 updater 中的 pendingState 中，此时我们 updater 又会调用 emitUpdate 来决定当前是否立即更新，判断条件简单来说是否有 nextProps ,或者updateQueue 的 isPending 是否开启。updateQueue 用于批量管理 updater。如果 updateQueue的 isPending 为 true ,那么就将当前 update 直接加入 updateQueue 的队列中。开启 isPending 的方式可以是自定义方法和生命周期函数等。
当这些方法执行完毕更新 update，调用 update 的 componentUpdate, 判断组件的 shouldComponentUpdate 决定是否调用 forcellpdate 进行更新。
说一下 React diff 算法
React 通过引入Virtual DOM 的概念，极大的避免无效的 DOM 操作，已经使我们页面的构建效率得到了很大的提升。
但是如何高效通过对比新旧 Virtual DOM 来找出真正的 DOM 变化之处也同样决定着页面的构建效率，React 通过 diff 算法解决了这个问题。
Virtual Dom + React diff 算法的组合极大地保障了 React 的性能。
React 元素、组件
React 元素其实是一个由 React.createElement(tagName， props， children)创建的 JavaScript 对象
组件是功能模块，结合内部的生命周期、状态管理及事件管理等功能，将某一部分的功能和展示聚合在一起，返回的是 React 元素
待确认
1. 为什么没有使用 React 的情况下，还要在头部引入 React
//
2. 为什么 React 组件名要以大写字母开头
// React 需要知道渲染的是组件还是 HTML 元素
3、为什么组件不能直接返回多个元素
// React.createElement(tagName， props， children)
4、为什么要调用 super(props)，可以不调用吗
//
5、事件绑定为什么要绑定 this，为什么第一次不绑定可以获取 this
importReactfrom'react'exportdefaultclassThisDemoextendsReact.Component{constructor(props) {super(props)this.name='王吉志'this.handleClick2=this.handleClick1.bind(this) }handleClick1() {console.log(this.name) }handleClick3=()=>{console.log(this.name) }render() {return(<div><buttononClick={this.handleClick1()}>handleClick1()</button> //'小明'<buttononClick={this.handleClick2()}>handleClick2()</button> //'小明'<buttononClick={this.handleClick3()}>handleClick3()</button> //'小明'<buttononClick={this.handleClick1}>handleClick1</button> //'抛错，无法访问 this.name'<buttononClick={this.handleClick2}>handleClick2</button> //'小明'<buttononClick={this.handleClick3}>handleClick3</button> //'小明'</div> ) }}
参考文档
程墨的知乎专栏 进击的 React
GitHub 集锦 reactjs-interview-questions
