リアクト16 ハイライト

reactはついにv16が正式にリリースされました。実際、公式ブログの紹介は非常に充実しています（しかも見やすい）。この記事はメモとまとめとして、一部の詳細を簡潔にまとめました。

1. componentDidPatch(error, info)

react16の最も注目すべき部分は、ErrorBoundaryの機能が追加されたことで、ライフサイクル中のエラーがコンポーネント全体に影響を与えないように保証することです。以前は、レンダリング中にエラーが発生すると、コンポーネント全体が消えてしまいました。

Errorはライフサイクルメソッドが呼び出されるときにのみcomponentDidPatchに渡されます。そのため、constructorなどでエラーをスローしても、componentDidCatchにはキャッチされません。

componentDidCatchには2つの引数、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を設定したりして、子要素のエラーを一括で処理することもできます。

2. Text-Onlyコンポーネント

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

const Text = ({ text }) => {
  return "純粋な文字列！"
}
class App extends Component {
  render() {
    return (
      <div>
        <Text /> // <span>純粋な文字列</span>ではなく、'純粋な文字列'をレンダリングします
      </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() {
    ;<div>
      <h2>Main header</h2>
      {ReactDOM.createPortal(<Sidebar />, document.querySelector("#app2"))}
    </div>
  }
}

App内では、ReactDOM.createPortal()を使うことで、コールバックや直接DOMを操作する必要がなくなります。また、Children以外のノードに対して操作することもでき、モーダルなどのオーバーレイが必要なコンポーネントの作成に便利です。（オーバーレイは通常、ルートノードに配置する方が扱いやすいです）

4. カスタム属性

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

5. 更新の抑制

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の主な変更点です。公式ブログにはより詳細な情報があります。

カランのブログ