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

React 16更新

新js環境需求

react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）

登入後複製

新功能

- Fragments：render函数可以返回数组和字符串
- error boundaries：错误处理
- portals ：支持声明性地将子树渲染到另一个DOM节点
- custom DOM attributes ：ReactDom允许传递非标准属性
- improved server-side rendering:提升服务端渲染性能

登入後複製

Fragments

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

登入後複製

詳見API

#error boundaries

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

實作：

抽像出檢查錯誤邊界公共元件：
```
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
    }
}
```
登入後複製
建立一個簡單的包含錯誤的子元件：
```
class ErrorComponent extends React.Component{
    render(){
        const str = '123';
        return str.toFixed(2);
    }
}
```
登入後複製
使用錯誤邊界元件包裹可能出錯的元件
```
class MainShowComponent extends React.Component{
    render(){
        return (
            
                <ErrorBoundary>
                    <ErrorComponent/>
                </ErrorBoundary>
            
        )
    }
}
```
登入後複製
當被錯誤邊界元件包裹的子組件中出現錯誤，會將錯誤組件替換為字串：this or its children has error，而不會導致整體組件樹被卸載。（想看更多就到PHP中文網React參考手冊欄位中學習）
#Portals

Portals提供了一個一流的方法來將子代呈現到父元件的DOM層次結構之外的DOM節點。
```
ReactDOM.createPortal(
  child,
  container
);
```
登入後複製
第一個參數（child）是任何可渲染的React子元素，如元素，字串或片段。第二個參數（container）是一個DOM元素。

通常，當您從元件的render方法傳回一個元素時，它將作為最近的父節點的子元素裝載到DOM中：
```
render() {
  // React mounts a new p and renders the children into it
  return (
    
      {this.props.children}
    
  );
}
```
登入後複製
但是，有時會將子項插入到DOM中的其他位置會很有用：
```
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,
  );
}
```
登入後複製
有關Portals 和其事件冒泡詳見官網和CodePen範例
##custom DOM attributes
支援非標準的自訂DOM屬性，在先前的版本中，React會忽略無法辨識的HTML和SVG屬性，自訂屬性只能透過data-*形式添加，現在它會把這些屬性直接傳遞給DOM，這個改動讓React可以去掉屬性白名單，從而減少了檔案大小。但當DOM傳遞的自訂屬性是函數類型或event handler類型時，也會被React忽略。
```
{}}>   //错误
```
登入後複製
improved server-side rendering
提升服務端渲染效能，React 16的SSR被完全重寫，新的實作非常快，接近3倍效能於React 15，現在提供一種串流模式streaming，可以更快地把渲染的位元組傳送到客戶端。

打破改變

調度和生命週期的改變

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

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

    }
)

登入後複製

在render方法中呼叫setState總是會導致更新，之前版本不支持，但盡量不要在render中呼叫setState。

setState的回呼函數會在componentDidMount/ componentDidUpdate 執行之後立即執行，而不是在所有元件渲染之後。

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

        },
        ()=>{
            console.log(this.state.curCount);
        }
    )

登入後複製