初始化
useState 是React的一个钩子（Hook），用于在函数组件中添加状态。
currentTodoItem：当前输入框中的待办事项文本【字符串】。
todoList：待办事项列表，包含多个【数组】待办事项对象。
sortTodo
这个函数用于比较两个待办事项，并决定它们的顺序。如果两个待办事项的完成状态不同，已完成的待办事项会排在后面。如果完成状态相同，则按照它们的 id 排序。
handleAddTodo
这个函数在用户点击添加按钮时被调用。它会检查输入框是否为空，如果不为空，则创建一个新的待办事项并添加到列表中，然后更新状态。
handleDeleteTodo(id)
这个函数接收一个 id 作为参数，并从待办事项列表中删除具有该 id 的待办事项。然后对更新后的列表进行排序并更新状态。
handleToggleTodo(id)
这个函数用于切换待办事项的完成状态。它通过 map 方法遍历待办事项列表，找到具有指定 id 的待办事项，并切换其 isCompleted 属性。
组件是什么？
组件（Component）是一个可重用的界面元素，它封装了特定的功能和行为。
- 定义
组件 是一个独立的、可复用的代码块，它描述了界面的一部分。
在React中，组件可以是类（Class Component）或函数（Functional Component）。 - 功能
- 组件负责渲染UI的一部分，并且可以管理自己的状态和属性（props）。
- 组件可以接收输入（通常是通过props），并根据这些输入渲染输出（UI元素）
- 组件可以包含其他组件，从而构建出复杂的UI结构。
- 分类
- 函数组件：使用JavaScript函数来创建的组件，它接受一个props对象作为参数并返回一个React元素。
- 类组件：使用ES6类来创建的组件，它具有更多的特性，如内部状态（state）和生命周期方法。
- 例子
以下是一个简单的React函数组件的例子：
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
在这个例子中，Welcome是一个组件，它接受一个名为props的参数，并返回一个包含问候语的h1元素。
- 特点
可复用性：组件可以在不同的地方多次使用，只需传入不同的props。
封装性：组件内部的状态和行为被封装起来，对外只暴露必要的接口。
组合性：组件可以嵌套使用，即组件内部可以包含其他组件，形成组件树。 - 优势
模块化：组件化使得代码更加模块化，易于管理和维护。
可读性：组件化的代码结构清晰，易于其他开发者理解和接手。
可测试性：独立的组件可以单独测试，提高了测试的效率和覆盖率。
jsx中状态表达式长什么样子？
在 JSX 中，你可以使用各种表达式来展示或操作状态。以下是一些常见的使用状态的表达式示例：
- 显示状态值:
<p>The count is: {count}</p>
- 条件渲染:
{isShown && <div>The content is shown.</div>}isShown 是一个布尔值变量。它可能是 true 或 false。
后者 是一个 JSX 元素，你想要根据条件渲染它。
isShown === true ==>结果是后者得到渲染
反之，结果是 isShown === false，啥也不展示
或者
{isShown ? <div>The content is shown.</div> : <div>The content is hidden.</div>}
三元运算符（A?B :C）运算符根据 A 的值来决定渲染哪个 JSX 元素[B or C]。
- 三元运算符:
Status: {isOnline ? 'Online' : 'Offline'}
- 数组方式渲染列表
{items.map(item => (<li key={item.id}>{item.name}</li>
// 对于数组中的每个元素（我们称之为 item），创建一个 <li> 标签。
// 给每个 <li> 标签设置一个 key 属性，这个属性的值是 item 的 id。
// 在 <li> 标签内部显示 item 的 name
// const items = [
// { id: 1, name: '苹果' },
// { id: 2, name: '香蕉' },
// { id: 3, name: '橘子' }
// ];
// 使用 {items.map(item => (<li key={item.id}>{item.name}</li>))} 后，你将得到以下 HTML：
// <ul>
// <li key="1">苹果</li>
// <li key="2">香蕉</li>
// <li key="3">橘子</li>
// </ul>))}
// items 是一个数组，假设它包含了多个对象，每个对象代表一个项（item）。
// 这个箭头函数为每个数组元素返回一个 JSX 元素。
在 React 中，当你有一个数组，并且你想在 UI 中渲染这个数组的每个元素时，你通常会使用 JavaScript 的 map 方法。map 方法遍历数组中的每个元素，并对每个元素执行一个函数，然后返回一个新的数组，该数组包含了每次函数调用的结果。
- 字符串模板:
<h1>Hello, {name}!</h1>
- 计算属性:
<p>Total: {count * price}</p>
// 创建一个 HTML 段落。
// 在这个段落中显示文本 "Total: a*b"。
// 然后计算 count 和 price 的乘积，并将结果显示在同一行上。- 样式绑定:
<div style={{ color: isActive ? 'red' : 'blue' }}>This text color changes.</div>- 类名绑定:
<div className={classNames('btn', { 'btn-primary': isActive, 'btn-secondary': !isActive })}>Click me
</div>
创建一个 div 元素，并给它添加一个固定的类名 'btn'。
根据组件的状态 isActive 动态地添加 'btn-primary' 或 'btn-secondary' 类名。如果 isActive 为 true，则添加 'btn-primary' 类名[前者]；如果为 false，则添加 'btn-secondary' 类名。
在 div 中显示文本 “Click me”。
- 事件处理:
<button onClick={() => setCount(count + 1)}>Increment</button>- onClick：这是一个事件属性，用于指定当按钮被点击时要执行的 JavaScript 代码。
() => setCount(count + 1)：这是一个箭头函数，它不接受任何参数（()），并返回一个调用 - setCount 函数的表达式。setCount 函数通常是在使用 React 的 useState 钩子时定义的，用于更新状态变量 count 的值。
- 创建一个按钮，并在用户点击该按钮时执行一个函数。
该函数使用 setCount 更新状态变量 count 的值，使其等于当前值加 1。
按钮上显示的文本是 “Increment”，指示用户点击这个按钮将增加计数。
- 解构状态:
const { username, age } = user;
<p>{username} is {age} years old.</p>这行 JSX 代码会渲染一个段落 ，其中包含用户的名字和年龄。{username} 和 {age} 是 JSX 的表达式语法，它允许你在 JSX 中插入 JavaScript 表达式的值。
- 属性展开:
const props = { name: 'John', age: 30 };
<User {...props} /><User {...props} /> 这行代码创建了一个 User 组件的实例，并将 props 对象中的所有属性传递给它。这意味着 User 组件将接收 name 和 age 两个属性，它们分别被设置为 'John' 和 30。
这些表达式可以在 JSX 中直接使用，React 会计算表达式的结果并将其渲染到页面上。需要注意的是，在 JSX 中，所有的表达式都必须用花括号 {} 包围。
状态（state）是如何影响组件的？
-
状态定义组件的行为
组件的状态定义了它的行为和显示内容。例如，在一个待办事项列表组件中，状态可能包含待办事项的列表。当用户添加、删除或标记待办事项为完成时，这些操作会更新状态，从而改变组件的行为和显示。 -
状态的改变触发组件的更新
当组件的状态通过setState（在类组件中）或setXxx（在函数组件中使用useState钩子）函数更新时，React会重新渲染该组件。这是React响应式更新的核心机制。 -
状态是组件私有的
状态是组件的私有数据，它只能在定义它的组件内部访问和修改。这意味着组件的状态不会直接影响其他组件，除非通过特定的方式（如props）传递。
以下是状态影响组件的详细过程：
状态初始化
在组件创建时，状态被初始化。对于函数组件，使用useState钩子进行初始化：
const [count, setCount] = React.useState(0);
在这个例子中，count是组件的初始状态，数字初始化 (0)
数组初始化 ([])
字符串初始化 ("")
当组件需要更新状态时，可以使用setCount函数：
状态更新
当组件需要更新状态时，可以使用set--首字母大写 函数：
function handleClick() {setCount(count + 1);
}每次调用setCount时，React都会调度一个更新，这会导致组件重新渲染。
组件重新渲染
当状态更新后，React会重新渲染组件。在这个过程中，React会使用新的状态值来生成组件的输出。这意味着任何依赖于状态的数据或UI都会根据新的状态进行更新。
响应式UI
因为组件在状态更新后重新渲染，所以任何在渲染过程中使用状态的表达式都会得到更新。
例如：
function Counter() {const [count, setCount] = React.useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
在这个Counter组件中，每当点击按钮时，count状态会增加，然后组件会重新渲染，显示新的点击次数
