Разница между состоянием и безстоянием

Я пытаюсь понять точную разницу между компонентами React stateful и stateless. Ок, компоненты без гражданства просто что-то делают, но ничего не помнят, в то время как компоненты состояния могут делать то же самое, но они помнят материал в this.state. Это теория.

Но теперь, проверяя, как показать это с помощью кода, у меня есть небольшая проблема, которая делает разницу. Я прав со следующими двумя примерами? Единственное отличие действительно в определении функции getInitialState.

Пример компонента без состояния:

var React = require('react');

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

module.exports = Header;

Пример компонента с состоянием:

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;

Ответ 1

Да, это своего рода разница. За исключением компонента stateful, вы также можете изменить состояние, используя this.setState, например:

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;

Итак, в приведенном выше примере changeImage управляет состоянием компонента (что также приведет к повторному отображению всех дочерних/зависимых компонентов).

Где-то в приложении вам нужно привязать данные или запомнить вещи. Компоненты без состояния немыслимы (и это хорошо), они не могут запомнить и не могут дать контекст другим частям пользовательского интерфейса. Компоненты stateful обеспечивают необходимый контекстный клей.

С другой стороны, компоненты без состояния просто передают контекст (обычно через 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);

В приведенном выше примере вы можете видеть, что во время render, imageSource передается как атрибут и затем добавляется к объекту без состояния.

Ответ 2

В простом определении это можно объяснить как

Если поведение компонента зависит от состояния компонента, то его можно назвать компонентом с состоянием и если поведение не зависит от его состояния, то оно может быть безстоящим компонентом.

Когда что-то "stateful", это центральная точка, которая хранит информацию в памяти о состоянии приложения/компонентов. Когда что-то "без гражданства", оно вычисляет его внутреннее состояние, но оно никогда напрямую не мутирует его.

Компоненты без состояния иногда называются немыми компонентами

Основным преимуществом безстоящего над компонентом состояния является масштабируемость и возможность повторного использования.