React/教程/状态与属性管理

React 状态与属性管理是理解 React 组件如何与数据交互的关键部分。在 React 中，组件可以通过状态（state）和属性（props）来管理数据。

状态（State）

状态是组件内部的数据，它使得组件可以随着数据的变化而重新渲染。以下是一个简单的状态示例：

当用户点击按钮时，状态会更新，并触发组件重新渲染。

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>
    </div>
  );
}

属性（Props）

属性是组件外部传递给组件的数据，类似于函数的参数。以下是一个简单的属性示例：

一个组件接收一个名为 name 的属性，并显示它。

import React from 'react';

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

扩展阅读

想要更深入地了解 React 的状态与属性管理？请访问我们的 React 教程。