浅谈react无状态组件(哑组件)和有状态组件(智能组件)的区别
2023-09-11 14:19:06 时间
(1)无状态组件
无状态组件(Stateless Component)是最基础的组件形式,由于没有状态的影响所以就是纯静态展示的作用。一般来说,各种UI库里也是最开始会开发的组件类别。如按钮、标签、输入框等。它的基本组成结构就是属性(props)加上一个渲染函数(render)。由于不涉及到状态的更新,所以这种组件的复用性也最强。
(2)有状态组件
在无状态组件的基础上,如果组件内部包含状态(state)且状态随着事件或者外部的消息而发生改变的时候,这就构成了有状态组件(Stateful Component)。有状态组件通常会带有生命周期(lifecycle),用以在不同的时刻触发状态的更新。这种组件也是通常在写业务逻辑中最经常使用到的,根据不同的业务场景组件的状态数量以及生命周期机制也不尽相同。
(3)对比
在React中,我们通常通过props和state来处理两种类型的数据。props是只读的,只能由父组件设置。state在组件内定义,在组件的生命周期中可以更改。基本上,无状态组件(也称为哑组件)使用props来存储数据,而有状态组件(也称为智能组件)使用state来存储数据。
(4)选取
总的来说:无状态函数式写法 优于React.createClass,而React.Component优于React.createClass。能用React.Component创建的组件的就尽量不用React.createClass形式创建组件。
相关文章
- javascript第三方组件
- Android UI组件----ListView列表控件详解
- django框架进阶-ModelForm组件-长期维护
- ettercap_缺少组件问题
- 《android开发艺术探索》读书笔记(九)--四大组件
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- 【Android笔记44】Android利用DrawerLayout布局组件实现侧滑导航菜单的效果
- 超全的Android组件及UI框架
- Flutter之 flutter_after_layout组件的作用:监听页面渲染的第一帧
- Flutter之跨组件共享状态Provider原理剖析
- 【Android Gradle 插件】组件化中的 Gradle 构建脚本实现 ④ ( 使用路由实现组件间通信 | 引入 ARoute 框架 | Gradle 构建脚本优化问题 )
- 基于containerd搭建的K8S集群calico与coredns组件一直处于pending状态
- 一次kubernetes calico网络组件的异常状态问题排查
- 开源软件架构总结之——Asterisk(DSL、组件、多线程)
- Canvas组件:画布,可以实现动画操作
- 【微信小程序】一文带你吃透开发中的常用组件