リアクト16 ハイライト

react はついに正式に v16 をリリースしました。実際に公式ブログの紹介は非常に充実しており（しかも見た目も美しいです）、本記事はその内容を簡潔にまとめたノートとなります。

1. componentDidCatch(error, info)

react16 の最も注目すべき点は、ErrorBoundary 機能の追加です。これにより、ライフサイクル中のエラーがコンポーネント全体に影響を及ぼさないようにします。以前は、render 中にエラーが発生すると、コンポーネント全体が消えてしまうことがありました。

Errors がライフサイクルメソッド内で呼び出された時のみ componentDidCatch に渡されます。そのため、constructor などの場所でエラーを throw しても、componentDidCatch でキャッチされることはありません。

componentDidCatch には、二つのパラメータ error と info が渡されます。ここでエラーを処理したり、フォールバック UI を表示したり、第三者サービスにエラーを記録したりすることができます。

class Post extends Component {
  constructor() {
    throw new Error("oops") // componentDidCatch には渡されない
  }

  componentWillMount() {
    this.setState(state => {
      throw new Error("oops")
      return {}
    })
  }
}
class App extends Component {
  constructor() {
    super(props)
    this.state = {
      post: { content: "" },
    }
  }

  updatePost = () => {
    this.setState(state => ({ ...state, post: null }))
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
    Logger.warn(error, info)
  }

  render() {
    return (
      <div>
        <Post post={this.state.post} />
      </div>
    )
  }
}

上記の例に加えて、higher order component のテクニックを使って componentDidCatch をラップしたり、ErrorBoundary などのコンポーネントを設定して、children のエラーを一括で処理することも可能です。

2. Text-Only component

不必要な span や react-text ノードを削除し、文字列を直接返すことができるようになりました。

const Text = ({ text }) => {
  return "pure string!"
}
class App extends Component {
  render() {
    return (
      <div>
        <Text /> // <span>pure string</span> ではなく 'pure string' をレンダリング
      </div>
    )
  }
}

*3. ReactDOM.createPortal(component, dom)

createPortal は私が非常に好きな新機能の一つです。これにより、Component Tree 内で別の DOM にレンダリングすることができ、Children から完全に独立しても問題ありません。例えば、以下のような構造です。

<div id="app1"></div>
<div id="app2"></div>

class App extends Component {
  constructor() {}

  render() {
    return (
      <div>
        <h2>Main header</h2>
        {ReactDOM.createPortal(<Sidebar />, document.querySelector("#app2"))}
      </div>
    )
  }
}

App 内では ReactDOM.createPortal() を使用することで、可読性が向上し（コールバックや直接 DOM を操作する必要がなくなる）、Children 以外のノードを操作できるようになります。モーダルのようにオーバーレイが必要なコンポーネントを書く際に非常に便利です。（オーバーレイはルートノード上で処理する方が良いです）

4. Custom Attributes

render() {
  return (
  	<div ui-prefix-scroller='foo'>
    </div>
  )
};

5. prevent update

setState で null を返すことで、更新がトリガーされなくなります（以前のバージョンではトリガーされていました）。今後、コンポーネントの更新を避けたい場合は、null を渡すことで解決できます。

6. SSR の支援

詳細は What's new with serverside rendering in react16 を参照してください。特筆すべきは、react16 で SSR がストリームをサポートし始めたことです。renderToNodeStream(Component) はストリームを返します。

また、記事の著者が述べている通り：

どうか、React SSR を本番環境で使用する際は、必ず NODE_ENV を production に設定してください！

結論

以上が React 16 の主な変更点です。公式ブログにはさらに詳しい情報が掲載されています。