React v16.0 新功能介紹

Photo by Steve Halama on Unsplash

React v16.0已經發佈了，詳細的更新內容附上官方連結，這篇文章主要針對兩個新功能進行介紹。

MIT License：

在爭議不斷的React license 事件後，從React v16.0開始，Facebook 決定要重新把 React 的 license 改回 MIT，這應該也是所有開發者開心的事情！

1. Returning array from render：

以往的render function必須要回傳只有一個root dom的element，否則會發生錯誤，如下面範例所示：

// 錯誤的render
render() {
   return (
      <div>1</div>
      <div>2</div>
   )
}
// 正確的render
render() {
   return (
      <div>
          <div>1</div>
          <div>2</div>
      </div>
   )
}

React v16.0 提供了returning array from render

// returning array from render
render() {
   return [
      <div>1</div>,
      <div>2</div>
   ]
}

2. Error handling：

先前的文章介紹過了React元件生命週期，還不清楚的朋友可以先看一下喔，這是React很重要的部分。

而React 16 beta則新增了一個生命週期『 componentDidCatch 』，用來抓取Component的錯誤，可以理解為Component 的 try / catch。

這裡要注意的是『 componentDidCatch 』是抓取子Component的錯誤，當本身Component發生錯誤的時候是不會進入的喔！

我們可以使用React的進階用法 『 Higher-Order Component 』來製作自己的 ErrorHandler 抓取Component的錯誤。

因為其特性只能抓取子Component的錯誤，因此將 ErrorHandler 放在最上層的Component使用，如此一來當Header或Content兩個Component發生錯誤的時候，就可以抓取到錯誤。

// Home.js
import React, { Component } from 'react';
import ErrorHandler from '../ErrorHandler';
import Header from './components/Header.js';
import Content from './components/Content.js';
@ErrorHandler
export default class Home extends Component {
    render() {
        return (
            <div id="pageHome">
               <Header />
               <Content />
            </div>
        );
     }
}

『 Higher-Order Component 』：ErrorHandler程式碼如下：

// ErrorHandler.js
import React, { Component } from 'react';
import ErrorComponent from './ErrorComponent';
export default (ComposedComponent) => {
    class RefreshHandler extends Component {
       state = {
          isError: false,
       }
       // 抓取子Component錯誤
       componentDidCatch(e) {
          // 發生錯誤了
          console.log(e);
          this.setState({
             isError: true,
          });
          // 此處可以呼叫api，將錯誤寫進資料庫
       }
       render() {
          // ErrorComponent為自定義錯誤畫面Component
          // ComposedComponent為Higher-Order Component包住的         
             Component，以本文章來說的話就是『 Home 』Component
          
          // 當發生錯誤的時候顯示ErrorComponent，反之回傳    
             ComposedComponent
          return (
               this.state.isError
               ? <ErrorComponent />
               : <ComposedComponent />
          );
       }
    }
    return RefreshHandler;
};

自定義的錯誤畫面

// ErrorComponent.js
import React, { Component } from 'react';
export default class ErrorComponent extends Component {
    render() {
        return (
           <div>
              <p>發生錯誤！</p>
              <p>請找工程師進行除錯。</p>
           </div>
        );
    }
}

總結：

React v16.0 提供了許多新功能，小編認為最實用的還是新增的生命週期： 『 componentDidCatch 』。

原先Component發生錯誤的時候畫面會變成一片空白，因為Component發生錯誤時就不會render畫面，這對於使用者體驗是非常糟糕的，但是現在可以顯示自定義錯誤畫面讓使用者知道發生錯誤！

而使用『 Higher-Order Component 』後就可以輕鬆的抓取子Component錯誤，不管是用在最上層的Component或者是個別Component都可以。