閉鎖時のクラスまたは関数のメソッドの使用

Question

単純な反復コンポーネントをいくつかのメソッド（状態またはライフサイクルメソッドなし）で作成したいとします。

// Foo.js 
class Foo extends React.Component { 
    doSomething() { 
    // do something 
    } 

    render() { 
    ... 
    this.doSomething(); 
    ... 
    } 
} 
export default Foo; 

または私はこのようにそれを行うことができます：

// Foo.js 
const doSomething =() => { 
    // do something... 
} 

const Foo =() => { 
    ... 
    doSomething(); 
    ... 
} 
export default Foo; 

第二は、それが機能性成分（単純、少ないオーバーヘッド）だから好ましいが、ありません、私はそれを2つの方法のいずれかを実行することができます閉鎖関数にはメモリリークのオーバーヘッド/リスクが伴いますか？

一般に、コンポーネントが状態を保持していないかライフサイクルメソッドを使用していない場合（これはコンポーネントを実装する好ましい方法です）

Answer 1

、あなたの場合：

• は、ライフサイクルメソッド（のようなcomponentDidMount）を使用する必要はありませんstate
• を維持したくない

それはステートレスな機能コンポーネントを使用することをお勧めします、速くて読みやすくなっています。そして、いいえ、あなたは閉鎖によるメモリリークについて心配する必要はありません。ステートレスコンポーネントのさらなる利点については、https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

Answer 2

単純にアプリケーションの状態やライフサイクルメソッドを追跡していない場合は、オーバーヘッドが大きく、thisキーワードを追跡する必要がない場合は、クラスベースのコンポーネントを使用する必要はありませんそれは率直に言って、迷惑です。

機能コンポーネントはダムです。アプリケーションの状態はまったく分かりません。イベントが発生したときに更新を心配することなく、コンポーネントの表示/表示に使用できます。

doSomething()メソッドに動的な動作が含まれていない場合は、2番目の方法を使用することをお勧めします。一般