有状态和无状态组件

组件是自我维持的、独立的微实体,其描述了UI的一部分,可以将应用程序的UI拆分为较小的组件,其中每个组件都有自己的代码、结构和API,简单来说组件允许你将UI拆分为独立可复用的代码片段,并对每个片段进行独立构思。

描述

React中的组件按状态主要分为无状态组件和有状态组件两类,通常来说,使用class关键字创建的组件,有自己的私有数据this.state和生命周期函数就是有状态组件,使用function创建的组件,只有props没有自己的私有数据和生命周期函数就是无状态组件。

无状态组件

无状态组件Stateless Component是最基础的组件形式,由于没有状态的影响所以就是纯静态展示的作用。一般来说,各种UI库里也是最开始会开发的组件类别,例如按钮、标签、输入框等。其的基本组成结构就是属性props以及事件函数调用。由于不涉及到状态的更新,所以这种组件的复用性也最强,无状态组件由于没有自己的state和生命周期函数,所以运行效率高。

  • 只负责接收props渲染DOM,不维护自己的state
  • 不能访问生命周期方法。
  • 不需要声明类,可以避免extendsconstructor之类的代码,语法上更加简洁。
  • 不会被实例化,因此不能直接传ref,可以使用React.forwardRef包装后再传ref
  • 不需要显示声明this关键字,在ES6的类声明中往往需要将函数的this关键字绑定到当前作用域,而因为函数式声明的特性,我们不需要再强制绑定。
  • 更好的性能表现,因为函数式组件中并不需要进行生命周期的管理与状态管理,因此React并不需要进行某些特定的检查或者内存分配,从而保证了更好地性能表现。

简单来说如果一个组件不需要管理state而只是纯粹的展示,那么就可以定义成无状态组件。

function Hello(props) { return ( <div>Hello {props.name}</div> ) }

对于这种无状态的组件,使用函数式的方式声明,会使得代码的可读性更好,并能大大减少代码量,使用箭头函数能够使代码更加简洁。

const Todo = (props) => ( <div onClick={props.onClick}>{props.text}</div> )

有状态组件

有状态组件Stateful Component是在无状态组件的基础上,如果组件内部包含状态state且状态随着事件或者外部的消息而发生改变的时候,这就构成了有状态组件。有状态组件通常会带有生命周期lifecycle,用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。

class Hello extends React.Component{ constructor(props){ super(props); this.state = { tips: "Hello World!" } } componentDidMount() { console.log("ComponentDidMount", this); } componentWillUnmount() { console.log("ComponentWillUnmount", this); } render() { return ( <div>{this.state.tips}</div> ); } }

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/63569386befc https://juejin.cn/post/6844903597147160584 https://juejin.cn/post/6844903493816303624 https://blog.csdn.net/cunjie3951/article/details/106919202 https://blog.csdn.net/weixin_30819085/article/details/99989723 https://setcina.github.io/2019/03/07/react%E6%9C%89%E7%8A%B6%E6%80%81%E7%BB%84%E4%BB%B6%E5%92%8C%E6%97%A0%E7%8A%B6%E6%80%81%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8C%BA%E5%88%AB/