ReactJS разница между stateful и stateless

Question

Я пытаюсь понять точную разницу между компонентами Stateful и Acteless от 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; 

Answer 1

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

Answer 2

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

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

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

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

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