10

React クラスを作成する場合、どちらが望ましいですか?

export default class Foo extends React.Component {
  constructor (props) {
    super(props)
    this.doSomething = this.doSomething.bind(this)
  }

  doSomething () { ... }
}

また

export default class Foo extends React.Component {
  doSomething = () => { ... }
}

私の同僚は、babel がコードをトランスパイルしthisてクロージャー内でキャプチャするため、後者がメモリの問題を引き起こし、その参照によりインスタンスが GC によってクリーンアップされないと考えています。

これについて何か考えはありますか？

4

3 に答える 3

9

パブリック クラス フィールド構文 (so doSomething = () => {...}) はまだ ECMAScript の一部ではありませんが、順調に進んでおり、そこに到達すると確信しています。

したがって、この構文を使用するとトランスパイルが必要になりますが、次の利点があります。

  • thisバインディングを表現するための明確で簡潔な構文
  • ブラウザがいつこれをサポートするかについての将来の証拠
  • 実装には関係ありません

私にとって、これは明らかな勝利です。ほとんどの場合、そのボイラープレート呼び出しconstructor(props)からあなたを救う必要さえありません。super

Babel の実装によってメモリ リークが発生する場合、それらはすぐに検出されて修正されるはずです。より多くのコードを書かなければならないため、自分でリークを作成する可能性が高くなります。

于 2016-12-29T15:40:01.250 に答える
3

レンダー関数でバインドすると、レンダーごとに新しい関数が作成されます。これは、差分アルゴリズムが変更があると見なすことを意味します。コンストラクターでバインドすると、これは起こりません。

ここでは、矢印によるバインディングとコンストラクターでのバインディングのコンパイル済みの違いを確認できます : =class%20x%20extends%20React.Component%20%7B%0A%20%20constructor%20(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20 %20%20%0A%20%20%20%20this.onChange%20%3D%20this.onChange.bind(this)%3B%0A%20%20%7D%0A%20%20%0A%20% 20onChange%20()%20%7B%20console.log(%27change%20x%27)%3B%20%7D%0A%7D%0A%0Aclass%20y%20extends%20React.Component%20%7B%0A% 20%20onChange%20%3D%20()%20%3D%3E%20%7B%20console.log(%27change%20y%27)%3B%20%7D%0A%7D

于 2016-12-29T14:40:05.140 に答える
0

ここのリンクは、アロー関数を短いコードとして使用してイベントバインディングを実現するのではなく、「コンストラクターでメソッドをバインドする」ことが公式に安全であることを明確に強調しています。

リンクは次のとおりです: https://reactjs.org/docs/react-without-es6.html#autobinding参照用。

于 2019-11-25T10:49:57.327 に答える