React 组件：深入理解 Props 和 State

2024-02-08 23:23:51

在 React 生态系统中，组件是 UI 构建模块的基石。它们通过接收输入（称为 props）并返回 UI 内容的 JSX 片段来运作。了解 props 和 state 如何在组件的生命周期中发挥作用至关重要。

Props：不可变的组件输入

props（Properties 的缩写）是传递给组件的不可变对象。它们代表了组件的外部状态，由父组件设置。props 用于初始化组件并对其行为进行微调。

通过声明 props 类型，您可以确保传入正确的类型数据。例如：

const MyComponent = (props: { name: string, age: number }) => {
  return <h1>{props.name} is {props.age} years old.</h1>;
};

State：可变的组件状态

与 props 不同，state 是组件私有的可变对象，用于存储内部状态。它允许组件随着时间的推移更改其外观和行为。

通过使用 useState 钩子创建 state：

const [count, setCount] = useState(0);

组件的生命周期

组件遵循以下生命周期：

挂载： 当组件首次插入 DOM 时调用。
更新： 当 props 或 state 发生变化时调用。
卸载： 当组件从 DOM 中移除时调用。

最佳实践

使用 props 和 state 时，请遵循以下最佳实践：

使用 props 传递不可变的数据，而使用 state 保存可变的状态。
通过声明 props 类型强制执行数据类型。
只在必要时更新 state，并使用适当的副作用钩子（例如 useEffect）。

技术指南：编写一个计数器组件

使用 props 和 state 创建一个计数器组件：

创建 props 类型：

interface CounterProps {
  initialValue: number;
}

定义组件：

const Counter = (props: CounterProps) => {
  const [count, setCount] = useState(props.initialValue);

  const incrementCount = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </>
  );
};