props 和 state 本质

props 是组件对外的接口，state 是组件对内的接口。 组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的 props 属性进行传递，因此 props 是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口 state。根据对外接口 props 和对内接口 state，组件计算出对应界面的UI。

props

由于 React 是单向数据流，所以 props 基本上也就是从父组件向子组件传递的数据。

只读性

props 是组件的只读属性，组件内部不能直接修改 props，要想修改 props，只能在该组件的上层组件中修改。

默认参数

在组件使用过程中，我们最好为 props 中的参数设置一个 defaultProps，并且制定它的类型。

Item.defaultProps = {
  item: 'Hello Props',
};

Item.propTypes = {
  item: PropTypes.string,
};

1. **props 是如何在组件之间传递的：**父组件通过给子组件传递 props 来共享数据。props 是只读的，子组件无法修改它们。
2. **为什么子组件不能修改 props：**props 是从父组件传递来的数据，子组件不应该去修改它们。如果需要修改数据，应该通过回调函数将变更通知父组件。
3. **如何在子组件中使用 props：**子组件通过 props 访问父组件传递的数据，例如通过 props.name 来访问父组件传递的 name 数据。

state

state 的主要作用是用于组件保存、控制以及修改自己的状态，它只能在 constructor 中初始化，它是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的 this.setState 来修改，修改 state 属性会导致组件的重新渲染。

state 适用于存储那些用户交互后会发生变化的数据，比如输入框内容、按钮点击次数等。

1. **state 的作用和管理方式：**state 用于存储和管理组件内部的数据，通常与用户交互相关。可以通过 useState 钩子（函数组件）或 this.setState（类组件）来管理和更新 state。
2. **如何通过 setState 更新 state：**setState 方法用于更新 state，它会触发组件重新渲染。例如，this.setState({ count: this.state.count + 1 })（类组件）或 setCount(count + 1)（函数组件）。
3. **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：用于父组件与子组件之间的通信，传递静态数据或行为。比如，父组件传递给子组件的信息、回调函数等。