LoginSignup
7

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-05-25

前提知識

本題

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} />
  }
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7