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的其他部分提供上下文。有状态组件提供必要的上下文 glue 。

另一方面，无状态组件只能通过上下文（通常通过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

在一个简单的定义中，它可以解释为

如果组件的行为依赖于组件的状态，那么它可以被称为有状态组件，如果行为独立于其状态，那么它可以是无状态组件。

当某些东西是“有状态的”时，它是一个中心点，它将关于应用程序/组件状态的信息存储在内存中。当某些东西是“无国籍的”时，它会计算出它的内部状态，但它永远不会直接改变它。

无状态组件有时被称为哑组件

无状态有状态组件的主要优点是可伸缩性和可重用性。

现在您可以在@Davin Tryon Answer

中查看示例组件

Answer 3

功能组件或无状态组件

功能组件就像JavaScript中的纯函数一样。

功能组件也称为无状态组件。

功能组件仅从父组件接收道具，并返回JSX元素。

功能组件不能与React的任何生命周期方法一起使用，也不能与组件状态一起使用。

类组件或全状态组件

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

那是主要区别

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

Answer 4

<块引用>

状态已满

有状态的组件可以使用 React 的所有生命周期方法。
此组件将修改状态。
我们可以访问状态完整组件中的所有方法

状态更少

无状态组件仅从父组件接收 props 并返回 JSX 元素。
无状态组件不使用 React 的任何生命周期方法，也不使用组件状态。

export default function example(props) {
         return (
            {props.person.firstName}
         )
}

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

4 个答案: