引言
在现代React开发中，useState和props是两个最基础也最重要的概念。它们共同构成了React数据管理和组件间通信的核心机制。
1. useState：组件内部的状态管理
1.1 基本概念
首先我们要从React中引入useState:
import { useState } from 'react';
useState是React提供的一个Hook，允许我们在函数组件中添加局部状态。它返回一个数组，包含当前状态值和一个更新该状态的函数。(下面是一种标准写法，运用了ES6中解构的方法)
const [state, setState] = useState(initialState);
1.2 在TodoList中的应用
在我们的TodoList组件中，使用了多个useState来管理不同状态：
const [hi, setHi] = useState('haha');
const [title, setTitle] = useState('Todo List');
const [todos, setTodos] = useState([
{
id: 1,
text: '吃饭',
completed: false,
}
]);
1.3 状态更新机制
当调用setState函数时，React会重新渲染组件，并将新的状态值应用于组件。例如，在handleAdd函数中：
const handleAdd = (text) => {
setTodos([
...todos, // 使用展开运算符保留现有项
{
id: todos.length + 1,
text,
completed: false,
}
]);
}
这里我们使用了展开运算符...来创建新数组，这是React推荐的不可变更新模式。
1.4 数据驱动视图
React的核心思想是"数据驱动视图"。当状态更新时，React会自动重新渲染受影响的组件部分。
2. Props：组件间的数据传递
2.1 Props的基本概念
Props（properties的缩写）是React中组件间传递数据的主要方式。父组件可以通过props向子组件传递数据或函数。
2.2 在Todo应用中的体现
- 父组件向子组件传递函数：
// TodoList.jsx
<TodoForm onAdd={handleAdd}/>
// TodoForm.jsx接收并使用这个prop
function TodoForm(props) {
const onAdd = props.onAdd;
// ...
onAdd(text); // 调用父组件传递的函数
}
- 父组件向子组件传递数据：
// TodoList.jsx
<Todos todos={todos}/>
// Todos.jsx接收并使用这个prop
function Todos(props) {
const todos = props.todos;
// ...
}
我们看到在父组件中使用子组件设定了一个值，
<TodoForm onAdd={handleAdd}/>中onAdd就是设置的一个值，然后将父组件中名为handleAdd的函数赋值给它，它就可以传入子组件中，然后子组件中可以通过props.onAdd使用传过来的handleAdd函数
2.3 Props的单向数据流
React中的数据流是单向的，总是从父组件流向子组件。这使得数据流动更加可预测和易于调试。
3. useState与Props的协作
在实际应用中，useState和props通常会一起使用：
- 父组件使用
useState管理状态 - 通过props将状态或状态更新函数传递给子组件
- 子组件通过调用父组件传递的函数来触发状态更新
- 状态更新后，父组件和所有使用该状态的子组件都会重新渲染
这种模式实现了组件间的通信，同时保持了组件的封装性和可复用性。
4. 最佳实践
4.1 状态提升
当多个组件需要共享状态时，应该将状态提升到它们最近的共同父组件中。在我们的Todo应用中，todos状态被提升到TodoList组件中，然后通过props传递给Todos组件。
4.2 不可变更新
更新状态时，应该始终创建新的对象或数组，而不是直接修改现有状态。这有助于React正确检测状态变化并优化重新渲染。
4.3 合理的组件拆分
将UI拆分为多个小组件，每个组件只关注自己的特定功能。
5. 总结
useState和props是React组件开发的基石。useState用于管理组件内部状态，而props用于组件间通信。理解它们的工作原理和协作方式，对于构建可维护、高效的React应用至关重要。
