props 和 state 本质
props 是组件对外的接口,state 是组件对内的接口。 组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的 props 属性进行传递,因此 props 是组件对外的接口。组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口 state。根据对外接口 props 和对内接口 state,组件计算出对应界面的UI。
props
由于 React 是单向数据流,所以 props
基本上也就是从父组件向子组件传递的数据。
只读性
props
是组件的只读属性,组件内部不能直接修改 props
,要想修改 props
,只能在该组件的上层组件中修改。
默认参数
在组件使用过程中,我们最好为 props
中的参数设置一个 defaultProps
,并且制定它的类型。
jsx
Item.defaultProps = {
item: 'Hello Props',
};
Item.propTypes = {
item: PropTypes.string,
};
- **props 是如何在组件之间传递的:**父组件通过给子组件传递 props 来共享数据。props 是只读的,子组件无法修改它们。
- **为什么子组件不能修改 props:**props 是从父组件传递来的数据,子组件不应该去修改它们。如果需要修改数据,应该通过回调函数将变更通知父组件。
- **如何在子组件中使用 props:**子组件通过 props 访问父组件传递的数据,例如通过
props.name
来访问父组件传递的 name 数据。
state
state
的主要作用是用于组件保存、控制以及修改自己的状态,它只能在 constructor
中初始化,它是组件的私有属性,不可通过外部访问和修改,只能通过组件内部的 this.setState
来修改,修改 state
属性会导致组件的重新渲染。
state
适用于存储那些用户交互后会发生变化的数据,比如输入框内容、按钮点击次数等。
- **state 的作用和管理方式:**state 用于存储和管理组件内部的数据,通常与用户交互相关。可以通过 useState 钩子(函数组件)或
this.setState
(类组件)来管理和更新 state。 - **如何通过 setState 更新 state:**setState 方法用于更新 state,它会触发组件重新渲染。例如,
this.setState({ count: this.state.count + 1 })
(类组件)或setCount(count + 1)
(函数组件)。 - **state 的变更会如何影响组件渲染:**每当 state 发生变化时,React 会重新渲染组件,更新 UI 显示最新的状态。
State 和 Props 的根本区别
1. 管理权限
- State:由组件自身管理。组件内部的代码可以自由修改
state
,并根据state
的变化来更新 UI。state
是可变的。 - Props:由父组件传递给子组件。子组件无法修改
props
,它只能接收并使用父组件传递的数据。props
是只读的。
2. 生命周期
- State:
state
是动态的,随时可以发生变化,任何更新state
的操作都会触发组件的重新渲染。 - Props:
props
由父组件控制,只有当父组件重新渲染并传递新的props
时,子组件的props
才会发生变化。
3. 使用场景
- State:用于保存组件内部的动态数据,通常与用户交互有关。例如,按钮点击、表单输入等。
- Props:用于父组件与子组件之间的通信,传递静态数据或行为。比如,父组件传递给子组件的信息、回调函数等。