React 中的有状态组件和无状态组件

有状态组件

特点

• 是一个类组件
• 有继承
• 可以使用 this
• 可以使用react的生命周期
• 使用较多容易频繁出发生命周期钩子函数，影响性能
• 内部使用state，维护自身状态的变化，有状态的组件根据外部组件传入的props和自身的state进行渲染

使用场景

• 需要使用到状态的

• 需要使用状态操作组件的(无状态组件的也可以实现新版本react hooks也可实现)

总结

• 类组件可以维护自身的状态变量，即组件的state，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段 (挂载、更新、卸载)，对组件做更多的控制。
• 类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。

无状态组件

特点

• 不依赖自身的状态state.
• 可以是类组件或者函数组件。
• 可以完全避免使用this 关键字。(由于使用的是箭头函数事件无需绑定)
• 有更高的性能。当不需要使用生命周期钩子时，应该首先使用无状态函数组件
• 组件内部不维护state ，只根据外部组件传入的props 进行渲 染的组件，当props 改变时， 组件重新渲染。

使用场景

• 组件不需要管理state, 纯展示

总结

• 组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。
• 当一个组件不需要管理自身状态时，也就是无状态组件，应该优先设计为函数组件。比如自定义的<Button/>、<Input/>等组件。

无状态组件的优缺点

优点

• 简化代码、专注于render
• 组件不需要被实例化，无生命周期，提升性能
• 输出(渲染)只取决于输入(属性)，无副作用
• 视图和数据的解耦分离

缺点

• 无法使用ref
• 无生命周期方法
• 无法控制组件的重渲染，因为无法使用shouldComponentUpdate 方法， 当组件接受到新的属性则会重渲染