react-native
コンポーネント

基本コンポーネント

import React, { Component } from 'react'
import { View, Text, AppRegistry } from 'react-native'

class Example extends Component {
  render () {
    return (
      <View> 
        <Text> I'm a basic Component </Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

ステートフルコンポーネント

これらのコンポーネントの状態は変化します。

import React, { Component } from 'react'
import { View, Text, AppRegistry } from 'react-native'

class Example extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: "Sriraman"
    }  
  }
  render () {
    return (
      <View>
        <Text> Hi, {this.state.name}</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

ステートレスコンポーネント

名前が示すように、ステートレスコンポーネントにはローカルステートはありません。 Dumb Componentsとも呼ばれます 。ローカルな状態がなければ、これらのコンポーネントはライフサイクルメソッドや、ステートフルコンポーネントに付属する定型文の多くを必要としません。

クラス構文は必須ではありませんが、単純にconst name = ({props}) => ( ... )ます。一般に、ステートレスコンポーネントは結果としてより簡潔です。

下には、2つのステートレスコンポーネントAppとTitle例があり、コンポーネント間に小道具を渡すデモンストレーションがあります。

import React from 'react'
import { View, Text, AppRegistry } from 'react-native'

const Title = ({Message}) => (
  <Text>{Message}</Text>
)    

const App = () => (
  <View>
    <Title title='Example Stateless Component' />
  </View>
)

AppRegistry.registerComponent('App', () => App)

可能であれば、これはコンポーネントの推奨パターンです。将来、これらのコンポーネントの最適化を行うことができ、メモリ割り当てや不要なチェックを減らすことができます。