如何编写React函数组件

编写一个React函数组件时，我们首先要明确组件的目的和功能。这里，我将创建一个稍微复杂一点的React函数组件示例，该组件名为TodoList，用于展示和管理待办事项列表。这个组件将包括添加新待办事项、删除待办事项以及显示所有待办事项的功能。为了简化，我们将使用React的useState Hook来管理状态。

以下是TodoList组件的完整代码，包括注释以解释每个部分的功能：

import React, { useState } from 'react';

// 定义TodoList组件
function TodoList() {
  // 使用useState Hook来管理待办事项列表和输入值
  const [todos, setTodos] = useState([]); // 待办事项列表
  const [inputValue, setInputValue] = useState(''); // 输入框的值

  // 添加新待办事项的函数
  const addTodo = () => {
    // 忽略空字符串的待办事项
    if (inputValue.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: inputValue }]); // 创建一个新的待办事项并添加到列表中
      setInputValue(''); // 清空输入框
    }
  };

  // 删除待办事项的函数
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id)); // 通过id过滤掉要删除的待办事项
  };

  // 处理输入框值变化的函数
  const handleInputChange = (e) => {
    setInputValue(e.target.value); // 更新输入框的值
  };

  // 渲染待办事项列表
  const renderTodos = () => {
    return todos.map(todo => (
      <div key={todo.id}>
        <p>{todo.text}</p>
        <button onClick={() => deleteTodo(todo.id)}>删除</button>
      </div>
    ));
  };

  // 渲染组件
  return (
    <div>
      <h1>待办事项列表</h1>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="添加新待办事项"
      />
      <button onClick={addTodo}>添加</button>
      <div>
        {renderTodos()}
      </div>
    </div>
  );
}

export default TodoList;

在这个TodoList组件中，我们做了以下几件事：

1. 状态管理：使用useState Hook来管理待办事项列表（todos）和输入框的值（inputValue）。

2. 添加待办事项：定义了一个addTodo函数，当点击“添加”按钮时，会检查输入框是否为空，如果不为空，则创建一个新的待办事项对象并添加到列表中，然后清空输入框。

3. 删除待办事项：定义了一个deleteTodo函数，它接受一个待办事项的ID作为参数，并使用filter方法来从列表中移除具有该ID的待办事项。

4. 处理输入：定义了一个handleInputChange函数来处理输入框的值变化，并更新inputValue状态。

5. 渲染待办事项：定义了一个renderTodos函数来遍历todos数组，并为每个待办事项渲染一个包含文本和删除按钮的div元素。

6. 组件渲染：在组件的返回部分，我们渲染了一个包含标题、输入框、添加按钮和待办事项列表的div。

这个TodoList组件展示了React函数组件和Hooks的强大功能，允许我们以声明式的方式管理UI的状态和行为。