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

React v16.6でReact.memoとReact.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 ToolsのHighlight Updateを有効にするとComponentのupdateの具合を比較できます。

参考ページ

React v16.6.0: lazy, memo and contextType

Comments