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 组件，您还可以 change 状态，使用 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 管理组件的状态（这也会导致所有 child/dependent 组件成为 re-rendered).

在应用程序的某处，您需要绑定数据或记住一些东西。无状态组件是愚蠢的（这很好），它们无法记住并且无法为 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

简单的定义可以解释为

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

当某物是“有状态的”时，它是在内存中存储有关 app/component 状态信息的中心点。当某物是“无状态的”时，它会计算其内部状态，但不会直接改变它。

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

与有状态组件相比，无状态组件的主要优势是可伸缩性和可重用性。

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

Answer 3

功能组件或无状态组件

Functional component is like pure function in JavaScript.

Functional component is also called as a stateless component.

The functional component only receives props from parent component and return you JSX elements.

The functional component doesn’t play with any lifecycle methods of React and doesn’t play with the component state.

Class 组件或有状态组件

React class component is called as a stateful component.

Stateful component plays with all life cycle methods of React.

This component will modify state.

这是主要区别

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

Answer 4

State Full

Stateful component plays with all life cycle methods of React.

This component will modify the state.

We can access all the method inside state full component

State Less

The stateless component only receives props from the parent component and returns you JSX elements.

The stateless component doesn’t play with any lifecycle methods of React and doesn’t play with the component state.

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

ReactJS 有状态和无状态的区别

ReactJS difference between stateful and stateless

components

stateful

stateless

reactjs