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

是的，这有点不同。除了 stateful 组件，您还可以更改状态，例如使用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. 功能组件只接收来自父组件的 props 并返回 JSX 元素。
4. 功能组件不使用 React 的任何生命周期方法，也不使用组件状态。

类组件或有状态组件

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

这是主要的区别

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

Answer 3

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

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

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

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

无状态组件相对于有状态组件的主要优势是可扩展性和可重用性。

现在您可以查看@Davin Tryon Answer 中的示例组件

Answer 4

状态已满

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

状态较少

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

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