React中的有状态和无状态组件浅析及代码示例

前端  /  管理员 发布于 2年前   400

在React中，一个有状态的组件是一个拥有一些状态的组件。相比之下，无状态组件则没有状态。

请注意，两种类型的组件都可以使用props。

有状态、无状态的使用场景：

如果想要存储一些数据并且想要对这些数据进行增删改查那么就应该使用有状态的组件，

如果只是单纯的处理一些逻辑就是用无状态的组件，

我们更多应该是使用的是无状态的组件

（因为如果是一个有状态的组件的话那么他就一定会触发生命周期定义的一些函数，一旦触发这些函数就会影响当前项目的运行。所以在尽可能的情况下使用无状态的组件，除非你对当前的组件不是很清晰是否要存储数据，这个时候可能选择使用有状态的组件挥着确定要拥有一些状态去存储数据那么就需要使用有状态的组件）

状态的东西都会通过父级去传递，

比如Person、Header这些组件如果想用到数据的话我们可以通过传递的形式给它传递过去，即当前的数据能够进行统一的数据管理，

比如说通过父级管理数据，其它组件如果想拥有这个组件的话可以通过值得形式给它。

有状态跟无状态的区别：

有状态（容器）：

可以拥有状态

拥有生命周期

通过this来接受状态和属性

只有在需要管理状态，或者需要使用生命周期时使用

无状态：

不可以拥有状态

不拥有生命周期

可以通过属性实现数据传递

其它时间用这种

示例代码：

在这个例子中，有两个React组件。

StoreMall组件是有状态的，Week组件是无状态的。

class StoreMall extends React.Component {
  constructor(props) {
    super(props);
    this.state = { sell: 'Everthing' };
  }
  render() {
    return <h1>我在出售 {this.state.sell}.</h1>;
  }
}
 
class Week extends React.Component {
  render() {
    return <h1>今天是 {this.props.day}!</h1>;
  }
}