reactjs - reducir - diferencia entre indocumentado y apatrida

ReactJS diferencia entre estado y apátrida

Question

Estoy tratando de entender la diferencia exacta entre los componentes con estado y sin estado de React. Ok, los componentes sin estado solo hacen algo, pero no se acuerdan de nada, mientras que los componentes con estado pueden hacer lo mismo, pero recuerdan cosas dentro de este this.state . Esa es la teoría.

Pero ahora, verificando cómo mostrar esto usando el código, tengo un pequeño problema para hacer la diferencia. Estoy en lo cierto con los siguientes dos ejemplos? La única diferencia realmente es la definición de la función getInitialState .

Ejemplo de un componente sin estado:

var React = require(''react'');

var Header = React.createClass({
    render: function() {
        return(
            <img src={''mypicture.png''} />
        );
    }
});

module.exports = Header;

Ejemplo de un componente de estado:

var React = require(''react'');

var Header = React.createClass({

    getInitialState: function() {
        return {
            someVariable: "I remember something"
        };
    },

    render: function() {
        return(
            <img src={''mypicture.png''} />
        );
    }
});

module.exports = Header;

Answer 1

Componente funcional o componente sin estado

1. Componente funcional es como pura función en JavaScript.
2. Componente funcional también se llama como un componente sin estado.
3. El componente funcional solo recibe objetos del componente principal y le devuelve los elementos JSX.
4. El componente funcional no juega con ningún método de ciclo de vida de React y no juega con el estado del componente.

Componente de clase o componente de estado

1. React clase componente se llama como un componente de estado.
2. El componente de estado juega con todos los métodos de ciclo de vida de Reacción.
3. Este componente modificará el estado.

Esas son las principales diferencias.

Si tiene conocimiento acerca de la función pura en JavaScript, entonces puede entender fácilmente el componente funcional o sin estado.

Answer 2

En una definición simple puede explicarse como

Si el comportamiento de un componente depende del estado del componente, entonces puede denominarse como componente con estado y si el comportamiento es independiente de su estado, entonces puede ser un componente sin estado.

Cuando algo es "con estado", es un punto central que almacena información en la memoria sobre el estado de la aplicación / componente. Cuando algo es "sin estado", calcula su estado interno pero nunca lo muta directamente.

Los componentes sin estado a veces se denominan componentes tontos

La principal ventaja del componente sin estado sobre el estado es la escalabilidad y reutilización.

Ahora puede comprobar los componentes de ejemplo en @Davin Tryon Answer

Answer 3

Sí, esa es la diferencia. Excepto con el componente con estado , también puede cambiar el estado, utilizando this.setState por ejemplo:

var React = require(''react'');

var Header = React.createClass({

    getInitialState: function() {
        return {
            imageSource: "mypicture.png"
        };
    },

    changeImage: function() {

        this.setState({imageSource: "differentpicture.png"});
    },

    render: function() {
        return(
            <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />
        );
    }
});

module.exports = Header;

Por lo tanto, en el ejemplo anterior, changeImage administra el estado del componente (lo que también haría que todos los componentes secundarios / dependientes se vuelvan a representar).

En algún lugar de la aplicación, debe vincular datos o recordar cosas. Los componentes sin estado son tontos (y eso es bueno), no pueden recordar y no pueden dar contexto a otras partes de la interfaz de usuario. Los componentes con estado proporcionan el pegamento de contexto necesario.

Por otro lado, los componentes sin estado solo se pasan el contexto (generalmente a través de this.props :

var React = require(''react'');

var Header = React.createClass({
    render: function() {
        return(
            <img src={this.props.imageSource} />
        );
    }
});

ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);

En el ejemplo anterior, puede ver que durante el render , imageSource se pasa como un atributo y luego se agrega a los componentes sin estado de this.props objeto this.props .