在 React 中，props 和 state 是两个核心概念，用于管理组件的数据和状态。
Props（属性）：
- props 是组件之间传递数据的一种方式，用于从父组件向子组件传递数据。
- props 是只读的，即父组件传递给子组件的数据在子组件中不能被修改。
- props 是在组件的声明中定义，通过组件的属性传递给子组件。
- props 的值由父组件决定，子组件无法直接改变它的值。
- 当父组件的 props 发生变化时，子组件会重新渲染。
例如：
function ParentComponent() {
const name = "John";
return <ChildComponent name={name} />;
}
function ChildComponent(props) {
return <p>Hello, {props.name}!</p>;
}
在上述示例中，ParentComponent 将名为 "John" 的值通过 name 属性传递给了 ChildComponent，ChildComponent 使用 props.name 来显示该值。
State（状态）：
- state 是组件内部的数据，用于管理组件的状态和变化。
- state 是可变的，组件可以通过 setState 方法来更新和修改 state。
- state 是在组件的构造函数中初始化的，通常被定义为组件的类属性。
- state 的值可以由组件自身内部改变，通过调用 setState 方法触发组件的重新渲染。
- 当组件的 state 发生变化时，组件会重新渲染。
例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.handleClick()}>Increment</button>
</div>
);
}
}
以上的示例中，MyComponent组件内部有一个count的状态，通过 this.state.count来访问它。当按钮点击时，handleClick 方法会调用setState方法来更新 count的值，并触发组件的重新渲染。
总结：
- props 是父组件传递给子组件的数据，是只读的，子组件无法直接修改它。
- state 是组件内部的数据，是可变的，组件可以通过 setState 方法来修改它。
- props 用于组件之间的数据传递，而 state 用于管理组件自身的状态和变化。
