React v16.6で追加されたReact.memoとReact.lazyを眺める

React v16.6でReact.memoReact.lazyというAPIが機能が追加されていた。

該当の変更は以下を参照

React.memo

PureComponentはstateをshallow Equalによってupdateするのかを決める機能を持っているが、class Componentでしか利用できない。

React.memoはfunction componenをラップしてPureComponentと同じく、shallow Equalでコンポーネントをupdateする機能を提供するAPIである。
このあたりがそれっぽい

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import React from 'react'
import ReactDOM from 'react-dom'

type Messages = {
messages: string[]
}

type Message = {
message: string
}

const SFCComponent: React.SFC<Message> = props => <li>{props.message}</li>
// defineTtyped not support `memo`
// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/29990
const MemoComponent = (React as any).memo(SFCComponent)

const InputHistoryWithMemo: React.SFC<Messages> = (props) => {
return (
<ul>
{props.messages.map( (m, i) => {
return (
<React.Fragment>
<MemoComponent key={i} message={m} />
</React.Fragment>
)
}
)}
</ul>
)
}

class InputApp extends React.Component<{}, Messages> {
constructor(props = {}) {
super(props)
this.state = { messages: [] }
this._getLastMessage = this._getLastMessage.bind(this)
this._onMessageChange = this._onMessageChange.bind(this)
}

_getLastMessage() {
const lastMessage = this.state.messages[this.state.messages.length - 1]
return lastMessage === undefined ? "" : lastMessage
}

_onMessageChange(event: React.ChangeEvent<HTMLInputElement>) {
const messages = [...this.state.messages]
messages.push(event.target.value)
this.setState({ messages })
}

render() {
const componetnStyle = {
display: 'inline-block',
marginLeft: '30px',
}

const inputStyle = {
display: 'inline-block',
verticalAlign: 'top',
marginLeft: '30px',
top: '0'
}

return (
<div>
<div style={inputStyle} >
<input
type="text"
value={this._getLastMessage()}
onChange={this._onMessageChange}
/>
</div>

<div style={componetnStyle}>
<strong>Memo Compoennt</strong>
<br />
<InputHistoryWithMemo messages={this.state.messages} />
</div>
</div>
);
}
}

React.lazy

任意のComponentの動的なimportを可能にするAPI。
(ただし現時点ではSSRでは利用できない)
Suspenseでfallbackを定義できる。
つまり読み込みが完了してない場合にloading spinnerなどのコンテンツを配置しておくなど。

ネットワークの問題などによりComponentがうまくimportできないときを考慮して、
ErrorBoundyでFallbackしておくことで、ユーザーにエラー通知UIも提供することができる。

以下のような感じ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import React from 'react'
import ReactDOM from 'react-dom'
// https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
import ErrorboundyComponent from './ErrorboundyComponent'

// defineTyped not support `lazy`
// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/30110
const OtherComponent = (React as any).lazy(() => import('./OtherComponent'));
const AnotherComponent = (React as any).lazy(() => import('./AnotherComponent'));

// defineTyped not support `Suspense`
const Suspense = (React as any).Suspense


const LazyComponent: React.SFC = _ => {
return (
// ErrorBoundy でエラーの追跡とFallback UIを提供
<ErrorboundyComponent>
{/* 複数のlazyコンポーネントを Suspense で束ねることができる */}
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent message="Hello" />
<AnotherComponent message="Hola" />
</Suspense>
</ErrorboundyComponent>
)
}

デモコード

memo-lazy

React.memoに関しては、Component, PureCompoent, memoと比較できるようにして、
React Developer ToolsHighlight Updateを有効にするとComponentのupdateの具合を比較できます。

参考ページ

React v16.6.0: lazy, memo and contextType

Comments