React-有状态组件和无状态组件

导语：众所周知，组件化是React的核心理念之一。在React中组件分为两种类型-有状态组件和无状态组件。本节内容我们就来看一下二者之间的区别。

区别：

首先回顾我们当前项目代码，其中定义的App.js是有状态组件，Person.js为无状态组件。

// 有状态组件

classAppextendsComponent{

render() {

return(......);

}

}

exportdefaultApp;

// 无状态组件

constperson= (props)=>{

return(......)

}

exportdefaultperson

从上面定义我们看到的明显区别是：有状态组件其实就是一个类，而无状态组件是一个函数。

从数据管理和存储来看:有状态组件可以使用State ,而无状态组件不能使用state，而是使用props来接收数据。

从是否有生命周期方法来说，有状态组件可以使用生命周期方法，无状态组件则不可以使用生命周期方法。原因在于我们数据进行更新主要是更新state,然而state发生变化时会触发生命周期的方法。

使用场景：

区别完两个组件之后，那么我们应该在什么情况下使用有状态组件，什么情况下使用无状态组件呢？

通常情况下，如果我们需要存储数据并且需要对数据做一些增删改查的操作，这时我们需要定义有状态组件；如果只是通过接收数据进行渲染操作，可以使用无状态组件。

在实际开发中，建议更多的使用无状态组件，因为有状态组件带有生命周期函数，会在不同时刻触发更新。所以更多的使用无状态组件可以提高整体的渲染性能。

最后我们将两个组件区别总结为如下：

结语：下节内容我们将介绍React的生命周期钩子函数。感谢大家的关注！