ReactJS有状态与无状态之间的区别 [英] ReactJS difference between stateful and stateless

问题描述

我试图了解React的有状态和无状态组件之间的确切区别。好的，无状态组件只会做某事，但什么也不会记住，而有状态组件可能会做同样的事情，但是它们会记住 this.state 中的内容。就是这个理论。

I am trying to understand the exact difference between React's stateful and stateless components. Ok, stateless components just do something, but remember nothing, while stateful components may do the same, but they remember stuff within this.state. That's the theory.

但是现在，检查如何使用代码显示这一点，我很难有所作为。以下两个示例对吗？唯一的区别确实是 getInitialState 函数的定义。

But now, checking on how to show this using code, I have a little trouble making the difference. Am I right with the following two examples? The only difference really is the definition of the getInitialState function.

无状态组件的示例：

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;

推荐答案

是的，这是有所不同的。除了使用 stateful 组件之外，还可以使用 this.setState 更改状态，例如：

Yes, that is sort of the difference. Except with the stateful component you can also change the state, using this.setState for example:

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

So, in the example above, the changeImage manages the state of the component (which would also cause all child/dependent components to be re-rendered).

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

Somewhere in the application, you need to bind data, or remember things. Stateless components are dumb (and that is good), they cannot remember and they cannot give context to other parts of the UI. Stateful components provide the necessary context glue.

另一方面，无状态的组件只是通过上下文（通常通过 this.props ：

On the other hand, stateless components just get passed context (usually through 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);

在上面的示例中，您可以看到在渲染期间， imageSource 作为属性传递，然后添加到无状态组件 this.props 对象。

In the example above, you can see that during the render, imageSource is passed in as an attribute and is then added to the stateless components this.props object.

这篇关于ReactJS有状态与无状态之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！