摘要：然而之前的相當于從最頂層的組件開始，自頂向下遞歸調用，不會被中斷，這樣就會持續占用瀏覽器主線程。眾所周知，是單線程運行，長時間占用主線程會阻塞其他類似于樣式計算布局繪制等運算，從而出現掉幀的情況。

　　首先歡迎大家關注我的Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵，希望大家多多關注呀！從今年年初離開React開發崗，React就慢慢淡出我的學習范圍?，F在想重拾一下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