本篇文章主要的介紹了關(guān)於react16的一些新特性，還有關(guān)於react16的詳細(xì)功能介紹。下面就讓我們一起來看這篇文章的正文內(nèi)容吧

React 16更新

新js環(huán)境需求

react16依靠Map和Set集合和requestAnimationFrame（一個(gè)針對(duì)動(dòng)畫效果的API）

新功能

-?Fragments：render函數(shù)可以返回?cái)?shù)組和字符串
-?error?boundaries：錯(cuò)誤處理
-?portals?：支持聲明性地將子樹渲染到另一個(gè)DOM節(jié)點(diǎn)
-?custom?DOM?attributes?：ReactDom允許傳遞非標(biāo)準(zhǔn)屬性
-?improved?server-side?rendering:提升服務(wù)端渲染性能

1. Fragments

   render()?{
   ??return?[
   ????<li key="A"/>First?item</li>,
   ????<li key="B"/>Second?item</li>,
   ????<li key="C"/>Third?item</li>,
   ??];
   }

   詳見API

2. #error boundaries

   之前，一旦某個(gè)元件發(fā)生錯(cuò)誤，整個(gè)元件樹將會(huì)從根節(jié)點(diǎn)被unmount下來。 React 16修復(fù)了這一點(diǎn)，引入了Error Boundary的概念，中文譯為“錯(cuò)誤邊界”，當(dāng)某個(gè)組件發(fā)生錯(cuò)誤時(shí)，我們可以通過Error Boundary捕獲到錯(cuò)誤並對(duì)錯(cuò)誤做優(yōu)雅處理，如使用Error Boundary提供的內(nèi)容替代錯(cuò)誤組件。 Error Boundary可以看作是一種特殊的React元件，新增了componentDidCatch這個(gè)生命週期函數(shù)，它可以捕捉自身及子樹上的錯(cuò)誤並對(duì)錯(cuò)誤做優(yōu)雅處理，包括上報(bào)錯(cuò)誤日誌、展示出錯(cuò)提示，而不是卸載整個(gè)組件樹。 （註：它並不能捕捉runtime所有的錯(cuò)誤，例如元件回呼事件裡的錯(cuò)誤，可以把它想像成傳統(tǒng)的try-catch語(yǔ)句）

   實(shí)作：

   抽像出檢查錯(cuò)誤邊界公共元件：

   class?ErrorBoundary?extends?React.Component{
   ????constructor(props){
   ????????super(props);
   ????????this.state=({
   ????????????ifError:false
   ????????});
   ????}
   
   ????componentDidCatch(err,?info)?{
   ????????this.setState({?ifError:?true?})
   ????????console.log(err);
   ????}
   
   ????render(){
   ????????if(this.state.ifError){
   ????????????return?`this?or?its?children?has?error`;
   ????????}
   ????????return?this.props.children
   ????}
   }

   建立一個(gè)簡(jiǎn)單的包含錯(cuò)誤的子元件：

   class?ErrorComponent?extends?React.Component{
   ????render(){
   ????????const?str?=?'123';
   ????????return?str.toFixed(2);
   ????}
   }

   使用錯(cuò)誤邊界元件包裹可能出錯(cuò)的元件

   class?MainShowComponent?extends?React.Component{
   ????render(){
   ????????return?(
   ????????????<p>
   ????????????????<ErrorBoundary>
   ????????????????????<ErrorComponent/>
   ????????????????</ErrorBoundary>
   ????????????</p>
   ????????)
   ????}
   }

   當(dāng)被錯(cuò)誤邊界元件包裹的子組件中出現(xiàn)錯(cuò)誤，會(huì)將錯(cuò)誤組件替換為字串：this or its children has error，而不會(huì)導(dǎo)致整體組件樹被卸載。 （想看更多就到PHP中文網(wǎng)React參考手冊(cè)欄位中學(xué)習(xí)）

3. #Portals

   Portals提供了一個(gè)一流的方法來將子代呈現(xiàn)到父元件的DOM層次結(jié)構(gòu)之外的DOM節(jié)點(diǎn)。

   ReactDOM.createPortal(
   ??child,
   ??container
   );

   第一個(gè)參數(shù)（child）是任何可渲染的React子元素，如元素，字串或片段。第二個(gè)參數(shù)（container）是一個(gè)DOM元素。

   通常，當(dāng)您從元件的render方法傳回一個(gè)元素時(shí)，它將作為最近的父節(jié)點(diǎn)的子元素裝載到DOM中：

   render()?{
   ??//?React?mounts?a?new?p?and?renders?the?children?into?it
   ??return?(
   ????<p>
   ??????{this.props.children}
   ????</p>
   ??);
   }

   但是，有時(shí)會(huì)將子項(xiàng)插入到DOM中的其他位置會(huì)很有用：

   render()?{
   ??//?React?does?*not*?create?a?new?p.?It?renders?the?children?into?`pNode`.
   ??//?`pNode`?is?any?valid?DOM?node,?regardless?of?its?location?in?the?DOM.
   ??return?React.createPortal(
   ????this.props.children,
   ????pNode,
   ??);
   }

   有關(guān)Portals 和其事件冒泡詳見官網(wǎng)和CodePen範(fàn)例

4. ##custom DOM attributes
   支援非標(biāo)準(zhǔn)的自訂DOM屬性，在先前的版本中，React會(huì)忽略無(wú)法辨識(shí)的HTML和SVG屬性，自訂屬性只能透過data-*形式添加，現(xiàn)在它會(huì)把這些屬性直接傳遞給DOM，這個(gè)改動(dòng)讓React可以去掉屬性白名單，從而減少了檔案大小。但當(dāng)DOM傳遞的自訂屬性是函數(shù)類型或event handler類型時(shí)，也會(huì)被React忽略。

   <p a={()=>{}}></p>???//錯(cuò)誤

5. improved server-side rendering
   提升服務(wù)端渲染效能，React 16的SSR被完全重寫，新的實(shí)作非常快，接近3倍效能於React 15，現(xiàn)在提供一種串流模式streaming，可以更快地把渲染的位元組傳送到客戶端。

• 調(diào)度和生命週期的改變

• 呼叫setState返回null將不會(huì)更新render，這樣可以讓你在更新方法中自己決定是否更新。

  this.setState(
  ????(state)=>{
  ????????if(state.curCount%2?===?0){
  ????????????return?{curCount:state.curCount+1}
  ????????}else{
  ????????????return?null;
  ????????}
  
  ????}
  )

• 在render方法中呼叫setState總是會(huì)導(dǎo)致更新，之前版本不支持，但盡量不要在render中呼叫setState。

• setState的回呼函數(shù)會(huì)在componentDidMount/ componentDidUpdate 執(zhí)行之後立即執(zhí)行，而不是在所有元件渲染之後。

  ????this.setState(
  ????????(state)=>{
  ????????????if(state.curCount%2?===?0){
  ????????????????return?{curCount:state.curCount+1}
  ????????????}else{
  ????????????????return?null;
  ????????????}
  
  ????????},
  ????????()=>{
  ????????????console.log(this.state.curCount);
  ????????}
  ????)

1. ReactDOM.render()和ReactDom.unstable_renderIntoContainer()如果在生命週期函數(shù)中呼叫將會(huì)傳回null。所以解決這類問題可以使用portals或refs

2. setState的改變：

3. 當(dāng)兩個(gè)元件

   和 >發(fā)生替換時(shí)，B.componentWillMount總是會(huì)在A.componentWillUnmount之前執(zhí)行，在之前，A.componentWillUnmount有可能會(huì)提前執(zhí)行。

4. 之前版本，當(dāng)改變一個(gè)元件的ref時(shí)，ref和dom會(huì)在元件的render方法被呼叫之前分離?，F(xiàn)在，我們延遲了ref的改變，直到dom元素改變了，ref才會(huì)和dom分離。

5. 對(duì)於不使用React而是使用其他方法來重新渲染容器是不安全的。這在以前的版本中也許會(huì)生效，但是我們覺得不支援這樣做?，F(xiàn)在對(duì)於這種情況我們會(huì)發(fā)出一個(gè)警告，而且你需要使用ReactDOM.unmountComponentAtNode來清空你的節(jié)點(diǎn)樹。

   ReactDOM.render(<App />,?p);
   p.innerHTML?=?'nope';
   ReactDOM.render(<App />,?p);//渲染一些沒有被正確清理的東西

   而你需要：

   ReactDOM.render(<App />,?p);
   ReactDOM.unmountComponentAtNode(p);
   p.innerHTML?=?'nope';
   ReactDOM.render(<App />,?p);?//?Now?it's?okay

   查看此issue

6. #componentDidUpdate生命週期不再接受prevContext參數(shù)。

7. 使用不唯一的key可能會(huì)導(dǎo)致子元件的複製或遺失，使用不唯一的key並不支持，也從未支持，但之前這是一個(gè)硬性錯(cuò)誤。

8. Shallow renderer（淺層渲染）不再觸發(fā)componentDidUpdate()，因?yàn)镈OM的refs是不可用的。這也使得它與componentDidMount()之前版本中的呼叫一致。

9. Shallow renderer不再支援unstable_batchedUpdates()。

10. ReactDOM.unstable_batchedUpdates 現(xiàn)在回呼之後只有一個(gè)額外的參數(shù)。