React Native - Puntelli

Nel nostro ultimo capitolo vi abbiamo mostrato come usare mutable state. In questo capitolo, ti mostreremo come combinare lo stato e il fileprops.

I componenti di presentazione dovrebbero ottenere tutti i dati passando props. Solo i componenti del contenitore dovrebbero averestate.

Componente contenitore

Ora capiremo cos'è un componente contenitore e anche come funziona.

Teoria

Ora aggiorneremo il nostro componente contenitore. Questo componente gestirà lo stato e passerà gli oggetti di scena alla componente di presentazione.

Il componente contenitore viene utilizzato solo per la gestione dello stato. Tutte le funzionalità relative alla visualizzazione (stile, ecc.) Verranno gestite nella componente di presentazione.

Esempio

Se vogliamo usare l'esempio dell'ultimo capitolo dobbiamo rimuovere il file Textelemento dalla funzione di rendering poiché questo elemento viene utilizzato per presentare il testo agli utenti. Questo dovrebbe essere all'interno della componente di presentazione.

Rivediamo il codice nell'esempio riportato di seguito. Importeremo il filePresentationalComponent e passalo alla funzione render.

Dopo aver importato il file PresentationalComponente passalo alla funzione render, dobbiamo passare gli oggetti di scena. Passeremo gli oggetti di scena aggiungendomyText = {this.state.myText} e deleteText = {this.deleteText} per <PresentationalComponent>. Ora, saremo in grado di accedervi all'interno della componente presentazionale.

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

Componente presentazionale

Ora capiremo cos'è una componente di presentazione e anche come funziona.

Teoria

I componenti di presentazione dovrebbero essere usati solo per presentare la vista agli utenti. Questi componenti non hanno stato. Ricevono tutti i dati e le funzioni come oggetti di scena.

La migliore pratica è utilizzare il maggior numero possibile di componenti di presentazione.

Esempio

Come accennato nel capitolo precedente, stiamo usando la sintassi della funzione EC6 per i componenti di presentazione.

Il nostro componente riceverà oggetti di scena, restituirà elementi di visualizzazione, presenterà il testo usando {props.myText} e chiama il {props.deleteText} funzione quando un utente fa clic sul testo.

PresentationalComponent.js

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

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

Ora abbiamo la stessa funzionalità del nostro Statecapitolo. L'unica differenza è che abbiamo riformattato il nostro codice nel contenitore e nel componente di presentazione.

Puoi eseguire l'app e vedere il testo come nello screenshot seguente.

Se fai clic sul testo, verrà rimosso dallo schermo.