ReactJS - Panoramica degli oggetti di scena

La principale differenza tra stato e oggetti di scena è questa propssono immutabili. Questo è il motivo per cui il componente contenitore dovrebbe definire lo stato che può essere aggiornato e modificato, mentre i componenti figlio dovrebbero solo passare i dati dallo stato utilizzando props.

Utilizzo di oggetti di scena

Quando abbiamo bisogno di dati immutabili nel nostro componente, possiamo semplicemente aggiungere oggetti di scena a reactDOM.render() funzione in main.js e usalo all'interno del nostro componente.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App headerProp = "Header from props..." contentProp = "Content
   from props..."/>, document.getElementById('app'));

export default App;

Questo produrrà il seguente risultato.

Puntelli predefiniti

È inoltre possibile impostare i valori delle proprietà predefinite direttamente nel costruttore del componente invece di aggiungerlo al file reactDom.render() elemento.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
App.defaultProps = {
   headerProp: "Header from props...",
   contentProp:"Content from props..."
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

L'output è lo stesso di prima.

Stato e oggetti di scena

L'esempio seguente mostra come combinare statee oggetti di scena nella tua app. Stiamo impostando lo stato nel nostro componente genitore e passandolo all'albero dei componenti usandoprops. Dentro ilrender funzione, stiamo impostando headerProp e contentProp utilizzato nei componenti figlio.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         header: "Header from props...",
         content: "Content from props..."
      }
   }
   render() {
      return (
         <div>
            <Header headerProp = {this.state.header}/>
            <Content contentProp = {this.state.content}/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>{this.props.headerProp}</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>{this.props.contentProp}</h2>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Il risultato sarà di nuovo lo stesso dei due esempi precedenti, l'unica cosa diversa è la fonte dei nostri dati, che ora proviene originariamente dal state. Quando vogliamo aggiornarlo, dobbiamo solo aggiornare lo stato e tutti i componenti figlio verranno aggiornati. Maggiori informazioni su questo nel capitolo Eventi.