Я пытаюсь понять точную разницу между компонентами React с отслеживанием состояния и без состояния. Хорошо, компоненты без состояния просто что-то делают, но ничего не запоминают, в то время как компоненты с состоянием могут делать то же самое, но они запоминают вещи внутри 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;
31
Socrates 29 Дек 2015 в 17:04

3 ответа

Лучший ответ

Да, в этом какая-то разница. За исключением компонента с отслеживанием состояния , вы также можете изменить состояние, используя 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 управляет состоянием компонента (что также может вызвать повторную визуализацию всех дочерних / зависимых компонентов).

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

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

34
Davin Tryon 29 Дек 2015 в 15:29

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

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

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

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

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

Теперь вы можете проверить примеры компонентов в ответе @Davin Tryon.

4
samuelj90 3 Май 2018 в 08:32

Функциональный компонент или компонент без состояния

  1. Функциональный компонент похож на чистую функцию в JavaScript.
  2. Функциональный компонент также называется компонентом без состояния.
  3. Функциональный компонент получает реквизиты только от родительского компонента и возвращает вам элементы JSX.
  4. Функциональный компонент не взаимодействует с методами жизненного цикла React и не влияет на состояние компонента.

Компонент класса или компонент с отслеживанием состояния

  1. Компонент класса React вызывается как компонент с отслеживанием состояния.
  2. Компонент с отслеживанием состояния работает со всеми методами жизненного цикла React.
  3. Этот компонент изменит состояние.

Это основные отличия

Если у вас есть знания о чистых функциях в JavaScript, вы легко поймете функциональные компоненты или компоненты без состояния.

8
Hemadri Dasari 17 Окт 2018 в 13:41