ReactJS 有状态和无状态的区别

IT技术 reactjs components stateless stateful
2021-04-09 06:08:34

我试图了解 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;
4个回答

是的,这有点不同。除了有状态组件,您还可以更改状态,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对象中。

功能组件或无状态组件

  1. 函数式组件就像 JavaScript 中的纯函数。
  2. 功能组件也称为无状态组件。
  3. 功能组件只从父组件接收 props 并返回 JSX 元素。
  4. 功能组件不使用 React 的任何生命周期方法,也不使用组件状态。

类组件或有状态组件

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

这是主要的区别

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

哪个是最好的?
2021-06-01 06:08:34
你的最后一行是一个非常好的陈述,并且绘制了纯、无状态和功能性并不完全相同。
2021-06-16 06:08:34

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

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

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

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

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

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

状态满

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

状态更少

  1. 无状态组件只从父组件接收 props 并返回 JSX 元素。
  2. 无状态组件不使用 React 的任何生命周期方法,也不使用组件状态。
export default function example(props) {
         return (
            {props.person.firstName}
         )
}