有状态组件 & 无状态组件 <React>
1|0有状态组件 & 无状态组件
有状态组件可以叫做容器组件/聪明组件,无状态组件可以叫做展示组件/木偶组件。
1|1无状态组件
-
主要用来定义模板,接收来自父组件props传递的数据。
-
使用
{props.xxx}
的表达式把props
放入模板中 -
无状态模板应该保持模板的纯粹性,以便于组件复用。
-
特性:
- 无状态组件无法访问生命周期的方法,因为它不需要组件生命周期和状态管理。
- 无状态组件不会被实例化。
- 无实例化过程不需要分配多余的内存,所以性能更优。
- 同样,由于无实例化也导致了无法访问
this
。
1|2有状态组件
-
主要用来定义交互逻辑和业务数据
-
使用
{this.state.xxx}
的表达式把业务数据挂载到容器组件的实例上,然后传递props
到展示组件上,展示组件接收到props,把props放入到模板中。 -
1|3性能角度分析两者的区别
类和函数最大的区别就是:能否维护自己数据(状态)。
函数
基本上关注动作(action),而不关心数据的维护,不用维持一个状态,不用把自己的数据保存在内存中。
函数使用的数据是从外部获取或不获取数据。
函数运行时,会进行一系列的动作并返回结果或不返回。
函数速度比较快,适合做表现层。
类
相对而言,类有能力维护状态(保存数据),也可以定义自己的一系列动作。
类能够处理复杂逻辑和状态,适合做逻辑层和数据层。
类相对来说比函数速度慢,影响渲染的性能,同时由于数据过于分散会给后期的维护造成一定的困难。
// 看到类和函数的分析,觉得组件原来是需要可以这么分析和看待的,学习到了。虽然也读过红宝书,以为自己会了js,但是在不断学习的过程中发现根本不够看。之前学vue的时候好像也只是专注于API的使用,也没有看过源码,现在学习看来,前路漫漫,加油!
文章整理自
by --->
简书 https://www.jianshu.com/p/29ae19471dba @_hider
segmentfault https://segmentfault.com/a/1190000016774551 @何鼕鼕
__EOF__

本文作者:微风若里
本文链接:https://www.cnblogs.com/liyf-98/p/15001726.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
本文链接:https://www.cnblogs.com/liyf-98/p/15001726.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!