React.memo

Change logs

Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate.
Now you can do the same with function components by wrapping them in React.memo.

クラスコンポーネントは、入力プロンプトがPureComponentまたはshouldComponentUpdateを使用して同じ場合、レンダリングから救済することができます。
関数コンポーネントをReact.memoでラップすることで同じことができます。

わからん

React.memo

わかんねぇよ・・・

React 16.6の新機能

関数コンポーネントをクラスコンポーネントにできるってことか。

React.lazy

Change logs

You may have seen Dan’s talk about React Suspense at JSConf Iceland. 
Now you can use the Suspense component to do code-splitting by wrapping a dynamic import in a call to React.lazy().

あなたはDan’s talk about React Suspense at JSConf Icelandを見たかもしれません。
Suspence componentを使用して、React.lazy（）の呼び出しで動的インポートをラップすることで、コード分割を行うことができます。

わからん

React.lazy

他のjsファイルのcomponentを使う際に、importではなく、クラス化で使えるようにするってことか。

lazy.js

import OtherComponent from './OtherComponent'
//変更前

const OtherComponent = React.lazy(() => import('./OtherComponent'));
//変更後

This will automatically load the bundle containing the OtherComponent when this component gets rendered.

このコンポーネントがレンダリングされると、OtherComponentを含むバンドルが自動的にロードされます。


React.lazy takes a function that must call a dynamic import(). 
This must return a Promise which resolves to a module with a default export containing a React component.

これは、Reactコンポーネントを含むdefaultエクスポートを持つモジュールに解決するPromiseを返す必要があります。

React 16.6の新機能

返り値はPromiseを指定する。defaultからコンポーネントを取れるオブジェクトを返すから。

実際のコードはここを参照
React 16.6で追加されたReact.Suspenseについて