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

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

开发者学堂课程【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 则是私有的。

相关文章
|
2月前
|
JavaScript
componentDidUpdate 方法在组件更新后做什么?
【10月更文挑战第27天】在 `componentDidUpdate` 中使用 `this.props` 和 `this.state` 时要小心,因为此时它们已经是更新后的最新值,与 `prevProps` 和 `prevState` 所代表的前一个状态不同。同时,如果在 `componentDidUpdate` 中再次调用 `setState`,要确保不会导致无限循环的更新,通常需要添加适当的条件判断来避免不必要的状态更新。
86 2
|
5月前
|
JavaScript 前端开发 Java
v-if和v-show的区别?使用场景?v-if状态改变调用钩子函数的示例
这篇文章详细阐述了Vue中`v-if`和`v-show`指令的共同点、区别、使用场景以及它们在组件和普通元素上附属时的不同表现,并通过示例展示了状态改变时对钩子函数调用的影响。
v-if和v-show的区别?使用场景?v-if状态改变调用钩子函数的示例
|
8月前
|
前端开发
在有状态组件中使用forceUpdate()方法重新渲染
在React类组件中使用`forceUpdate()`重新渲染的步骤包括:继承`React.Component`,定义`updateComponent`方法调用`forceUpdate`,并在模块热替换回调中调用此方法。示例代码展示了如何实现。注意,这种方式需要手动创建和管理组件实例,不适合React Hooks,应优先考虑使用`useState`或`useReducer`来更新状态并触发渲染。
|
8月前
|
JavaScript 测试技术
状态管理:集成 Vuex 进行全局状态管理
【4月更文挑战第22天】Vuex 是 Vue.js 的状态管理库,通过状态、mutations、actions 和 modules 等核心概念集中管理应用状态。创建 store,划分模块以增强代码维护性。mutations 同步改变状态,actions 处理异步逻辑。遵循 Vuex 规范,在组件中使用辅助函数访问状态。有效更新和处理错误,实现与其它工具集成,提升应用性能和可靠性。注意根据项目需求灵活使用,防止状态管理过度复杂。
61 2
|
8月前
在Vuex中,如何处理不同模块之间的状态同步?
在Vuex中,如何处理不同模块之间的状态同步?
69 1
|
前端开发 开发者
react有状态组件和无状态组件的理解及使用场景?
react有状态组件和无状态组件的理解及使用场景?
144 0
Vue3新增的两个生命周期分析解释【onRenderTracked()状态跟踪和onRenderTriggered() 状态触发】
Vue3新增的两个生命周期分析解释【onRenderTracked()状态跟踪和onRenderTriggered() 状态触发】
|
存储 JavaScript 前端开发
Redux 状态管理库的原理及使用方式
Redux 是一种流行的状态管理库,用于在 JavaScript 应用程序中管理应用的状态。它遵循单一状态树的原则,将整个应用的状态保存在一个状态树中,并通过纯函数来修改状态。Redux 的原理和使用方式如下:
149 0
jira学习案例5-用状态提升分享组件状态1
jira学习案例5-用状态提升分享组件状态1
82 0
jira学习案例5-用状态提升分享组件状态1
jira学习案例7-用状态提升分享组件状态3
jira学习案例7-用状态提升分享组件状态3
106 0
jira学习案例7-用状态提升分享组件状态3