介绍有状态组件和无状态组件的区别|学习笔记

简介: 快速学习介绍有状态组件和无状态组件的区别

开发者学堂课程【React 入门与实战介绍有状态组件和无状态组件的区别】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8104


介绍有状态组件和无状态组件的区别


一、两种创建组件方式的对比

注意:使用 class 关键字创建的组件,有自己的私有数据(this.state)和生命周期函数;

注意:使用 function 创建的组件,只有 props ,没有自己的私有数据和生命周期函数;

1、什么是无状态组件

用构造函数创建出来的组件:叫做"无状态组件” 【无状态组件今后用的不多】

2、什么是有状态组件

class 关键字创建出来的组件:叫做“有状态组件”【今后用的最多】

3、什么情况下使用有状态组件?什么情况下使用无状态组件?

1)如果一个组件需要有自己的私有数据,则推荐使用: class 创建的有状态组件;

2)如果一个组件不需要有私有的数据,则推荐使用:无状态组件;

3React 官方:无状态组件,由于没有自己的 state 和生命周期函数,所以运行效率会比有状态组件稍微高—些;

有状态组件和无状态组件之间的本质区别就是:有无 state 属性和有无生命周期函数;

4. 组件中的 props state/data 之间的区别:

1Props 中的数据都是外界传递过来的;

父组件或者上层组件传递给它的,都是外界的。

2state/data 中的数据,都是组件私有的;(通过 Ajax 获取回来的数据,一般都是私有数据);

3props 中的数据都是只读的;不能重新赋值;

4state/data 中的数据,都是可读可写的;

如果用到 props 则数据是外界传递来的,用 state 则是私有的。

相关文章
|
5月前
|
存储 前端开发 索引
REACT 在组件之间共享状态
REACT 在组件之间共享状态
|
2月前
|
存储
Pinia 是如何实现状态共享的?
Pinia 是如何实现状态共享的?
56 4
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
42 0
|
6月前
|
前端开发
在有状态组件中使用forceUpdate()方法重新渲染
在React类组件中使用`forceUpdate()`重新渲染的步骤包括:继承`React.Component`,定义`updateComponent`方法调用`forceUpdate`,并在模块热替换回调中调用此方法。示例代码展示了如何实现。注意,这种方式需要手动创建和管理组件实例,不适合React Hooks,应优先考虑使用`useState`或`useReducer`来更新状态并触发渲染。
|
6月前
|
JavaScript 测试技术
状态管理:集成 Vuex 进行全局状态管理
【4月更文挑战第22天】Vuex 是 Vue.js 的状态管理库,通过状态、mutations、actions 和 modules 等核心概念集中管理应用状态。创建 store,划分模块以增强代码维护性。mutations 同步改变状态,actions 处理异步逻辑。遵循 Vuex 规范,在组件中使用辅助函数访问状态。有效更新和处理错误,实现与其它工具集成,提升应用性能和可靠性。注意根据项目需求灵活使用,防止状态管理过度复杂。
50 2
|
6月前
在Vuex中,如何处理不同模块之间的状态同步?
在Vuex中,如何处理不同模块之间的状态同步?
60 1
|
6月前
|
资源调度 JavaScript
如何使用 Vuex 管理应用的状态?
如何使用 Vuex 管理应用的状态?
31 3
|
前端开发 开发者
react有状态组件和无状态组件的理解及使用场景?
react有状态组件和无状态组件的理解及使用场景?
131 0
Vue3新增的两个生命周期分析解释【onRenderTracked()状态跟踪和onRenderTriggered() 状态触发】
Vue3新增的两个生命周期分析解释【onRenderTracked()状态跟踪和onRenderTriggered() 状态触发】