shouldComponentUpdate
Reactコンポーネント自身が、更新の必要があるかどうかを自己判断する為の関数
renderメソッドが呼ばれるかどうかを決める
指定しないと、デフォルトで毎回renderする
毎回renderしても、VirtualDOMで差分を見て、差が無かったら実DOMは更新されない
つまりrenderの中の処理が重い場合にだけ設定すれば良い
> shouldComponentUpdate(nextProps, nextState) this.state や this.props と比較する true を返せばrenderし、 false を返せばrenderしないという関数を自分で書く簡単な実装例
props, stateが両方共単純なstringやnumberの場合は、これでいい
jsimport 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が十分速い事も考えると
最初は素直に作る
renderメソッドが重いコンポーネントがある場合
React Developer Tools等で計測して
それからshouldComponentUpdateを付けてみると良いと思う