官方提供：在React 16.3.0中， 我們正在新增一些新的生命週期方法來輔助遷移。我們還為長期被要求的功能引入了新的API： 一個官方的context API，一個轉發的ref API和一個更符合人類使用的ref API.

官方 Context API

多年來，React僅提供了一個實驗性的context API。儘管它是一個非常強大的API，但是，因為它固有問題以及我們打算用一個更好的API來替換這個實驗的API，所以這個API一般不被推薦使用。

版本16.3引入了一個新的context API，它非常高效並且支援靜態型別檢查和深度更新。

注意: 舊的context API將繼續適用於所有React 16.x版本，所以你將有足夠的時間進行遷移。

下面是一個例子，說明如何使用新的context API注入一個『theme』：

const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = {theme: 'light'};

  render() {
    return (
      `<ThemeContext.Provider value={this.state.theme}>`
        {this.props.children}
      `</ThemeContext.Provider>`
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      `<ThemeContext.Consumer>`
        {theme => `<Button theme={theme} /
 
>`}
      `</ThemeContext.Consumer>`
    );
  }
}

createRef API

先前, React 提交供了兩種管理refs的方法：傳統的字串形式API和回撥函式API。儘管字串引用API是兩者中使用最方便的，但它也有幾個缺點 ，所有我們官方的建議是使用回撥函式形式代替它。

版本16.3增加了一個管理refs的新的選項，它提供了使用字串形式ref的便利性而且沒有任務缺點：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this
 
.inputRef = React.createRef();
  }

  render() {
    return `<input type="text" ref={this.inputRef} />`;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

注意：
除了新的createRef API，Callback refs 將會繼續得到支援。
你沒有必要替換掉你元件中的callback refs。它們稍微的更靈活一點，所以它們仍然是一個比較先進的功能。

forwardRef API

高階元件 (or HOCs) 是在元件間複用的程式碼的常用方法。基於上面的主題背景示例，我們中以建立一個HOC，它以屬性的方式將當前『theme』進行注入：

function withTheme(Component) {
  return function ThemedComponent(props) {
    return (
      `<ThemeContext.Consumer>`
        {theme => `<Component {...props} theme={theme} />`}
      `</ThemeContext.Consumer>`
    );
  };
}

我們可以使用上面的HOC將元件直接連線到主體上下文，而無需直接使用 ThemeContext。例如：

class FancyButton extends React.Component {
  buttonRef = React.createRef();

  focus() {
    this.buttonRef.current.focus();
  }

  render() {
    const {label, theme, ...rest} = this.props;
    return (
      `<button
        {...rest}
        className={`${theme}-button`}
        ref={this.buttonRef}>`
        {label}
      `</button>`
    );
  }
}

const FancyThemedButton = withTheme(FancyButton);

// 我們可以渲染FancyThemedButton，就好像它是一個FancyButton
// 它將會自動接收當前『theme』,
// 同時HOC也會傳遞我們其它的props。
`<FancyThemedButton
  label="Click me!"
  onClick={handleClick}
/>`;

HOCs通常將會把props傳遞給它們包裹著的元件。不幸的是, refs不會被傳遞。這意味著，如果我們使用FancyThemedButton，我們將無法通過ref和FancyButton進行連線，所以我們無法呼叫focus()。

新的forwardRef API解決了這個問題，它提供了一個方法來攔截ref，並將它作為了普通的prop進行傳遞：

function withTheme(Component) {
  function ThemedComponent({forwardedRef, ...rest}) {
    return (
      `<ThemeContext.Consumer>`
        {theme => (
          // Assign the custom prop "forwardedRef" as a ref
          `<Component
            {...rest}
            ref={forwardedRef}
            theme={theme}
          />`
        )}
      `</ThemeContext.Consumer>`
    );
  }

  // 注意第二個引數"ref"是由React.forwardRef提供的。
  // 我們可以將它作為變通的props傳遞給ThemedComponent，例如 "forwardedRef"
  // 然後它可以被連線到這個元件。
  return React.forwardRef((props, ref) => (
    `<ThemedComponent {...props} forwardedRef={ref} />`
  ));
}

// 在這裡，我們假設FancyButton已經被匯入到當前上下文
const FancyThemedButton = withTheme(FancyButton);

// 通過Referenace API建立一個ref，
const fancyButtonRef = React.createRef();

// fancyButtonRef 現在指向 FancyButton
`<FancyThemedButton
  label="Click me!"
  onClick={handleClick}
  ref={fancyButtonRef}
/>`;

元件生命週期變更

React類元件的API已經有好多年了，而且幾乎沒有變化。但是，當我們新增對更高階功能的支援時（比如錯誤邊界和即將到來的非同步渲染模式），我們會以不是我們想要的方式來擴充套件此模型。

例如，使用當前的API，可以很容易的阻止非必要的邏輯進行初始渲染。部分原因是因為完成某項任務的方式太多，而且哪一個最好也不清楚。我們已經觀察到錯誤中斷的處理行通常不被考慮在內，並且可能導致記憶體洩漏（它會影響到即將到來的非同步渲染模式）。目前的類元件API也使其他工作複雜化，就像我們在原型化React編譯器方面的工作一樣。

這些問題在元件生命週期（componentWillMount, componentWillReceiveProps, and componentWillUpdate）的一個子集中更加的惡化。這些也恰好是造成React社群最混亂的生命週期問題。出於這些原因的考慮，我們將會降低這些方法的使用，轉而使用更好的方法代替。

我們意識到這些變更將會影響到現有的元件。因此，遷移路徑將會是漸進式的，並且會提供補救措施。（在Facebook上，我們維護了超過50,000個React元件。 我們也依賴於一個漸進的釋出週期！ ）

注意：
棄用警告將在未來的16.x版本中啟用，但舊版生命週期將繼續執行至17.x版。

使在17.x版中，仍然可以使用它們，但它們會以『UNSAFE_』為字首被重新命名，以表明它們可能會引起問題。我們還準備了一個自動化的指令碼來在現有程式碼中對它們重新命名。

除了摒棄不安全的生命週期外，我們還增加了一些新的生命週期：
- getDerivedStateFromProps 是一個比較安全的方法來替代以前 componentWillReceiveProps.
- getSnapshotBeforeUpdate 用於更安全的讀取屬性，比如在更新之前獲取DOM。
瞭解更多關於生命週期的變更

StrictMode Component

StrictMode是一個突出顯示應用潛在問題的工具。像Fragment一樣，StrictMode不會呈現任何可見的UI。它會為子元件作額外的檢查併發出警告。

注意：
StrictMode 檢查僅僅執行在開發模式下； 它們不影響生產構建。

儘管在嚴格模式下不可能捕獲所有的問題（例如：某些型別的突變），但在它在大多數情況下還是很有用的。如果你在嚴格模式下看到警告，這些東西可能會引起非同步渲染的錯誤。

在16.3版中，StrictMode提供以下幫助：
- 識別不安全的生命週期元件
- 對使用字串ref API進行警告
- 檢測潛在副作用