ReactJS有状态与无状态之间的区别

Question

我试图了解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 管理者管理 组件的状态（这也将导致所有子组件/从属组件重新呈现）。

在应用程序中的某个位置，您需要绑定数据或记住事情。无状态组件是愚蠢的（这很好），它们无法记住，也无法为UI的其他部分提供上下文。有状态的组件提供了必要的上下文
粘合 。

另一方面，无状态组件仅通过上下文传递（通常通过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对象中。