摘要：然而之前的相当于从最顶层的组件开始，自顶向下递归调用，不会被中断，这样就会持续占用浏览器主线程。众所周知，是单线程运行，长时间占用主线程会阻塞其他类似于样式计算布局绘制等运算，从而出现掉帧的情况。

　　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法获得变现，能坚持下去也是靠的是自己的热情和大家的鼓励，希望大家多多关注呀！从今年年初离开React开发岗，React就慢慢淡出我的学习范围。现在想重拾一下React相关的知识，可能文章所提及的知识点已经算是过时了，仅仅算作是自己的学习体验吧，
　　

　　React 16.0发布于2017年九月，此次新版本作为一次大的版本升级，为我们许多新特性以及全新的内部架构，分别了解一下:

　　React依赖于ES6中的Map与Set类型以及requestAnimationFrame函数(requestAnimationFrame函数用来告知浏览器在每次动画重绘之前都调用给定的回调函数)，如果你需要支持IE11以下的老版本浏览器和设备，React原生不再提供支持，必须引入polyfill。

　　对于Map与Set，我们可以在全局引入core-js处理，对于requestAnimationFrame而言，我们可以通过引入raf:

import "core-js/es6/map";
import "core-js/es6/set";
import "raf/polyfill";

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

ReactDOM.render(
  
Hello, world!
,
  document.getElementById("root")
);

　　React之前的版本中，组件render的返回值必须包含在一个根元素，因此我们经常都是将其包裹在一个div标签中，在React16中我们直接在render函数中返回字符串和数组。

　　比如存在下面的场景，假设有以下两个组件:

class Row extends Component{
    render() {
        return (
            

                React
                Vue
                Angular
            
        );
    }
}

class Table extends Component{
    render() {
        return (
            
                
            
        );
    }
}

　　在之前的版本中组件仅能返回一个根组件，Row中的组件不得已只能用div标签包裹，但是因为td被div包裹会导致浏览器无法识别，当然我们可以将tr挪到Row中，但是React 16.0提供了直接返回数组的形式，因此我们可以直接方便的写成:

class Row extends Component{
    render() {
        return [
            React,
            Vue,
            Angular
        ];
    }
}

　　在组件中直接返回字符串相当于直接创建匿名文本。

　　React 16.0 增强了异常的处理能力，在之前的React中，组件内部的错误可能会使得状态发生错乱从而导致下一次渲染发生未知的错误，然而React没有提供能优雅地捕捉这些错误并且从中恢复的方式。试想，部分程序的错误不应该干扰整个应用的流程，因而React16引入了新的概念: Error boundaries(错误边界)。

所谓的错误边界(Error boundaries )是指能够捕获子孙组件中错误，并提供打印这些错误和展示错误UI界面的组件。错误边界能够捕捉子孙组件render方法、生命周期以及构造函数中的错误。

　　举个例子:

class MyComponent extends Component {
    render(){
        throw new Error("I crashed!");
        return "MrErHu";
    }
}

class ErrorBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    componentDidCatch(error, info) {
        this.setState({ hasError: true });
    }

    render() {
        if (this.state.hasError) {
            return 
Something went wrong.
;
        }
        return this.props.children;
    }
}

export default class App extends Component {
    render() {
        return (
        
            
        
        );
    }
}

　　如上所示，含有componentDidCatch的组件被称为错误边界，其功能类似于JavaScript中的catch。值得注意是的，错误边界仅仅能够捕捉子孙组件的错误而不误捕获自身的错误。React 16.0引入了一个新的行为，任何未被捕获的错误都会卸载整个React组件树，虽然这个行为富有争议，但React开发者们认为即使什么也不显示，也比显示一堆错误更好。当然了，错误边界仅能捕捉我们上面所提到特定位置的错误，如果是事件处理中的错误，你还是得使用JavaScript的try和catch。

　　React 16之前，并没有提供Portal的功能，如果需要渲染类似于对话框的组件则必须借助于unstable_renderSubtreeIntoContainer与unmountComponentAtNode，例如我们想要实现一个对话框Dialog的组件:

class Dialog extends React.Component {
    render() {
        return null;
    }

    componentDidMount() {
        const doc = window.document;
        this.node = doc.createElement("div");
        doc.body.appendChild(this.node);

        this.renderPortal(this.props);
    }

    componentDidUpdate() {
        this.renderPortal(this.props);
    }

    componentWillUnmount() {
        unmountComponentAtNode(this.node);
        window.document.body.removeChild(this.node);
    }

    renderPortal(props) {
        unstable_renderSubtreeIntoContainer(
            this,
            

                {props.children}
            
,
            this.node
        );
    }
}

　　我们知道对话框是非常特殊的一种情况，不能渲染在父组件内而是需要直接渲染在body标签下，为了解决了这个问题，在上面的代码中render实际上并没有返回任何组件，而是在componentDidMount生命周期中利用unstable_renderSubtreeIntoContainer方法将对应组件直接渲染在this.node下。需要注意的是，unstable_renderSubtreeIntoContainer渲染的组件需要手动卸载，否则可能会造成内存泄露，因此我们在componentWillUnmount中手动调用unmountComponentAtNode。

　　有ReactDom.createPortal，一切都变得简单的起来，既不需要手动去卸载组件，也不需要担心unstable的API会在后续的版本中移出，上面的例子，在React 16.0可以如下实现:

class Dialog extends React.Component {
    constructor(props) {
        super(props);
        const doc = window.document;
        this.node = doc.createElement("div");
        doc.body.appendChild(this.node);
    }

    render() {
        return createPortal(
            

                {this.props.children}
            
,
            this.node
        );
    }

    componentWillUnmount() {
        window.document.body.removeChild(this.node);
    }
}

　　React服务器渲染在React 16.0之前仅仅支持renderToString，后端用字符串的方式将渲染好的HTML发送给客户端，而React 16.0则提供了renderToNodeStream，返回一个可读流，二者有什么区别？

// using renderToString
import { renderToString } from "react-dom/server"
import App from "./App"
app.get("/", (req, res) => {
  res.write("");
  res.write("
");  
  res.write(renderToString());
  res.write("
");
  res.end();
});

// using renderToNodeStream
import { renderToNodeStream } from "react-dom/server"
import App from "./App"
app.get("/", (req, res) => {
  res.write("");
  res.write("
"); 
  const stream = renderToNodeStream();
  stream.pipe(res, { end: false });
  stream.on("end", () => {
    res.write("
");
    res.end();
  });
});

　　回答这个问题之前，我们需要了解一下什么是流(Stream)，对于从事前端的同学而言，流这个概念相对比较陌生，流本质上是对输入输出设备的抽象，比如:

ls | grep *.js

　　ls产生的数据通过管道符号(|)流向了grep命令中，数据就像水流一样在管道符号中流动。设备流向程序我们称为readable，程序流向设备我们称为writable，我们举一个例子:

const fs = require("fs");
const FILEPATH = "./index";

const rs = fs.createReadStream(FILEPATH);
const ws = fs.createWriteStream(DEST);

rs.pipe(ws);

　　数据通过管道中从rs流向了ws，实现了复制的功能，并且数据在管道流动的过程中我们还可以对数据进行处理。那么流有哪些优点呢？首先数据不需要一次性从设备全部拿出，然后再写入另外一个设备。流可以实现一点点的放入内存中，一点点的存入设备，带来的就是内存开销的下降。并且我们可以在管道中优雅的处理数据，方便程序拓展。

　　讲了这么多流的优点，renderToNodeStream为服务器渲染带来了什么呢？首先同样的道理，renderToNodeStream可以降低渲染服务器的内存消耗，更重要的是带来TTFB的降低。

TTFB(Time to First Byte):浏览器从最初的网络请求被发起到从服务器接收到第一个字节前所花费的毫秒数

　　我们知道HTTP协议在传输层使用的TCP协议，而TCP协议每次会将应用层数据切割成一个个报文传输，因此使用流不必等待所有的渲染完成才传输，可以有效降低TTFB。

　　在React 16之前，React会忽视非标准DOM属性，例如：

　　在React 15中仅会输出:

　　在React 16中则会输出:

　　允许使用非标准DOM属性使得在集成第三方库或者尝试新的DOM API时更加的方便。

　　关于setState函数，setState(null)将不会再触发更新，因此如果是以函数作为参数的形式调用setState，可以通过返回null的方式控制组件是否重新渲染，例如:

this.setState(function(state) {
    return null;
})

　　需要注意的是，与之前不同，如果在render中直接调用setState会触发更新，当前实际的情况是，你也不应该在render中直接触发setState。并且，之前的setState的回调函数(第二个参数)是在所有组件重新渲染完之后调用，而现在会在componentDidMount和componentDidUpdate后立即调用。

　　关于生命周期中，如果一个组件从被替换成，那么React 16中B组件的componentWillMount一定总是先于A组件的componentWillUnmount，但是在React 16之前的版本某些情况下可能是相反的顺序。还有，componentDidUpdate方法不会再接收到prevContext的参数。

Write once, run anywhere