State vs. Props

2024 年 8 月 28 日 | 阅读 2 分钟

国家

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

Props

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

State 和 Props 的区别

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

下表将指导您了解 props 和 state 的变化。

序号条件Props国家
1.可以从父组件获取初始值?是的是的
2.可以被父组件改变?是的不能
3.可以在组件内设置默认值?是的是的
4.可以在组件内更改?不能是的
5.可以为子组件设置初始值?是的是的
6.可以在子组件中更改?是的不能

注意:组件 State 和 Props 共享一些共同的相似之处。它们在下表中给出。

序号State 和 Props
1.两者都是纯 JS 对象。
2.两者都可以包含默认值。
3.当它们被 this 使用时,两者都是只读的。

下一主题React 构造函数