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 条评论
登录 后参与评论

相关文章

来自专栏韩伟的专栏

编写可复用的服务端软件系统应该注意的五个重要细节

编写可复用的服务端软件系统应该注意的五个重要细节 作为程序员,我们往往希望自己写的代码能被最大程度的重用,但是我们依然能看到有很多“被重复发明的轮子”,其原因往...

34410
来自专栏达观数据

达观数据基于RequireJS的前端模块化设计

伴随着互联网的飞速发展,web中对于前端的要求越来越高,前端的代码的代码量、复杂度与日俱增,带来了诸如前端代码复用率低,难维护等问题。针对这些现有问题,达观科技...

2445
来自专栏Vamei实验室

安卓第二夜 有趣的架构

学习安卓的架构,是从操作系统的角度理解安卓。安卓使用Linux内核,但安卓的架构又与常见的Linux系统有很大的区别。我们先来回顾一下传统的Linux架构,再来...

18210
来自专栏NetCore

不错的node.js入门

关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。...

1967
来自专栏知晓程序

开发 | 如何在小程序中,获取微信群 ID?

微信在 5 月 8 日晚间,突然又宣布了一个新能力——小程序可以读取微信群的唯一 ID。

861
来自专栏ImportSource

Java9来了,快来了解下JPMS基础吧!

Java平台模块系统(JPMS)是Java SE 9的主要新功能。在本文中,Java Champion和JAX Londonspeaker的Stephen Co...

3558
来自专栏熊二哥

快速入门系列--WCF--02消息、会话与服务寄宿

经过WCF基础的ABC学习,已经可以构建简单的WCF的服务,使用不同的服务地址和绑定类型,根据业务提供所需的服务契约。但不禁想问,服务所使用的消息报文是什么样的...

1945
来自专栏郝阳的专栏

关于分布式“缓存”的思考

本文从缓存的分类、同步和空查询三个问题分享下对分布式缓存的一些想法,抛砖引玉。

6360
来自专栏Jaycekon

Python-WXPY实现微信监控报警

概述:   本文主要分享一下博主在学习wxpy 的过程中开发的一个小程序。博主在最近有一个监控报警的需求需要完成,然后刚好在学习wxpy 这个东西,因此很巧妙的...

7348
来自专栏c#开发者

使用JavaScript访问XML数据

使用JavaScript访问XML数据 在网络浏览器软件中,可以Internet Explorer (IE)现在是一种标准的软件。可以看到,运行不同版本的Wi...

2664

扫码关注云+社区