anujs1.4.0发布

标签：配置   server   rem   mac   自己   重点   移动   架构   资源   

经过三个月的埋头苦干，终于完成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就会将第一个参数丢进去。

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

anujs1.4.0发布

标签：配置   server   rem   mac   自己   重点   移动   架构   资源   

原文地址：https://www.cnblogs.com/rubylouvre/p/9140267.html