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对象.

Answer 2

功能组件或无状态组件

1. 功能组件就像JavaScript中的纯函数一样。
2. 功能组件也称为无状态组件。
3. 功能组件仅从父组件接收道具，并返回JSX元素。
4. 功能组件不能与React的任何生命周期方法一起使用，也不能与组件状态一起使用。

类组件或全状态组件

1. React类组件被称为有状态组件。
2. 状态组件与React的所有生命周期方法一起使用。
3. 该组件将修改状态。

那是最大的不同

如果您了解JavaScript中的纯函数，则可以轻松理解函数或无状态组件。