0

これらのクラスは両方とも同じことを行いますが、ClassA は関数を宣言するたびに実行する必要があるバインディングのために冗長に見え、ClassB は関数作成のタイプが異なるため ClassA ほどきれいではないように見えます。

class ClassA extends React.Component {
    constructor() {
        super();
        this.state = { message: "bar" };
        this.foo = this.foo.bind();
    }
    foo() {
        console.log(this.state.message);
    }
    render() {
        return <SomeComponent foo={this.foo} />;
    }
}

class ClassB extends React.Component {
    constructor() {
        super();
        this.state = { message: "bar" };
    }
    foo = () => {
        console.log(this.state.message);
    }
    render() {
        return <SomeComponent foo={this.foo} />;
    }
}

ClassB での関数作成の違いを取り除くには、おそらく、すべてが式であるこのようなことを行うことができます。

class ClassC extends React.Component {

    state = { message: "bar" }

    foo = () => {
        console.log(this.state.message);
    }
    render = () => {
        return <SomeComponent foo={this.foo} />;
    }
}

この場合、関数宣言と式の間の長所と短所は何ですか? パフォーマンス、メモリ、または保守性の違いはありますか?

編集: 今日の標準的なテクノロジでは、パフォーマンスの違いはあまり目立たないと思います。この質問から私が本当に望んでいるのは、クラス (特に React コンポーネント) の関数を作成するためのベスト プラクティスは何かということだと思います。

4

0 に答える 0