续接上集，学习React主要知识之前，接下来我们先来讲一讲组件及其思想
一、什么是组件？
组件：是构建用户界面的基本单元(组合了html，css，js 的开发单元)，它可以是一个按钮、一个输入框、一个导航栏，甚至整个页面（一般把组件放在components文件夹里）。
每个组件都是独立的，这意味着它们可以被单独设计、开发、测试，并在不同的地方复用。
特点
- 独立性：每个组件都是自包含的，拥有自己的逻辑、状态、模板和样式。
- 可复用性：一旦创建好一个组件，可以在多个地方重复使用。
- 组合性：组件可以嵌套其他组件，形成复杂的用户界面。
- 模块化：有助于将大型项目拆分成更小、更易管理的部分。
React 支持两种主要类型的组件：函数组件（Function Components）和类组件（Class Components）。随着 React Hooks 的引入，函数组件成为了更推荐的方式（这里也主要讲函数组件）。
什么是函数组件？就是用函数来定义一个组件。下面用个较为完整的组件来介绍：
import { useState } from 'react'//从 React 库中导入 `useState` Hook
import './Todo.css'//导入位于当前目录下的 `Todo.css` 文件中的样式。
function Todo(){
const [todos,setTodos] = useState(['吃饭','睡觉','打豆豆']);
const [title,setTitle] = useState('ECUT 小明');
setTimeout(()=>{
setTodos(['吃饭','睡觉','打豆豆','养鱼']);
},3000);
return(
<div>
<h1 className='title'>{title}</h1>
<table>
<tbody>
{
// html 模板
// React 在渲染列表时要求每个元素必须有唯一的 key 属性
todos.map((item, index) => (
<tr key={index}>
<td>{index + 1}</td>
<td>{item}</td>
</tr>
))
}
</tbody>
</table>
</div>
)
}
export default Todo // JavaScript ES6 模块系统中的导出语句
整个Todo函数就是一个组件
- 它的核心是
return返回的一段 JSX（类似 HTML 的结构），这部分是组件的模板，用于描述 UI。 - 在return之前的部分，是组件中的 JavaScript 逻辑和数据状态（（比如使用
useState定义的状态、函数处理逻辑等）
下面来补充一下没有注释的地方 useState
React 提供的一个 Hook，用于在函数组件中声明和管理状态。它让开发者可以在不编写类组件的情况下使用状态（state）并触发组件的重新渲染。
这里补充一下数据状态的概念，即数据是会改变的
const [状态变量, 修改状态的函数] = useState(初始值);
//也可以这么写（不推荐）
const 状态变量 = useState(初始值)[0];
const 修改状态的函数 = useState(初始值)[1];
二、为什么要有组件（组件化思想）？
这是因为标签粒度太细，只是工作的一个环节，不利于表达业务单位的抽象
1.提高代码的可重用性
有了组件，就可以将UI界面分割成许多个小功能块，减少冗余代码，提升开发效率。组件一旦创建好，可以轻松地在不同的项目中复用。
比如一个按钮组件可以在多个页面或场景中重复使用，无需重复编写相同的代码。
2. 简化复杂界面的管理
- 大型应用的界面通常非常复杂，包含许多不同的部分。
- 通过将界面分解成小的、独立的组件，可以使每个部分更容易理解和维护。
组件将复杂的问题拆解为更小、更易处理的问题。 每个组件负责自己的一小部分功能，使得代码结构更加清晰。
3. 促进团队协作
- 在大型项目中，往往有多个开发者同时工作。
- 组件化的架构可以让不同的开发者专注于不同的组件，而不会互相干扰。
使用组件可提高团队的工作效率。降低沟通成本，因为每个组件都有明确的职责和接口。
4. 增强代码的可测试性
- 独立的组件更容易进行单元测试。
- 可以针对单个组件编写测试用例，确保其行为符合预期。
用组件提高代码质量，减少错误。更容易定位和修复问题。
5. 优化性能
- React 的虚拟 DOM 和高效的 diff 算法可以帮助优化渲染过程。
- 当状态变化时，React 只会重新渲染受影响的组件，而不是整个页面。
用组件提升应用的响应速度和用户体验。有效减少不必要的 DOM 操作，提高性能。
总的来说，现代前端开发框架的核心思想在于从低级的DOM树编程升级为组件树编程，开发的最小单元不再是单纯的HTML元素，而是组件。HTML只是构建界面的基础材料，如同沙子，而组件才是实现功能和任务的基本单元。一个组件可以封装 HTML、CSS和JavaScript代码，形成一个具有独立功能和样式的模块，便于复用和维护。多个组件可以组合在一起，构成完整的页面结构，因此现代前端开发就像是用组件搭乐高积木一样灵活高效。掌握组件的编写与拆分能力，结合数据状态和业务逻辑的处理，就能够胜任前端项目的开发工作，提升开发效率和代码质量。
还有更多内容，请待下集分享
