组件的状态（State）和属性（Props）

1. 概述

在React中，组件是构建用户界面的基本单元。每个组件可以管理自己的 状态（State） 和接收来自父组件的 属性（Props）。理解这两者的区别和用法是学习React的关键部分。

2. 属性（Props）

2.1 什么是 Props

Props 是组件接受的输入，被用来传递数据和事件处理函数。它们是只读的，不能在组件内部修改。

2.2 如何使用 Props

要在组件中使用 props，可以直接通过组件的参数访问：

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

在父组件中使用 Greeting 组件时，可以传递 name 属性：

function App() {
    return (
        <div>
            <Greeting name="Alice" />
            <Greeting name="Bob" />
        </div>
    );
}

2.3 Props 的特点

• 只读：props 是不可变的，子组件不应修改来自父组件的 props。
• 用于数据传递：props 主要用于从父组件向子组件传递数据。

3. 状态（State）

3.1 什么是 State

State 是组件内部管理的数据，可以在组件生命周期内进行更改。与 props 不同，state 是可变的，通常用于处理组件内部需要跟踪的变化。

3.2 如何使用 State

要在函数组件中使用 state，需要使用 React 的 useState Hook。

3.2.1 引入 useState

首先，需要从 react 包中导入 useState：

import React, { useState } from 'react';

3.2.2 创建状态

使用 useState 创建状态变量：

function Counter() {
    // 定义一个名为 count 的状态变量，初始值为 0
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

3.3 State 的特点

• 可变：state 是可以被修改的，通常通过调用 setState 函数。
• 影响渲染：当 state 更新后，React 会重新渲染组件以反映最新的状态。

4. Props 与 State 的区别

• 来源：

  • props 是由父组件传递给子组件的。
  • state 是组件自身管理的。

• 可变性：

  • props 是只读的，子组件无法修改。
  • state 是可变的，组件可以更新自己内部的 state。

• 用途：

  • props 用于从父到子的单向数据流。
  • state 用于处理组件内部的数据和逻辑。

5. 实际应用案例

结合 props 和 state 的一个简单实例，创建一个按钮点击计数器，每次点击按钮时，计数器增加，同时通过 props 将当前计数传递给子组件进行展示：

import React, { useState } from 'react';

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

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
            <Display count={count} />
        </div>
    );
}

function Display(props) {
    return <h2>Current Count: {props.count}</h2>;
}

export default Counter;

在以上示例中，Counter 组件通过 state 管理点击次数，并将该值通过 props 传递给 Display 组件以展示。

6. 总结

在React中，理解组件的 state 和 props 是关键。state 用于管理内部数据，props 用于在组件之间传递信息。学会使用这两者，将帮助你构建更复杂和功能丰富的React应用。