经过三个月的埋头苦干，终于完成Fiber版的anujs。
主要特性有：
- 测试全部改成jest, 迁移官方测试用例。有许多迷你React吹得怎么天花乱坠，但是生命周期钩子的执行顺序无法与官方保持一致，那么就很难共享React庞大的资源。像深度使用React内部 机制的ReactRouter与antd就无法使用。
支持新钩子，包括getDerivedStateFromProps，getDerivedStateFromCatch, getSnapshotBeforeUpdate，componentDidCatch。新钩子的诞生与已有的三个componentWillXXX 钩子的废弃是同步进行的，你在组件里定义了新钩子，那旧钩子就不会被调起。
支持批量更新API，ReactDOM.unstable_batchedUpdates, 这原本在React15的事件回调执行setState就存在的一种优化技术。现在官方将它大众化。
将createClass移出核心库，已经2018年了，应该接受es6的洗礼。
重构错误边界，只差一个用例就跑通官方测试了。
重构受控组件，全部用例跑通。
更新划分目录，源码放在packages下，分成core, fiber与render。core对应react.js，包括一些公用方法与内置组件（Fragment组件, Portal组件, PureComponent组件, forwardRef高阶组件）。fiber就是React16的异步架构。render包含了不同的渲染器，dom, noop(测试用)， server。职责分明，有利于后继的调优。
支持antd 99%组件，目前只发现transfer有点问题。
这里着重说一下fiber版块下的设计。
unbatch内置了一个Unbatch组件，它用来模拟React内部的unbatchedUpdates。
scheduleWork里面有一个updateComponet方法，setState的真正实现，用于驱动某一棵树的更新。ReactDOM.render(vdom, container, cb)也会调用它进行更新，不过在我们container与vdom中，我们放进了一个Unbatch组件。调用ReactDOM.render相当于调用了Unbatch组件的setState， setState有第二个可选参数cb， 也就相当于ReactDOM.render的第三个可选cb。updateComponet最里面是scheduleWork方法，它按理是使用大名鼎鼎的requestIdleCallback，现在没有实现，临时糊弄一下大家。
let deadline = { ??didTimeout: false, ??timeRemaining() { ?????return 2; ??},};function requestIdleCallback(fn) { ??fn(deadline);}Renderer.scheduleWork = function() { ??performWork(deadline);};performWork的实现类似于早期的rAF动画，发现还有任务没完工，就继续递归执行自身。
// rAF动画的示范代码var start = null;var element = document.getElementById('SomeElementYouWantToAnimate');element.style.position = 'absolute';function step(timestamp) { ?if (!start) start = timestamp; ?var progress = timestamp - start; ?element.style.left = Math.min(progress / 10, 200) + 'px'; ?if (progress < 2000) { //递归执行自身 ???requestAnimationFrame(step); ?}}requestAnimationFrame(step)performWork的代码也是如此function performWork(deadline) { ??//执行当前的所有任务，更新虚拟DOM与真实DOM ??workLoop(deadline); ??//忽略其他往macrotasks中添加任务的代码。。。 ??//忽略其他往macrotasks中添加任务的代码。。。 ??//忽略其他往macrotasks中添加任务的代码。。。 ??if (macrotasks.length) { ?????requestIdleCallback(performWork); ??}}ReactFiber相当于伪造了一个浏览器，因此有自己调度器，事件列队。于是你可以看到macrotasks，microtasks，batchedtasks, boundaries， effects等列队。
macrotasks，宏列队，主进程，一个页面只有一个， ReactDOM.render就会将第一个参数丢进去。
- microtasks，微列队，子进程，每棵虚拟DOM树都有一个，放在根节点中。当组件执行setState后，它会找到根节点的microtasks，然后放进去。然后在下次唤起performWork时，会从所有根节点中收集它们。
- batchedtasks，批量处理的任务，它们不能被合并。microtasks中的任务，都是由setState产生的，我们知道对某个组件进行多次setState，React在一次生命周期中会执行一次更新。batchedtasks则不一样，它们是延后到下次生命周期，因此不能在这次生命周期中就被执行了。
- boundaries，放着边界组件，边界组件会有很高的优先级，确保它们下次在performWork中，加入macrotasks的最前面。
- effects，它是commit阶段执行的macrotasks 列队。
workLoop有两个DFS遍历，reconcileDFS与commitDFS。reconcileDFS负责更新虚拟DOM，commitDFS负责更新真实DOM。为什么强调使用DFS，因为这东西对我们存取context, container非常方便。
注意：
anujs改动比较大，导致原先的DevTool不能用，这也是后继的工作重点了。
虽然这次改动这么大，它的体积还是相当迷你的。
与1.3x一样，它是对IE8友好的，它所有使用的es6新特性都可以被babel polyfill及使用es3ify优雅降级。目前已经有IE8专用的脚手架可用：https://gitee.com/menhal/React_IE8_boilerplate
剩下就是需要大家同心协力发掘兼容性很好的React路由库与UI库。
npm i anujswebpack.config中如何代替原来用React编写的项目
resolve: { ??alias: { ?????'react': 'anujs', ?????'react-dom': 'anujs', ???????// 若要兼容 IE 请使用以下配置 ???????// 'react': 'anujs/dist/ReactIE', ???????// 'react-dom': 'anujs/dist/ReactIE', ???????????// 如果引用了 prop-types 或 create-react-class ???????// 需要添加如下别名 ???????'prop-types': 'anujs/lib/ReactPropTypes', ???????'create-react-class': 'anujs/lib/createClass' ???????//如果你在移动端用到了onTouchTap事件 ???????'react-tap-event-plugin': 'anujs/lib/injectTapEventPlugin', ????}},anujs1.4.0发布
原文地址：https://www.cnblogs.com/rubylouvre/p/9140267.html