anujs1.4.0 Release

Source: Internet
Author: User

After three months of hard work, finally finished fiber version of the ANUJS.
The main features are:

    • The tests are all changed to jest and the official test cases are migrated. There are many mini-react, but the order of the life-cycle hooks cannot be consistent with the official, so it is difficult to share react's vast resources. Reactrouter and Antd, like the deep use of react internal mechanisms, cannot be used.
      Support for new hooks, including Getderivedstatefromprops,getderivedstatefromcatch, Getsnapshotbeforeupdate,componentdidcatch. The birth of the new hook and the existing three componentwillxxx hook discard is synchronous, you define a new hook in the component, the old hook will not be transferred.
      Supports batch update Api,reactdom.unstable_batchedupdates, which was originally an optimization technique that existed in React15 's event callback execution SetState. Now the official will make it popular.
      It has been 2018 years since the Createclass was removed from the core library and should be baptized by ES6.
      Refactoring the error boundary, just one use case runs through the official test.
      Refactoring controlled components, all use cases run through.
      Update partition directory, source stacking under packages, divided into core, fiber and render. The core corresponds to React.js, including some common methods with built-in components (fragment components, portal components, purecomponent components, forwardref high-order components). Fiber is the asynchronous architecture of React16. Render contains different renderers, Dom, NoOp (for testing), and server. The responsibility is clear, is advantageous to the successor tuning.
      Support for ANTD 99% components, currently only found transfer a bit of a problem.

Here is the emphasis on the design under the fiber section.
The Unbatch has a built-in unbatch component that simulates the unbatchedupdates inside the react.
There is a updatecomponet method in the Schedulework, the real realization of setstate, which is used to drive the renewal of a tree. Reactdom.render (Vdom, container, CB) will also call it for updates, but in our container and vdom we put in a unbatch component. Calling Reactdom.render is equivalent to calling the SetState of the Unbatch component, SetState has a second optional parameter CB, which is equivalent to the third optional CB of Reactdom.render. Updatecomponet most inside is the Schedulework method, it is supposed to use the famous requestidlecallback, now did not realize, temporarily fooled everyone.

let deadline = {   didTimeout: false,   timeRemaining() {      return 2;   },};function requestIdleCallback(fn) {   fn(deadline);}Renderer.scheduleWork = function() {   performWork(deadline);};

The implementation of the performwork is similar to the early RAF animations, and the discovery that the task is not completed will continue to execute itself recursively.

// 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 is equivalent to forging a browser and therefore has its own scheduler, event queue. So you can see macrotasks,microtasks,batchedtasks, boundaries, effects and other queues.
MACROTASKS, macro queue, main process, one page only one, Reactdom.render will throw the first parameter in.

    1. Microtasks, micro-queue, sub-process, each virtual DOM tree has one, placed in the root node. When the component executes setstate, it finds the root node's microtasks and then puts it in. They are then collected from all root nodes the next time the performwork is aroused.
    2. Batchedtasks, bulk processing of tasks, they cannot be merged. The tasks in Microtasks are generated by setstate, and we know that multiple setstate,react of a component are performed once in a single life cycle. Batchedtasks are not the same, they are deferred to the next life cycle and therefore cannot be executed in this life cycle.
    3. Boundaries, with boundary components, the boundary components will have a high priority, ensuring that they are added to the front of the Macrotasks next time in Performwork.
    4. Effects, which is the Macrotasks queue executed during the commit phase.
      Workloop has two DFS traversal, Reconciledfs and Commitdfs. Reconciledfs is responsible for updating the virtual Dom,commitdfs responsible for updating the real DOM. Why emphasize the use of DFS, because this thing to us access to the context, container very convenient.
      Attention:
      ANUJS changes relatively large, resulting in the original devtool can not be used, which is the follow-up work focus.
      Although this change is so big, its volume is still quite mini.

Like 1.3x, it is IE8 friendly, and all of the new features used by ES6 can be degraded by Babel Polyfill and using es3ify gracefully. There are currently IE8 dedicated scaffolding available: Https://gitee.com/menhal/React_IE8_boilerplate
All that remains is the need to work together to discover the react routing libraries and UI libraries that are very compatible.

npm i anujs

How to replace the original project written with react in Webpack.config

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 Release

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.