摘要：然而之前的相當(dāng)于從最頂層的組件開(kāi)始，自頂向下遞歸調(diào)用，不會(huì)被中斷，這樣就會(huì)持續(xù)占用瀏覽器主線程。眾所周知，是單線程運(yùn)行，長(zhǎng)時(shí)間占用主線程會(huì)阻塞其他類(lèi)似于樣式計(jì)算布局繪制等運(yùn)算，從而出現(xiàn)掉幀的情況。

　　首先歡迎大家關(guān)注我的Github博客，也算是對(duì)我的一點(diǎn)鼓勵(lì)，畢竟寫(xiě)東西沒(méi)法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵(lì)，希望大家多多關(guān)注呀！從今年年初離開(kāi)React開(kāi)發(fā)崗，React就慢慢淡出我的學(xué)習(xí)范圍?，F(xiàn)在想重拾一下React相關(guān)的知識(shí)，可能文章所提及的知識(shí)點(diǎn)已經(jīng)算是過(guò)時(shí)了，僅僅算作是自己的學(xué)習(xí)體驗(yàn)吧，
　　

　　React 16.0發(fā)布于2017年九月，此次新版本作為一次大的版本升級(jí)，為我們?cè)S多新特性以及全新的內(nèi)部架構(gòu)，分別了解一下:

　　React依賴(lài)于ES6中的Map與Set類(lèi)型以及requestAnimationFrame函數(shù)(requestAnimationFrame函數(shù)用來(lái)告知瀏覽器在每次動(dòng)畫(huà)重繪之前都調(diào)用給定的回調(diào)函數(shù))，如果你需要支持IE11以下的老版本瀏覽器和設(shè)備，React原生不再提供支持，必須引入polyfill。

　　對(duì)于Map與Set，我們可以在全局引入core-js處理，對(duì)于requestAnimationFrame而言，我們可以通過(guò)引入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的返回值必須包含在一個(gè)根元素，因此我們經(jīng)常都是將其包裹在一個(gè)div標(biāo)簽中，在React16中我們直接在render函數(shù)中返回字符串和數(shù)組。

　　比如存在下面的場(chǎng)景，假設(shè)有以下兩個(gè)組件:

class Row extends Component{
    render() {
        return (
            

                React
                Vue
                Angular
            
        );
    }
}

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

　　在之前的版本中組件僅能返回一個(gè)根組件，Row中的組件不得已只能用div標(biāo)簽包裹，但是因?yàn)?b>td被div包裹會(huì)導(dǎo)致瀏覽器無(wú)法識(shí)別，當(dāng)然我們可以將tr挪到Row中，但是React 16.0提供了直接返回?cái)?shù)組的形式，因此我們可以直接方便的寫(xiě)成:

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

　　在組件中直接返回字符串相當(dāng)于直接創(chuàng)建匿名文本。

　　React 16.0 增強(qiáng)了異常的處理能力，在之前的React中，組件內(nèi)部的錯(cuò)誤可能會(huì)使得狀態(tài)發(fā)生錯(cuò)亂從而導(dǎo)致下一次渲染發(fā)生未知的錯(cuò)誤，然而React沒(méi)有提供能優(yōu)雅地捕捉這些錯(cuò)誤并且從中恢復(fù)的方式。試想，部分程序的錯(cuò)誤不應(yīng)該干擾整個(gè)應(yīng)用的流程，因而React16引入了新的概念: Error boundaries(錯(cuò)誤邊界)。

所謂的錯(cuò)誤邊界(Error boundaries )是指能夠捕獲子孫組件中錯(cuò)誤，并提供打印這些錯(cuò)誤和展示錯(cuò)誤UI界面的組件。錯(cuò)誤邊界能夠捕捉子孫組件render方法、生命周期以及構(gòu)造函數(shù)中的錯(cuò)誤。

　　舉個(gè)例子:

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的組件被稱(chēng)為錯(cuò)誤邊界，其功能類(lèi)似于JavaScript中的catch。值得注意是的，錯(cuò)誤邊界僅僅能夠捕捉子孫組件的錯(cuò)誤而不誤捕獲自身的錯(cuò)誤。React 16.0引入了一個(gè)新的行為，任何未被捕獲的錯(cuò)誤都會(huì)卸載整個(gè)React組件樹(shù)，雖然這個(gè)行為富有爭(zhēng)議，但React開(kāi)發(fā)者們認(rèn)為即使什么也不顯示，也比顯示一堆錯(cuò)誤更好。當(dāng)然了，錯(cuò)誤邊界僅能捕捉我們上面所提到特定位置的錯(cuò)誤，如果是事件處理中的錯(cuò)誤，你還是得使用JavaScript的try和catch。

　　React 16之前，并沒(méi)有提供Portal的功能，如果需要渲染類(lèi)似于對(duì)話框的組件則必須借助于unstable_renderSubtreeIntoContainer與unmountComponentAtNode，例如我們想要實(shí)現(xiàn)一個(gè)對(duì)話框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
        );
    }
}

　　我們知道對(duì)話框是非常特殊的一種情況，不能渲染在父組件內(nèi)而是需要直接渲染在body標(biāo)簽下，為了解決了這個(gè)問(wèn)題，在上面的代碼中render實(shí)際上并沒(méi)有返回任何組件，而是在componentDidMount生命周期中利用unstable_renderSubtreeIntoContainer方法將對(duì)應(yīng)組件直接渲染在this.node下。需要注意的是，unstable_renderSubtreeIntoContainer渲染的組件需要手動(dòng)卸載，否則可能會(huì)造成內(nèi)存泄露，因此我們?cè)?b>componentWillUnmount中手動(dòng)調(diào)用unmountComponentAtNode。

　　有ReactDom.createPortal，一切都變得簡(jiǎn)單的起來(lái)，既不需要手動(dòng)去卸載組件，也不需要擔(dān)心unstable的API會(huì)在后續(xù)的版本中移出，上面的例子，在React 16.0可以如下實(shí)現(xiàn):

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服務(wù)器渲染在React 16.0之前僅僅支持renderToString，后端用字符串的方式將渲染好的HTML發(fā)送給客戶端，而React 16.0則提供了renderToNodeStream，返回一個(gè)可讀流，二者有什么區(qū)別？

// 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();
  });
});

　　回答這個(gè)問(wèn)題之前，我們需要了解一下什么是流(Stream)，對(duì)于從事前端的同學(xué)而言，流這個(gè)概念相對(duì)比較陌生，流本質(zhì)上是對(duì)輸入輸出設(shè)備的抽象，比如:

ls | grep *.js

　　ls產(chǎn)生的數(shù)據(jù)通過(guò)管道符號(hào)(|)流向了grep命令中，數(shù)據(jù)就像水流一樣在管道符號(hào)中流動(dòng)。設(shè)備流向程序我們稱(chēng)為readable，程序流向設(shè)備我們稱(chēng)為writable，我們舉一個(gè)例子:

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

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

rs.pipe(ws);

　　數(shù)據(jù)通過(guò)管道中從rs流向了ws，實(shí)現(xiàn)了復(fù)制的功能，并且數(shù)據(jù)在管道流動(dòng)的過(guò)程中我們還可以對(duì)數(shù)據(jù)進(jìn)行處理。那么流有哪些優(yōu)點(diǎn)呢？首先數(shù)據(jù)不需要一次性從設(shè)備全部拿出，然后再寫(xiě)入另外一個(gè)設(shè)備。流可以實(shí)現(xiàn)一點(diǎn)點(diǎn)的放入內(nèi)存中，一點(diǎn)點(diǎn)的存入設(shè)備，帶來(lái)的就是內(nèi)存開(kāi)銷(xiāo)的下降。并且我們可以在管道中優(yōu)雅的處理數(shù)據(jù)，方便程序拓展。

　　講了這么多流的優(yōu)點(diǎn)，renderToNodeStream為服務(wù)器渲染帶來(lái)了什么呢？首先同樣的道理，renderToNodeStream可以降低渲染服務(wù)器的內(nèi)存消耗，更重要的是帶來(lái)TTFB的降低。

TTFB(Time to First Byte):瀏覽器從最初的網(wǎng)絡(luò)請(qǐng)求被發(fā)起到從服務(wù)器接收到第一個(gè)字節(jié)前所花費(fèi)的毫秒數(shù)

　　我們知道HTTP協(xié)議在傳輸層使用的TCP協(xié)議，而TCP協(xié)議每次會(huì)將應(yīng)用層數(shù)據(jù)切割成一個(gè)個(gè)報(bào)文傳輸，因此使用流不必等待所有的渲染完成才傳輸，可以有效降低TTFB。

　　在React 16之前，React會(huì)忽視非標(biāo)準(zhǔn)DOM屬性，例如：

　　在React 15中僅會(huì)輸出:

　　在React 16中則會(huì)輸出:

　　允許使用非標(biāo)準(zhǔn)DOM屬性使得在集成第三方庫(kù)或者嘗試新的DOM API時(shí)更加的方便。

　　關(guān)于setState函數(shù)，setState(null)將不會(huì)再觸發(fā)更新，因此如果是以函數(shù)作為參數(shù)的形式調(diào)用setState，可以通過(guò)返回null的方式控制組件是否重新渲染，例如:

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

　　需要注意的是，與之前不同，如果在render中直接調(diào)用setState會(huì)觸發(fā)更新，當(dāng)前實(shí)際的情況是，你也不應(yīng)該在render中直接觸發(fā)setState。并且，之前的setState的回調(diào)函數(shù)(第二個(gè)參數(shù))是在所有組件重新渲染完之后調(diào)用，而現(xiàn)在會(huì)在componentDidMount和componentDidUpdate后立即調(diào)用。

　　關(guān)于生命周期中，如果一個(gè)組件從被替換成，那么React 16中B組件的componentWillMount一定總是先于A組件的componentWillUnmount，但是在React 16之前的版本某些情況下可能是相反的順序。還有，componentDidUpdate方法不會(huì)再接收到prevContext的參數(shù)。

Write once, run anywhere