black

WELCOME

有状态组件 & 无状态组件 <React>

1|0有状态组件 & 无状态组件

有状态组件可以叫做容器组件/聪明组件,无状态组件可以叫做展示组件/木偶组件

1|1无状态组件

  • 主要用来定义模板,接收来自父组件props传递的数据。

  • 使用{props.xxx}的表达式把props放入模板中

  • 无状态模板应该保持模板的纯粹性,以便于组件复用。

  • let Header = (props) => ( <div>{props.xxx}</div> )

特性

  • 无状态组件无法访问生命周期的方法,因为它不需要组件生命周期和状态管理。
  • 无状态组件不会被实例化。
    • 无实例化过程不需要分配多余的内存,所以性能更优。
    • 同样,由于无实例化也导致了无法访问this

1|2有状态组件

  • 主要用来定义交互逻辑和业务数据

  • 使用{this.state.xxx}的表达式把业务数据挂载到容器组件的实例上,然后传递props到展示组件上,展示组件接收到props,把props放入到模板中。

  • class Home extends React.Component { construntor(props) { // 只有给super方法中传递props参数,在构造函数里才能用this,props.xxx,否则会报错 super(props) } render() { return ( <Header /> ) } }

1|3性能角度分析两者的区别

类和函数最大的区别就是:能否维护自己数据(状态)。

1|0函数

基本上关注动作(action),而不关心数据的维护,不用维持一个状态,不用把自己的数据保存在内存中。

函数使用的数据是从外部获取或不获取数据。

函数运行时,会进行一系列的动作并返回结果或不返回。

函数速度比较快,适合做表现层。

1|0

相对而言,类有能力维护状态(保存数据),也可以定义自己的一系列动作。

类能够处理复杂逻辑和状态,适合做逻辑层和数据层。

类相对来说比函数速度慢,影响渲染的性能,同时由于数据过于分散会给后期的维护造成一定的困难。

// 看到类和函数的分析,觉得组件原来是需要可以这么分析和看待的,学习到了。虽然也读过红宝书,以为自己会了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 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   微风若里  阅读(224)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示