從React 15到React 16

  就像人們對移動應用程序和操做系統的更新感到興奮同樣，開發人員也應該對使用的框架更新感到興奮。
各個框架的新版本給咱們帶來開箱即用的新功能和技巧。

  如下是將現有應用從React 15遷移到React 16時應考慮的一些優秀功能。

咱們是時候對React15說再見了 👋

錯誤處理

React 16 引入了錯誤邊界的新概念。

錯誤邊界是捕獲子組件樹中任意位置javascript錯誤的react組件。他們記錄這些錯誤，而且渲染備用的UI，而不是崩潰的組件樹。錯誤邊界能夠在渲染期間，生命週期方法，以及它們下面的整個樹的構造函數中捕獲錯誤。

若是一個類組件定義一個名爲componentDidCatch(error, info)的新生命週期方法，那麼它將變成錯誤邊界：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

接下來，你能夠把它當作一個普通的組件來用。

<ErrorBoundary>  
   <MyWidget />
</ErrorBoundary>

componentDidCatch（）方法的工做相似於JavaScript catch {}塊，但對於組件。只有類組件能夠是錯誤邊界。實際上，大多數狀況下，您只須要聲明一次錯誤邊界組件。而後你就能夠在整個應用程序中使用它。

須要注意的是，錯誤邊界只捕獲其下面組件的錯誤。錯誤邊界不可以捕獲自身的錯誤，若是錯誤邊界嘗試渲染錯誤信息失敗，那麼錯誤將傳播到其上方最近的錯誤邊界，這一點，也相似於catch{}塊在javaScript中的工做方式。

查看一個演示:
https://codepen.io/gaearon/pe...
有關錯誤處理的更多信息，可訪問error-handling-in-react-16

新的渲染返回類型： fragments(片斷)和strings(字符串)

擺脫渲染時將組件包裹在div中。
您如今能夠在component的render方法返回一個元素數組。與其餘數組同樣，您須要爲每一個元素添加一個key以免報key警告：

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

從React 16.2.0開始，fragments支持JSX的特殊片斷語法，不須要key。

支持返回字符串：

render() {
  return 'Look ma, no spans!';
}

Portals

Portals提供了一種將子項渲染在父組件的DOM層次結構以外的DOM節點中的好方法。

ReactDOM.createPortal(child, container)

其中，第一個參數child是任何可渲染的react元素，例如元素，字符串，或者片斷。第二個參數container是dom元素

怎樣使用它

當咱們從組件的render方法返回一個元素時，它做爲最近父節點的子節點掛載到DOM中：

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

有時,將子節點插入DOM中的其餘位置是頗有用的：

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

portals的一個典型用例是當父組件具備overflow：hidden或z-index樣式時，可是您須要子容器在視覺上「突破」其容器。例如，對話框，hover懸停卡片和tooltip。
https://codepen.io/gaearon/pe...

自定義DOM屬性

React 15用於忽略任何未知的DOM屬性。由於React不識別它，會跳過它們。

// Your code:
<div mycustomattribute="something" />

使用React 15會渲染一個空div：

// React 15 output:
<div />

在react16中，輸出將會是下面這樣子（自定義屬性將會顯示且不會被忽略）

// React 16 output:
<div mycustomattribute="something" />

經過設置state爲NULL來避免重複渲染

使用React16，您能夠直接從setState（）阻止state更新和從新渲染。你只須要讓你的函數返回null。

const MAX_PIZZAS = 20;

function addAnotherPizza(state, props) {
  // Stop updates and re-renders if I've had enough pizzas.
  if (state.pizza === MAX_PIZZAS) {
    return null;
  }

  // If not, keep the pizzas coming! :D
  return {
    pizza: state.pizza + 1,
  }
}

this.setState(addAnotherPizza);

訪問Refs

將ref傳遞給render中的元素時，能夠在ref的當前屬性中訪問對該節點的引用。

const node = this.myRef.current;

ref的值根據節點的類型而有所不一樣

• 當在HTML元素上使用ref屬性時，在構造函數中使用React.createRef（）建立的ref將接收底層DOM元素做爲current屬性。
• 當ref屬性用於自定義組件時，ref對象接收組件的掛載實例做爲current。
• 您不能函數組件上使用ref屬性，由於它們沒有實例。

關於refs，更多

Context

Context提供了一種經過組件樹傳遞數據的方法，而無需逐級經過props傳遞。

React.createContext

const {Provider, Consumer} = React.createContext(defaultValue);

建立{Provider，Consumer}。當React渲染上下文Consumer時，它將從樹中它上面最接近的匹配Provider讀取當前上下文值。
defaultValue參數僅在Consumer在樹中沒有匹配的Provider時使用。這可讓咱們不包裝它們就能單獨測試組件。注意：將undefined做爲Provider值傳遞不會致使Consumer使用defaultValue。

Provider

<Provider value={/* some value */}>

一個React組件，容許消費者訂閱上下文更改。接受一個value prop，傳遞給做爲此Provider的後代的消費者。一個Provider能夠鏈接到許多消費者，能夠嵌套覆蓋樹中更深層的值。

Consumer

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

一個訂閱上下文更改的React組件。

須要一個函數做爲子元素。該函數接收當前上下文值並返回React節點。傳遞給函數的value參數將等於樹中上述此上下文的最近Provider的value prop。若是上面沒有此上下文的Provider，則value參數將等於傳遞給createContext（）的defaultValue。

React生命週期鉤子

這些是使用React16時必定要嘗試的一些功能！