JavaScript
React
PureComponent

PureComponent にインラインのアロー関数を渡してもいい場合

More than 1 year has passed since last update.


前提知識


本題

PureComponent にインラインのアロー関数を渡してもいい場合がある。これだ。

class MyContainerComponent extends Component {

render() {
return <MyPureComponent ref={(ref) => (this.myPureElement = ref)} />
}
}

こんな例,至るところで見るのでずっと疑問だったけど,冷静に考えてみて今日気づいた。

ref は prop じゃない。

どうやらこいつ, key に並ぶ特殊属性らしい。

つまり props オブジェクトの中に入らなければ shallowEquals の比較に何も影響は出ないので,堂々とアロー関数書いちゃってOKなのである。

今までこんな無駄なコードを書いていた・・・↓

class MyContainerComponent extends Component {

assignMyPureElement = (ref) => (this.myPureElement = ref)

render() {
return <MyPureComponent ref={this.assignMyPureElement} />
}
}