reactjs - react - Reaccionar+Flujo: ¿deben almacenarse los datos en un estado de componente o accesorios?

jsx element div has no corresponding closing tag

Question

Si el almacén de flujo es un singleton que mantiene el estado de los datos, ¿por qué los componentes usan setState y no setProps cuando acceden a los almacenes? ¿No significa que comencé a guardar el estado de la aplicación en dos (o más) lugares?

Tanto la documentación de Flux / React como los ejemplos parecen apuntar a setState como la solución preferida, pero tuve una conversación interesante con algunos colegas en el trabajo y me pregunté si alguien más había encontrado esto.

Edición: puede ver de qué estoy hablando en esta url: https://github.com/facebook/flux/blob/master/examples/flux-chat/js/components/ThreadSection.react.js

Observe que ThreadSection es un componente secundario, que está obteniendo datos directamente de una tienda y usándolos como un estado.

Si sigue la "manera" de Reacción, habría esperado que el estado fuera administrado por la tienda, no un componente secundario.

La solución en la que pensamos es buscar todas las tiendas en el componente de nivel superior (como accesorios) y pasarlas a los componentes secundarios según sea necesario. Pero eso se pone bastante feo bastante rápido.

Lo hacemos porque setProps no funciona en componentes secundarios

Answer 1

Comprende que debes tener 2 tipos de componentes. Componentes con estado y componentes de vista.

Los componentes con estado pueden tener 3 tipos de estados: estado inicial, estado de entrada de usuario y estado de almacén de datos.

Los componentes con estado son como pequeños puntos de entrada en el "widget" que está ensamblando. Ya no hay un punto de entrada único para toda la aplicación para la dependencia de flujo descendente o la inyección de datos, porque todos estos widgets tienen sus propios ciclos de vida aislados. Es por eso que ellos mismos necesitan acceder y escuchar a las tiendas.

Además de las propiedades conductuales, los componentes con estado no reciben datos reales a través de las propiedades anteriores.

Los componentes con estado administran su propio estado y se lo pasan a sus hijos para que los procesen a través de propiedades posteriores.

Los componentes con estado normalmente no procesan directamente los elementos html DOM. Son más parecidos a los controladores en MVC, y usan otros componentes más tontos, como las vistas en MVC, para procesar elementos DOM.

Los componentes más tontos son como vistas, por lo que solo contienen lógica para representar elementos DOM. Piense en ellas como las plantillas de handlebars.js que solo reciben propiedades, y simplemente las representan en elementos DOM posiblemente con bucles, etc. Son procesadores sin estado.

Espero que esto responda a su pregunta.

Answer 2

De acuerdo con la documentación formal, una tienda debe actualizar el estado del componente principal y transmitirlo a través de los accesorios de sus hijos:

Cuando recibe el evento de la tienda, primero solicita los nuevos datos que necesita a través de los métodos de obtención públicos de las tiendas. Luego llama a sus propios métodos setState () o forceUpdate (), haciendo que su método render () y el método render () de todos sus descendientes se ejecuten.

A menudo pasamos todo el estado de la tienda a lo largo de la cadena de vistas en un solo objeto, permitiendo que diferentes descendientes utilicen lo que necesitan. Además de mantener el comportamiento similar a un controlador en la parte superior de la jerarquía, y así mantener nuestras vistas descendientes tan funcionalmente puras como sea posible, pasar el estado completo de la tienda en un solo objeto también tiene el efecto de reducir el número de accesorios. tenemos que gestionar

(Documentos de flujo de Facebook - Resumen)

Answer 3

Tiene más sentido poner los datos de la tienda en el estado del componente, esto se debe a que los accesorios pueden cambiar por un componente principal con componentWillReceiveProps . Por lo tanto, tiene sentido actualizar el state siempre que:

• evento de cambio de la tienda se dispara y
• cada vez que cambian las propiedades (los datos derivados se relacionan solo con el propio componente del estado)

A continuación se muestra un componente de muestra que actualiza la escucha de una tienda de reflujo y también sobre cambios de accesorios. Raramente uso this.props en la función de render , en lugar de eso los this.props (creo datos derivados que solo se usan dentro del propio componente) a medida que aparecen nuevos accesorios. Me encuentro constantemente en este patrón, por lo que también podría escribir esto:

var SampleComponent = React.createClass({
    mixins: [Reflux.ListenerMixin],

    // reusable helper function to build state object
    buildStateFromProps: function(props) {
        return {
            actualHeight: props.height + 20
        }
    },

    // default props if no such was set by a parent component
    getDefaultProps: function() {
        return {
            height: 100
        };
    },

    // initial state with all value set to something default
    // even using buildStateFromProps with default props
    getInitialState: function() {
        // this.props is built before this.state
        var state = buildStateFromProps(this.props);
        // append default data from store
        state.text = '''';
    },

    // happens when the parent component send different 
    // props data
    componentWillReceiveProps: function(nextProps) {
        // building derivative data from new props
        // reusing buildStateFromProps
        this.setState(buildStateFromProps(nextProps));
    },

    // setting up store to be used by the component
    componentDidMount: function() {
        // this.listenTo is a helper function ListenerMixin
        this.listenTo(sampleStore, sampleUpdated);
    },

    // is called from the sampleStore update
    sampleUpdated: function(sampleData) {
        this.setState({
            text: sampleData.text
        });
    },

    render: function() {
        return (
            // ... 
            // using this.state.text from store updates and
            // this.state.height from prop updates
        );
    }
});

La razón por la que envío datos de propiedades al estado es para evitar saturar la función de renderizado. De lo contrario, la función de representación contendrá una gran cantidad de código que no está realmente relacionado con la "representación" del componente. Además, si estos datos derivados se utilizan en otras partes de la aplicación, es fácil extraerlos del componente y colocarlos en la tienda.

Espero que esto ayude.

Answer 4

Una respuesta válida a esta pregunta se encuentra oculta en los comentarios a una respuesta anterior:

@idolize también puede pasar tiendas usando contextos React (una característica oculta, que aún no está documentada oficialmente). Es realmente bueno porque no tienes que hacer todo lo que pasa a través de la jerarquía. Hay algunos artículos sobre contextos, ¡búscalos en línea! - Andy el 17 de julio de 15 a las 18:41.