开发者学堂课程【React 入门与实战:介绍有状态组件和无状态组件的区别】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/585/detail/8104
介绍有状态组件和无状态组件的区别
一、两种创建组件方式的对比
注意:使用 class 关键字创建的组件,有自己的私有数据(this.state)和生命周期函数;
注意:使用 function 创建的组件,只有 props ,没有自己的私有数据和生命周期函数;
1、什么是无状态组件
用构造函数创建出来的组件:叫做"无状态组件” 【无状态组件今后用的不多】
2、什么是有状态组件
用 class 关键字创建出来的组件:叫做“有状态组件”【今后用的最多】
3、什么情况下使用有状态组件?什么情况下使用无状态组件?
(1)如果一个组件需要有自己的私有数据,则推荐使用: class 创建的有状态组件;
(2)如果一个组件不需要有私有的数据,则推荐使用:无状态组件;
(3)React 官方:无状态组件,由于没有自己的 state 和生命周期函数,所以运行效率会比有状态组件稍微高—些;
有状态组件和无状态组件之间的本质区别就是:有无 state 属性和有无生命周期函数;
4. 组件中的 props 和 state/data 之间的区别:
(1)Props 中的数据都是外界传递过来的;
父组件或者上层组件传递给它的,都是外界的。
(2)state/data 中的数据,都是组件私有的;(通过 Ajax 获取回来的数据,一般都是私有数据);
(3)props 中的数据都是只读的;不能重新赋值;
(4)state/data 中的数据,都是可读可写的;
如果用到 props 则数据是外界传递来的,用 state 则是私有的。