zoukankan      html  css  js  c++  java
  • 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',  
       }
    },
    
  • 相关阅读:
    资源列表
    资源列表
    编程语言资源列表
    PyTorch简介
    Keras构建回归神经网络
    Keras简介
    Tensorflow之RNN,LSTM
    Tensorflow之CNN
    Tensorflow之dropout
    Tensorflow做分类
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/9140267.html
Copyright © 2011-2022 走看看