React（ネイティブ）のコンポーネントをなぜ延長するべきですか？

Question

私はこの反応の生態系ではかなり新しいですが、それはコンポーネントであり、どのように使用して作成するものに、これまでかなり明確だ：私はちょうど

を使用するいくつかの例を見てきましたが

export default class NotificationsScreen extends Component { 
    render() { 
     return(<View></View>); 
    } 
} 

を

const MySmallComponent = (props) => <View></View> 

そして、アプリは同じように正常に動作するようです。..

Componentを拡張することの利点は何ですか？

Answer 1

Reactは関数型プログラミングと強く結びついているので、Reactで純関数を書くのは常に良い習慣です。あなたのコンポーネントが状態を管理したり、ライフサイクルメソッドが関与する必要がない場合、ステートレスなコンポーネントを使用します。それはちょうどそのよう

ませんextendsを読みやすく、書くことが

より簡単、より自然な感じ

1. を、状態ライフサイクルメソッドはより速いコードを意味します

this articleでさらに多くの理由が見つかります。したがって、私が言いたいのは、状態を管理する必要がない場合は、常にステートレスコンポーネントを使用することです。

Answer 2

Dan Abramovは、SmartコンポーネントとDumbコンポーネントを作成しました。その後、コンテナとプレゼンテーションのコンポーネントと呼ばれました。だから、

export default class NotificationsScreen extends Component { 
    render() { 
     return(<View></View>); 
    } 
} 

は、コンテナと

const MySmallComponent = (props) => <View></View> 

が表現的要素です。

プレゼンテーションコンポーネントは、プレゼンテーション目的でのみ使用されます。つまり、独自の状態を持つことはめったにありません。親コンポーネントからプロップを受信するか、内部に子コンポーネントが多数含まれているため、UIにデータを表示するだけです。プレゼンテーションコンポーネントは、反応ライフサイクルメソッドを使用しません。

スマートコンポーネントまたはコンテナは、通常、独自の状態を持ち、ライフサイクルメソッドを使用します。また、これらのコンポーネントは通常、独自の状態を持ちます。