React V16 给我们带来了那些东西 ?

作者:ivweb biliou

download

我们可以在这里下载到最新的 beta 版react 下载链接

React 内核改变 --fiber

什么是react-fiber ?

increase its suitability for areas like animation, layout, and gestures.
Its headline feature is incremental rendering: 
the ability to split rendering work into chunks and spread it out over multiple frames.

react-fiber 是为了增强动画、布局、移动端手势领域的适用性,最重要的特性是对页面渲染的优化: 允许将渲染方面的工作拆分为多段进行

其中fiber 英文意思是纤维,众所周知,Js 是单线程的,当Js 在执行一段代码功能的过程中会对其他的代码进行堵塞

在如今越来越复杂的前端环境下,往往可能需要加载且渲染大量的DOM节点,那么在渲染的过程中,即使我们使用了React virtualDom 进行维护,但是,也是会阻塞其他功能的进行。例如,当其他节点渲染的过程中,用户执行了某些交互操作,例如点击,输入,手势等, 由于在渲染的过程中会阻塞线程,导致 这些交互行为延迟,也就是在用户眼中的卡顿。

Ok, 在这样的使用背景下,Facebook 团队在两年前就开始为我们研究,并且提供了 react-fiber 的新功能,react-fiber 可以为我们提供如下几个功能:

1. 设置渲染任务的优先
2. 采用新的Diff算法
3. 采用虚拟栈设计允许当优先级更高的渲染任务和较低优先的任务之间来回切换

facebook 团队计划于 react v16 发布 react-fiber 目前已经发布了 beta 版本 详细介绍可以看 介绍视频

Demo

首先,我们可以先看一个栗子 使用 react-fiber 渲染谢 尔宾斯基三角形 demo 很明显可以看出,在大数量节点渲染的情况下,使用原来正常的react方式所渲染的页面要顺畅很多

使用

让我们来尝试一下 React-fiber 的使用 对比正常的react,fiber做了一次升级

// 首先引用改变了
import ReactDOMFiber from 'react-dom-fiber';
ReactDOMFiber.render()
// 由于是beta版,所以渲染的时候,react团队采用了这种方式
// 以回调的形式进行
// 从deferredUpdates我们可以看出,这是渲染低优先级的函数

ReactDOMFiber.unstable_deferredUpdates(() =>
    this.setState(state => {
        // 我们可以通过回参取得旧state
        // 更新组件之前的逻辑处理
        // return新的state

        return {
            // new state    
        }
    })
);

在刚刚的例子中 高优先级的渲染任务为父节点的transform动画 低优先级的渲染任务为每一个节点的数据渲染

V16的其他功能

同时 v16 还提供了其他新功能 允许render 函数 处理多纬渲染

var ManagePost = React.createClass({

  render: function() {
    var posts = this.props.posts

    var something;
    var somethingelse;

    var row = posts.map(function(post){
      return(
        <div>
          <div className="col-md-8">
          </div>
          <div className="cold-md-4">
          </div>
        </div>
      )
    });

    return (
        {row}
    );
  }

});

可以看出,我们希望能够以一个数组的形式渲染多个节点 渲染异常的降级错误处理

var MyGoodView = React.createClass({
render: function () {
return <p>Cool</p>;
}
});

var MyBadView = React.createClass({
render: function () {
throw new Error('crap');
}
});

try {
// 希望抛出错误
React.render(<MyBadView/>, document.body);
} catch (e) {
// 进行错误降级处理
React.render(<MyGoodView/>, document.body);
}

在之前,如上代码是无法执行到降级处理的,而在 V16中会允许降级处理,并且为我们提供完整可读的组件堆栈异常信息,这样我们就可以对渲染异常的错误进行捕获监控

重写服务器渲染API方法,提供多个以流的渲染方法

ReactDOMServer.renderToStream()
ReactDOMServer.renderToStaticStream()

直出同学的福音

有关 state 函数

  • 对于 state对象返回为 Null 的情况下不会触发重新渲染
  • setState 的回调函数 会在所有组件渲染完成之前触发(即componentDidMount / componentWillUnmount) 两个钩子之前

需要注意的问题

V16 已经依赖 Es6 Map 和 Set 类型,如果需要支持老旧浏览器场景(ie < 11) 需要在场景内引入垫片库(polyfill)

// 引入 es6 垫片库
import 'core-js/es6/map';
import 'core-js/es6/set';

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

V16 还依赖 requestAnimationFrame 这一API, 如果老旧浏览器不支持,可以使用setTimeout 替代

global.requestAnimationFrame = function(callback) {
  setTimeout(callback, 0);
};

原文出处:IVWEB社区

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

浅谈 Angular 项目实战

我不是 Angular 的布道者,但如今自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。目前的三大主流前端框架都研究过,博客中也有三者的...

710
来自专栏wOw的Android小站

[Objective-C] Block实现回调和简单的学习思考

关于Objective-C的回调,最常见的应该是用delegate代理实现。不过代理的实现比起Block要更基础,就不介绍了,下面总结一下Block回调的实现。

492
来自专栏编程心路

人人都可以用C语言写推箱子小游戏

C语言,作为大多数人的第一门编程语言,重要性不言而喻,很多编程习惯,逻辑方式在此时就已经形成了。这个是我学习 C语言 后写的推箱子小游戏,自己的逻辑能力得到了提...

764
来自专栏知道一点点

走进AngularJs(二) ng模板中常用指令的使用方式

  通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的。ng的模板真...

732
来自专栏葡萄城控件技术团队

对《30个提高Web程序执行效率的好经验》的理解

阅读了IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然。 下面是我...

1695
来自专栏熊二哥

Vue快速入门

终于进入国内当前最火的前端框架Vue.js的学习了,最近周边的哥们也开始用该框架做线上项目,闲暇之余,做个快速的了解,重在基础部分。 ? 基础概念 目前在国...

2878
来自专栏PHP技术

PHP 编码规范

该 PHP 编码规范基本上是同 PSR 规范的。有一部分的编码规范 PSR 中是建议,此编码规范会强制要求。 此编码规范 是以 PSR-1 / PSR-2 / ...

912
来自专栏Crossin的编程教室

【Python 第25课】 初探list

昨天课程里的例子有点没说清楚,有同学表示写在程序里发生了错误。因为我当时写这个代码片段时,心里假想着这是在一个函数的内部,所以用了return语句。如果你没有把...

3046
来自专栏codelang

react-native之undefined is not an object

1104
来自专栏iKcamp

翻译 | Thingking in Redux(如果你只了解MVC)

作者:珂珂(沪江前端开发工程师) 本文原创,转载请注明作者及出处。 原文地址:https://hackernoon.com/thinking-in-red...

18410

扫码关注云+社区