Reactのコードを大幅に省略できるClassFieldsの挙動をチェック

Reactのコードを大幅に省略できるClassFieldsの挙動をチェック:

はじめに

ES2019で正式採用になるであろうClassFieldsの挙動について、よく考えず使っていたので、今更ではあるが、どのような動作をするかチェックした。

なお、現時点では stage3。tc39/proposal-class-fields

tl;dl

• class fieldsはめっちゃ便利なのでどんどん利用していこう
• 自分で手を動かすと理解が深まるよね

それどういうやつ

class Sample { 
  x = 0; // public field 
  #x = 0; // private field 
 
  handleOnClick = (event) => { 
    // ... 
    this.x++; 
  } // public field 
} 

以上のように、簡単にプロパティを定義できる。

チェックのための環境

最低限の動作をするプロジェクトを作成してテストする。

コードはここに公開済み。
https://github.com/tomoyamachi/minimum-react-dom-check

各種ライブラリ

基本ツールのバージョン情報は以下の通り。

"react": "16.6.3", 
    "react-dom": "16.6.3" 
    "babel-core": "^6.26.3", 
    "webpack": "^4.28.2", 
    "webpack-dev-server": "^3.1.14", 
    "why-did-you-update": "^1.0.6" 

これにビルド時に必要なbabelのpreset/pluginを追加する。

今回は、class-properties用のpluginを入れる。

"babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-preset-env": "^1.7.0", 
    "babel-preset-react": "^6.24.1", 

利用方法

$ git clone https://github.com/tomoyamachi/minimum-react-dom-check 
$ yarn  
$ yarn start 

http://localhost:8080 を開けばOK.

不要な再レンダリングが発生していると、 why-did-you-updateが教えてくれる。

検証内容

今回は、Publicなclass fieldsの動作確認とともに、バッドプラクティスと名高い、propsにbindや無名関数を直接いれちゃだめなやつも一緒にチェックした。

なお挙動確認のため、無理矢理stateを利用するなど、冗長になっている。

constructorでbindして渡す

class ButtonWithBind extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = {type: "WithBind"} 
        this.handleClick = this.handleClick.bind(this); 
    } 
 
    handleClick(message) { 
        console.log(message, this.props.count) 
        this.props.countUp(); 
    } 
 
    render() { 
        const {type} = this.state; 
        return <Button type={type} key={type} handleClick={this.handleClick}/>; 
    } 
} 

propsで直接bindして渡す

class ButtonWithoutBind extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = {type: "WithoutBind"} 
    } 
 
    handleClick(message) { 
        console.log(message, this.props.count) 
        this.props.countUp(); 
    } 
 
    render() { 
        const {type} = this.state; 
        return <Button type={type} key={type} handleClick={this.handleClick.bind(this)}/>; 
    } 
} 

propsで即時関数として渡す

class ButtonDirectCall extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = {type: "DirectCall"} 
    } 
 
    handleClick(message) { 
        console.log(message, this.props.count) 
        this.props.countUp(); 
    } 
 
    render() { 
        const {type} = this.state; 
        return <Button type={type} key={type} handleClick={(message) => this.handleClick(message)}/>; 
    } 
} 

propsで条件式を利用して渡す

class ButtonCondition extends React.Component { 
    constructor(props) { 
        super(props); 
        this.state = {type: "Condition"} 
        this.handleClick = this.handleClick.bind(this) 
    } 
 
    handleClick(message) { 
        console.log(message, this.props.count) 
        this.props.countUp(); 
    } 
 
    render() { 
        const {type} = this.state; 
        return <Button type={type} key={type} handleClick={true && this.handleClick}/>; 
    } 
} 

Class Fieldsを利用

class ButtonClassState extends React.Component { 
    state = {type: "ClassState"} 
    handleClick = (message) => { 
        console.log(message, this.props.count) 
        this.props.countUp(); 
    } 
 
    render() { 
        const {type} = this.state; 
        return <Button type={type} key={type} handleClick={this.handleClick}/>; 
    } 
} 

Buttonコンポーネントの作成

PureComponentにしないと、全パターンでre-renderされるので注意。

class Button extends React.PureComponent { 
    state = {type: this.props.type} 
 
    render() { 
        const {type, handleClick} = this.props; 
        return ( 
            <button onClick={() => handleClick(type)}> 
                {type} 
            </button>) 
    } 
}; 

そしてボタンを押してコンソールを確認する。

propsで直接bindして渡す と propsで即時関数として渡す が意味もなく再レンダリングされているのがわかる。

知識通りの挙動ではあるが、やはり手を動かして作ると実感が湧くのでいい。

結果 : ReactでClassFieldsを利用すると...

constructorがなくなり、コードがすっきりする

一番わかり易いメリットはこれ。

特に、関数に対してbindしてプロパティに渡すをしなくてよくなるのは助かる。

stateなどがプロパティに過ぎないことが理解しやすい

本来プロパティはクラスの属性なので、constructorの中で定義すると違和感があった。それもなくなる。

たとえば、 this.func = this.func.bind(this) はプロパティに関数を代入する行為に過ぎないはずだが、それが分かりづらい。黒魔術感が強い。

JS初心者の頃、この記述の必要性がわからず、もやもやした。

まとめ

Private Class Fieldsの挙動もチェックしたけど、後日記事にしていくつもり。

Static Class Fieldsをガンガン利用していこう。