這篇文章主要介紹react16有哪些新特性，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、南川ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的南川網(wǎng)站制作公司
react16新特性：1、render支持返回?cái)?shù)組和字符串；2、錯(cuò)誤邊界；3、createPortal；4、支持自定義DOM屬性；5、Fiber；6、Fragment；7、createContext；8、Hooks等等。
重慶分公司
重慶分公司
// 不需要再將元素作為子元素裝載到根元素下面
render() {
return [
1,
2,
3,
];
}React15 在渲染過(guò)程中遇到運(yùn)行時(shí)的錯(cuò)誤，會(huì)導(dǎo)致整個(gè) React 組件的崩潰，而且錯(cuò)誤信息不明確可讀性差。React16 支持了更優(yōu)雅的錯(cuò)誤處理策略，如果一個(gè)錯(cuò)誤是在組件的渲染或者生命周期方法中被拋出，整個(gè)組件結(jié)構(gòu)就會(huì)從根節(jié)點(diǎn)中卸載，而不影響其他組件的渲染，可以利用 error boundaries 進(jìn)行錯(cuò)誤的優(yōu)化處理。
class ErrorBoundary extends React.Component {
state = { hasError: false };
componentDidCatch(error, info) {
this.setState({ hasError: true });
logErrorToMyService(error, info);
}
render() {
if (this.state.hasError) {
return 數(shù)據(jù)錯(cuò)誤
;
}
return this.props.children;
}
}createPortal 的出現(xiàn)為 彈窗、對(duì)話框 等脫離文檔流的組件開(kāi)發(fā)提供了便利，替換了之前不穩(wěn)定的 API unstable_renderSubtreeIntoContainer，在代碼使用上可以做兼容，如：
const isReact16 = ReactDOM.createPortal !== undefined; const getCreatePortal = () => isReact16 ? ReactDOM.createPortal : ReactDOM.unstable_renderSubtreeIntoContainer;
使用 createPortal 可以快速創(chuàng)建 Dialog 組件，且不需要牽扯到 componentDidMount、componentDidUpdate 等生命周期函數(shù)。
并且通過(guò) createPortal 渲染的 DOM，事件可以從 portal 的入口端冒泡上來(lái)，如果入口端存在 onDialogClick 等事件，createPortal 中的 DOM 也能夠被調(diào)用到。
import React from 'react';
import { createPortal } from 'react-dom';
class Dialog extends React.Component {
constructor() {
super(props);
this.node = document.createElement('div');
document.body.appendChild(this.node);
}
render() {
return createPortal(
{this.props.children}
,
this.node
);
}
}以前的 React 版本 DOM 不識(shí)別除了 HTML 和 SVG 支持的以外屬性，在 React16 版本中將會(huì)把全部的屬性傳遞給 DOM 元素。這個(gè)新特性可以讓我們擺脫可用的 React DOM 屬性白名單。筆者之前寫過(guò)一個(gè)方法，用于過(guò)濾非 DOM 屬性 filter-react-dom-props，16 之后即可不再需要這樣的方法。
React16 使用 Rollup 針對(duì)不同的目標(biāo)格式進(jìn)行代碼打包，由于打包工具的改變使得庫(kù)文件大小得到縮減。
React 庫(kù)大小從 20.7kb（壓縮后 6.9kb）降低到 5.3kb（壓縮后 2.2kb）
ReactDOM 庫(kù)大小從 141kb（壓縮后 42.9kb）降低到 103.7kb（壓縮后 32.6kb）
React + ReactDOM 庫(kù)大小從 161.7kb（壓縮后 49.8kb）降低到 109kb（壓縮后 43.8kb）
Fiber 是對(duì) React 核心算法的一次重新實(shí)現(xiàn)，將原本的同步更新過(guò)程碎片化，避免主線程的長(zhǎng)時(shí)間阻塞，使應(yīng)用的渲染更加流暢。
在 React16 之前，更新組件時(shí)會(huì)調(diào)用各個(gè)組件的生命周期函數(shù)，計(jì)算和比對(duì) Virtual DOM，更新 DOM 樹等，這整個(gè)過(guò)程是同步進(jìn)行的，中途無(wú)法中斷。當(dāng)組件比較龐大，更新操作耗時(shí)較長(zhǎng)時(shí)，就會(huì)導(dǎo)致瀏覽器唯一的主線程都是執(zhí)行組件更新操作，而無(wú)法響應(yīng)用戶的輸入或動(dòng)畫的渲染，很影響用戶體驗(yàn)。
Fiber 利用分片的思想，把一個(gè)耗時(shí)長(zhǎng)的任務(wù)分成很多小片，每一個(gè)小片的運(yùn)行時(shí)間很短，在每個(gè)小片執(zhí)行完之后，就把控制權(quán)交還給 React 負(fù)責(zé)任務(wù)協(xié)調(diào)的模塊，如果有緊急任務(wù)就去優(yōu)先處理，如果沒(méi)有就繼續(xù)更新，這樣就給其他任務(wù)一個(gè)執(zhí)行的機(jī)會(huì)，唯一的線程就不會(huì)一直被獨(dú)占。
因此，在組件更新時(shí)有可能一個(gè)更新任務(wù)還沒(méi)有完成，就被另一個(gè)更高優(yōu)先級(jí)的更新過(guò)程打斷，優(yōu)先級(jí)高的更新任務(wù)會(huì)優(yōu)先處理完，而低優(yōu)先級(jí)更新任務(wù)所做的工作則會(huì)完全作廢，然后等待機(jī)會(huì)重頭再來(lái)。所以 React Fiber 把一個(gè)更新過(guò)程分為兩個(gè)階段：
第一個(gè)階段 Reconciliation Phase，F(xiàn)iber 會(huì)找出需要更新的 DOM，這個(gè)階段是可以被打斷的；
第二個(gè)階段 Commit Phase，是無(wú)法別打斷，完成 DOM 的更新并展示；
在使用 Fiber 后，需要要檢查與第一階段相關(guān)的生命周期函數(shù)，避免邏輯的多次或重復(fù)調(diào)用：
componentWillMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
與第二階段相關(guān)的生命周期函數(shù)：
componentDidMount
componentDidUpdate
componentWillUnmount
react-call-return 目前還是一個(gè)獨(dú)立的 npm 包，主要是針對(duì) 父組件需要根據(jù)子組件的回調(diào)信息去渲染子組件場(chǎng)景 提供的解決方案。
在 React16 之前，針對(duì)上述場(chǎng)景一般有兩個(gè)解決方案：
首先讓子組件初始化渲染，通過(guò)回調(diào)函數(shù)把信息傳給父組件，父組件完成處理后更新子組件 props，觸發(fā)子組件的第二次渲染才可以解決，子組件需要經(jīng)過(guò)兩次渲染周期，可能會(huì)造成渲染的抖動(dòng)或閃爍等問(wèn)題；
首先在父組件通過(guò) children 獲得子組件并讀取其信息，利用 React.cloneElement 克隆產(chǎn)生新元素，并將新的屬性傳遞進(jìn)去，父組件 render 返回的是克隆產(chǎn)生的子元素。雖然這種方法只需要使用一個(gè)生命周期，但是父組件的代碼編寫會(huì)比較麻煩；
React16 支持的 react-call-return，提供了兩個(gè)函數(shù) unstable_createCall 和 unstable_createReturn，其中 unstable_createCall 是 父組件使用，unstable_createReturn 是 子組件使用，父組件發(fā)出 Call，子組件響應(yīng)這個(gè) Call，即 Return。
在父組件 render 函數(shù)中返回對(duì) unstable_createCall 的調(diào)用，第一個(gè)參數(shù)是 props.children，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，用于接受子組件響應(yīng) Call 所返回的信息，第三個(gè)參數(shù)是 props；
在子組件 render 函數(shù)返回對(duì) unstable_createReturn 的調(diào)用，參數(shù)是一個(gè)對(duì)象，這個(gè)對(duì)象會(huì)在unstable_createCall 第二個(gè)回調(diào)函數(shù)參數(shù)中訪問(wèn)到；
當(dāng)父組件下的所有子組件都完成渲染周期后，由于子組件返回的是對(duì) unstable_createReturn 的調(diào)用所以并沒(méi)有渲染元素，unstable_createCall 的第二個(gè)回調(diào)函數(shù)參數(shù)會(huì)被調(diào)用，這個(gè)回調(diào)函數(shù)返回的是真正渲染子組件的元素；
針對(duì)普通場(chǎng)景來(lái)說(shuō)，react-call-return 有點(diǎn)過(guò)度設(shè)計(jì)的感覺(jué)，但是如果針對(duì)一些特定場(chǎng)景的話，它的作用還是非常明顯，比如，在渲染瀑布流布局時(shí)，利用 react-call-return 可以先緩存子組件的 ReactElement，等必要的信息足夠之后父組件再觸發(fā) render，完成渲染。
import React from 'react';
import { unstable_createReturn, unstable_createCall } from 'react-call-return';
const Child = (props) => {
return unstable_createReturn({
size: props.children.length,
renderItem: (partSize, totalSize) => {
return { props.children } { partSize } / { totalSize };
}
});
};
const Parent = (props) => {
return (
{
unstable_createCall(
props.children,
(props, returnValues) => {
const totalSize = returnValues.map(v => v.size).reduce((a, b) => a + b, 0);
return returnValues.map(({ size, renderItem }) => {
return renderItem(size, totalSize);
});
},
props
)
}
);
};Fragment 組件其作用是可以將一些子元素添加到 DOM tree 上且不需要為這些元素提供額外的父節(jié)點(diǎn)，相當(dāng)于 render 返回?cái)?shù)組元素。
render() {
return (
Some text.
A heading
More text.
Another heading
Even more text.
);
}全新的 Context API 可以很容易穿透組件而無(wú)副作用，其包含三部分：React.createContext，Provider，Consumer。
React.createContext 是一個(gè)函數(shù)，它接收初始值并返回帶有 Provider 和 Consumer 組件的對(duì)象；
Provider 組件是數(shù)據(jù)的發(fā)布方，一般在組件樹的上層并接收一個(gè)數(shù)據(jù)的初始值；
Consumer 組件是數(shù)據(jù)的訂閱方，它的 props.children 是一個(gè)函數(shù)，接收被發(fā)布的數(shù)據(jù)，并且返回 React Element；
const ThemeContext = React.createContext('light');
class ThemeProvider extends React.Component {
state = {theme: 'light'};
render() {
return (
{this.props.children}
);
}
}
class ThemedButton extends React.Component {
render() {
return (
{theme =>
);
}
} React16 規(guī)范了 Ref 的獲取方式，通過(guò) React.createRef 取得 Ref 對(duì)象。
// before React 16
···
componentDidMount() {
const el = this.refs.myRef
}
render() {
return React.forwardRef 是 Ref 的轉(zhuǎn)發(fā), 它能夠讓父組件訪問(wèn)到子組件的 Ref，從而操作子組件的 DOM。 React.forwardRef 接收一個(gè)函數(shù)，函數(shù)參數(shù)有 props 和 ref。
