个性化阅读
专注于IT技术分析

React状态state和属性props之间的区别 – ReactJS实战教程

上一章ReactJS实战教程请查看:React属性验证propTypes用法介绍

状态state

状态是一个可更新的结构,用于包含关于组件的数据或信息,并且可以随时间变化。状态更改可以作为对用户操作或系统事件的响应发生。react组件的核心决定了组件的行为及其呈现方式。状态必须尽可能简单。它表示组件的本地状态或信息。它只能在组件内部或由组件直接访问或修改。

属性props

props是只读组件。它是一个存储标签属性值的对象,工作方式类似于HTML属性。它允许将数据从一个组件传递到其他组件。它类似于函数参数,可以像在函数中传递参数一样传递给组件。props是不可变的,所以我们不能从组件内部修改props。

状态state和属性props的区别

编号 Props属性 State状态
1. 属性props是只读的。 状态更改可以是异步的。
2. 属性props是不可变的。 状态是可变的。
3. 属性props允许你将数据作为参数从一个组件传递到其他组件。 状态保存有关组件的信息。
4. 子组件可以访问属性props。 子组件不能访问状态。
5. 属性props用于组件之间的通信。 状态可用于呈现组件的动态更改。
6. 无状态组件可以有一些属性props。 无状态组件不能有状态。
7. 属性props使组件可重用。 状态不能使组件可重用。
8. 属性props是外部的,由渲染组件控制。 状态是内部的,由React组件本身控制。

下表将指导你如何更改属性props和状态state。

编号 条件 Props State
1. 可以从父组件获取初始值吗? Yes Yes
2. 可以通过父组件更改吗? Yes No
3. 可以在组件内部设置默认值吗? Yes Yes
4. 可以在组件内部更改吗? No Yes
5. 可以为子组件设置初始值吗? Yes Yes
6. 可以在子组件中更改吗? Yes No

注意:组件状态和属性有一些共同的相似之处。它们列在下表中。

编号 State & Props
1. 两者都是纯JS对象。
2. 两者都可以包含默认值。
3. 两者在使用this情况下都是只读的。
赞(0)
未经允许不得转载:srcmini » React状态state和属性props之间的区别 – ReactJS实战教程

评论 抢沙发

评论前必须登录!