shouldComponentUpdate

Reactコンポーネント自身が、更新の必要があるかどうかを自己判断する為の関数

renderメソッドが呼ばれるかどうかを決める

指定しないと、デフォルトで毎回renderする

毎回renderしても、VirtualDOMで差分を見て、差が無かったら実DOMは更新されない

つまりrenderの中の処理が重い場合にだけ設定すれば良い

shouldComponentUpdate(nextProps, nextState)

this.stateやthis.propsと比較する

trueを返せばrenderし、falseを返せばrenderしないという関数を自分で書く

簡単な実装例

props, stateが両方共単純なstringやnumberの場合は、これでいい

code:js

import deepEqual from 'deep-equal'

shouldComponentUpdate (nextProps, nextState) {

if (!deepEqual(nextProps, this.props)) return true

if (!deepEqual(nextState, this.state)) return true

return false

}

注意：props.childrenにはReactのnodeが渡る事がある

nodeには循環参照がある場合がある

deep-equal系のnpmに循環参照を渡すとRangeError: Maximum call stack size exceededが起こる

Scrapboxの場合

エディタの中の行が独自記法をparseしたり

IME切った状態でのキーボード押しっぱなしで、文字がなめらかに表示されてほしい

等、UIレスポンスは大事だが、重くなりそうな処理がある

1000行とかある巨大なページで重くならないように設定している

Fluxアーキテクチャの事やVirtualDOMが十分速い事も考えるとshokai.icon

最初は素直に作る

renderメソッドが重いコンポーネントがある場合

それからshouldComponentUpdateを付けてみると良いと思う