react-native
Composants

Composant de base

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)

Composant avec état

Ces composants auront des états changeants.

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)

Composant sans état

Comme leur nom l'indique, les composants sans état n'ont aucun état local. Ils sont également appelés composants Dumb . Sans aucun état local, ces composants n'ont pas besoin de méthodes de cycle de vie ou de la plupart des méthodes utilisées avec un composant avec état.

La syntaxe de classe n'est pas obligatoire, vous pouvez simplement faire const name = ({props}) => ( ... ) . En règle générale, les composants sans état sont plus concis.

Ci-dessous se trouve un exemple de deux composants sans état App et Title , avec une démonstration de passerelles entre les composants:

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)

C'est le modèle recommandé pour les composants, si possible. Comme dans le futur, des optimisations peuvent être faites pour ces composants, réduisant les allocations de mémoire et les vérifications inutiles.