上一章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情况下都是只读的。 |
评论前必须登录!
注册