React 16の重要ポイントまとめ

Reactがついに正式にv16をリリースした。実際のところ公式ブログの紹介はすでに非常に充実している（しかも見やすくて素晴らしい）。本記事はメモとまとめとして、一部の詳細を簡潔に整理したものだ。

1. componentDidPatch(error, info)

React 16で最も目玉となる部分であり、ErrorBoundaryの機能が追加され、ライフサイクル時のエラーがコンポーネント全体に波及しないよう保証してくれる。以前はrender時にエラーが発生すると、コンポーネント全体が消えてしまっていた。

Errorがライフサイクルメソッド内で呼び出された場合のみcomponentDidPatchに渡されるため、constructorなどの場所でErrorをthrowしてもcomponentDidCatchによってcatchされることはない。

componentDidCatchには2つの引数、errorとinfoが渡される。componentDidCatch内でエラーを処理し、フォールバック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（HOC）のテクニックを使ってcomponentDidCatchをラップしたり、ErrorBoundaryなどのコンポーネントを用意してchildrenのエラーを一括で処理したりすることもできる。

2. Text-Only component

不要なspanやreact-textノードが削除され、直接文字列を返せるようになった。

const Text = ({ text }) => {
  return "pure string!"
}
class App extends Component {
  render() {
    return (
      <div>
        <Text /> // render 'pure string', rather than <span>pure string</span>
      </div>
    )
  }
}

*3. ReactDOM.createPortal(component, dom)

createPortalも僕がかなり気に入っている新機能の一つだ。コンポーネントツリーの中から別のDOM上にレンダリングすることができ、Childrenから完全に切り離されていても問題ない。例えば以下のような構造だ。

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

class App extends Component {
  constructor() {}

  render() {
    ;<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 を参照してほしいが、特筆すべき点としてReact 16のSSRはストリームをサポートし始め、renderToNodeStream(Component) がストリームを返すようになった。

そして、記事の著者が言及している以下の点も重要だ：

please, please, please make sure you always set NODE_ENV to production when using React SSR in production!

結論

以上がReact 16の主な変更点だ。公式ブログにはさらに詳しい紹介が載っている。