ReactJS état vs prop

Votre deuxième approche est plus comme ça. Réagir ne se soucie pas des modèles tellement qu'il se soucie de valeurs et comment ils coulent à travers votre application. Idéalement, votre modèle post devraient être stockées dans un seul composant à la racine. Ensuite, vous créez des composants enfants que chaque consommer des parties du modèle.

Vous pouvez passer des rappels aux enfants qui ont besoin de modifier vos données, et de les appeler à partir de l'enfant du composant.

De modifier cette.d'accessoires ou de cette.l'état directement n'est pas une bonne idée, parce que Réagir ne sera pas en mesure de revenir sur les modifications. C'est parce que de Réagir n'est un peu de la comparaison de votre post prop afin de déterminer si elle a changé.

J'ai fait ce jsfiddle pour montrer la façon dont les données pourraient découler de l'extérieur vers l'intérieur de la composante:

http://jsfiddle.net/jxg/M3CLB/

La handleClick méthode montre 3 façons de (im)correctement mise à jour de l'état:

var Outer = React.createClass({

  getInitialState: function() {
    return {data: {value: 'at first, it works'}};
  },

  handleClick: function () {

    //1. This doesn't work, render is not triggered.
    //Never set state directly because the updated values
    //can still be read, which can lead to unexpected behavior.

    this.state.data.value = 'but React will never know!';

    //2. This works, because we use setState

    var newData = {value: 'it works 2'};
    this.setState({data: newData});

    //3. Alternatively you can use React's immutability helpers
    //to update more complex models.
    //Read more: http://facebook.github.io/react/docs/update.html

    var newState = React.addons.update(this.state, {
      data: {value: {$set: 'it works'}}
    });
    this.setState(newState);
 },

  render: function() {
      return <Inner data={this.state.data} handleClick={this.handleClick} />;
  }
});

De Réagir doc

accessoires sont immuables: ils sont passés de la société mère et sont la "propriété" par le parent. Pour mettre en œuvre les interactions, nous introduisons mutable état du composant. c'.l'etat est privé de la composante, et peut être modifié par l'appel de cette.setState(). Lorsque l'état est mis à jour, le composant re-donne de lui-même.

De TrySpace: lorsque des accessoires (ou l'état) sont mises à jour (via setProps/setState ou parent) le composant re-rend ainsi.

Je ne sais pas si je vais répondre à votre question, mais j'ai trouvé que, surtout dans une grande/application grandissante, le Conteneur ou la répétition de Composant fonctionne incroyablement bien.

Essentiellement, vous avez deux Réagissent composants:

• un "pur" de l'affichage, qui traite avec style et DOM interaction;
• un composant conteneur, qui traite de l'accès/sauvegarde de données externes, la gestion de l'état, et le rendu du composant d'affichage.

Exemple

N. B. Cet exemple est sans doute trop simple pour illustrer les avantages de ce modèle, car il est assez détaillé pour une simple affaire.

/**
 * Container Component
 *
 *  - Manages component state
 *  - Does plumbing of data fetching/saving
 */

var PostEditorContainer = React.createClass({
  getInitialState: function() {
    return {
      text: ""
    };
  },

  componentWillMount: function() {
    this.setState({
      text: getPostText()
    });
  },

  updateText: function(text) {
    this.setState({
      text: text
    });
  },

  savePost: function() {
    savePostText(this.state.text);
  },

  render: function() {
    return (
      <PostEditor
        text={this.state.text}
        onChange={this.updateText.bind(this)}
        onSave={this.savePost.bind(this)}
      />
    );
  }
});


/**
 * Pure Display Component
 *
 *  - Calculates styling based on passed properties
 *  - Often just a render method
 *  - Uses methods passed in from container to announce changes
 */

var PostEditor = React.createClass({
  render: function() {
    return (
      <div>
        <input type="text" value={this.props.text} onChange={this.props.onChange} />
        <button type="button" onClick={this.props.onSave} />
      </div>
    );
  }
});

Avantages

En gardant une logique d'affichage et de données/gestion de l'état séparé, vous avez une ré-utilisable composantes de l'écran qui:

• peut facilement être itéré avec différents ensembles d'accessoires à l'aide de quelque chose comme réagir-composant-aire de jeu
• peut être enveloppé avec un autre conteneur pour les différents comportements (ou les combiner avec d'autres composants pour construire de plus grandes parties de votre application

Vous avez également un composant conteneur qui traite l'ensemble de la communication externe. Cela devrait rendre plus facile d'être flexible sur la façon dont vous accédez à vos données si vous faites de gros changements plus tard*.

Ce modèle fait également l'écriture et la mise en œuvre de tests unitaires beaucoup plus simple.

Avoir répété un grand Réagir application à quelques reprises, j'ai trouvé que ce modèle conserve des choses relativement indolore, surtout quand vous avez de grands composants calculé les styles ou les complexes interactions DOM.

*Lire sur le modèle de flux, et de prendre un coup d'oeil à Marty.js, qui a largement inspiré cette réponse (et j'utilise beaucoup ces derniers temps) Redux (et réagir-redux), qui mettent en œuvre ce modèle extrêmement bien.

Note pour ceux qui nous lisent en 2018 ou plus tard:

Réagir a évolué un peu depuis cette réponse a été écrit, en particulier avec l'introduction de Crochets. Toutefois, le sous-jacentes de la gestion de l'état logique à partir de cet exemple reste le même, et plus important encore, les avantages que vous obtenez de garder votre état et de la présentation de la logique de séparer encore s'appliquer de la même façon.