Ruby's Louvre

每天学习一点点算法

导航

anujs1.4.0发布

经过三个月的埋头苦干,终于完成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就会将第一个参数丢进去。
2. microtasks,微列队,子进程,每棵虚拟DOM树都有一个,放在根节点中。当组件执行setState后,它会找到根节点的microtasks,然后放进去。然后在下次唤起performWork时,会从所有根节点中收集它们。
3. batchedtasks,批量处理的任务,它们不能被合并。microtasks中的任务,都是由setState产生的,我们知道对某个组件进行多次setState,React在一次生命周期中会执行一次更新。batchedtasks则不一样,它们是延后到下次生命周期,因此不能在这次生命周期中就被执行了。
4. boundaries,放着边界组件,边界组件会有很高的优先级,确保它们下次在performWork中,加入macrotasks的最前面。
5. 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 anujs

webpack.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',  
   }
},

posted on 2018-06-05 16:02  司徒正美  阅读(3223)  评论(1编辑  收藏  举报