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);

在上面的例子中，可以看到在render过程中，imageSource作为属性传入，然后添加到无状态组件this中.道具对象.

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屋！