Componentes funcionales frente a componentes de clase en React Native

En React Native, hay dos tipos principales de componentes que componen una aplicación: componentes funcionales y componentes de clase . Estos están estructurados de la misma manera que lo estarían en una aplicación React normal para la web.

Componentes de clase

Los componentes de clase son clases de JavaScript ES2015 que extienden una clase base de React llamada Component.

class App extends Component { render () { return ( Hello World! ) } }

Esto le da a la clase Appacceso a los métodos del ciclo de vida de React render, así como a la funcionalidad de estado / accesorios del padre.

Componentes funcionales

Los componentes funcionales son más simples. No administran su propio estado ni tienen acceso a los métodos de ciclo de vida proporcionados por React Native. Son, literalmente, simples funciones de JavaScript antiguas y, a veces, se denominan componentes sin estado.

const PageOne = () => { return ( 

Page One

); }

Resumen

Los componentes de clase se utilizan como componentes de contenedor para manejar la administración del estado y envolver los componentes secundarios.

Los componentes funcionales generalmente solo se utilizan con fines de visualización; estos componentes llaman a funciones de los componentes principales para manejar las interacciones del usuario o las actualizaciones de estado.

Más información sobre el estado del componente

Estado del componente

En los Classcomponentes, hay una forma de almacenar y administrar el estado integrado en React Native.

class App extends Component { constructor () { super(); this.state = { counter: 0 }; } incrementCount () { this.setState({ counter: this.state.counter + 1 }); } decrementCount () { this.setState({ counter: this.state.counter - 1 }); } render () { return (  Count: {this.state.counter} - +  ); } }

El estado es similar a los accesorios, pero es privado y está totalmente controlado por el componente. Aquí, el constructor()método llama al constructor de la clase principal con super();- Componentes la clase principal de Appporque estamos usando la extendspalabra clave. El constructor()método también inicializa el objeto de estado del componente:

this.state = { counter: 0 };

El estado se puede mostrar dentro del componente:

{this.state.counter}

O actualizado llamando a:

this.setState({});

Nota: Aparte de su creación inicial en elconstructor()método desu componente, nunca debe modificar directamente el estado del componente conthis.state =. Debe utilizarthis.setStatecomo se puede ver en lasfuncionesincrementCountydecrementCountanteriores.

El recuento aumenta y disminuye llamando a las funciones que se pasan a los onPresscontroladores tal como lo harían si llamaras a un controlador de clics desde JavaScript en la web.

ASIDE: En el primer ejemplo, es un componente personalizado; es una combinación de y de la API React Native:

const Button = ({ onPress, children, buttonProps, textProps }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); };

Más información sobre React Native:

  • Reaccionar guía nativa