react-native
Componentes

Componente basico

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)

Componente de estado

Estos componentes tendrán estados cambiantes.

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)

Componente sin estado

Como su nombre lo indica, Stateless Components no tiene ningún estado local. También son conocidos como componentes tontos . Sin ningún estado local, estos componentes no necesitan métodos de ciclo de vida o gran parte de la placa de calderas que viene con un componente de estado.

La sintaxis de clase no es obligatoria, simplemente puedes hacer const name = ({props}) => ( ... ) . En general, los componentes sin estado son más concisos como resultado.

Debajo hay un ejemplo de dos componentes sin estado, la App y el Title , con una demostración de aprobación de apoyos entre componentes:

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)

Este es el patrón recomendado para los componentes, cuando sea posible. Como en el futuro, se pueden hacer optimizaciones para estos componentes, reduciendo las asignaciones de memoria y las verificaciones innecesarias.