React 状态与属性教程

React 中的状态（State）和属性（Props）是构建动态和交互式组件的关键概念。本教程将帮助你理解这两个概念，并学习如何在 React 应用中使用它们。

状态（State）

状态是组件内部的数据，它允许组件根据数据的变化来更新其显示。状态通常用于处理用户交互和响应外部事件。

如何添加状态

import React, { useState } from 'react';

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

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

属性（Props）

属性是组件外部传递给组件的数据。它们通常用于从父组件向子组件传递信息。

如何使用属性

import React from 'react';

function Greeting({ name }) {
  return <h1>你好，{name}！</h1>;
}

function App() {
  return <Greeting name="React" />;
}

示例：状态与属性结合使用

在这个示例中，我们将结合使用状态和属性来创建一个可交互的组件。

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  const addTodo = (text) => {
    setTodos([...todos, text]);
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="添加待办事项"
        onChange={(e) => setTodos([...todos, e.target.value])}
      />
    </div>
  );
}

扩展阅读

想要了解更多关于 React 的知识？请访问我们的 React 官方文档。

React Logo