引言
React 组件化思想
还是老问题，首先搞懂，什么是react组件
- 组合了html+css+js的开发单元
- 是一个函数或类，它接受输入（称为"props"，即属性）并返回一个 React 元素，描述页面上应显示的内容。
- 在本章来说，我姑且浅显的定义一下:函数就是组件，它返回一段html标签，完成页面的构建并在返回之前，可以有JS逻辑，数据等渲染页面。
React组件有什么用呢？
新的问题又出现了，我要这个组件干嘛呢？要是想做个页面，我只需要去别处拿个图，渲染一下，再不济直接创个html文件，写几个标签不就完事了。
这个组件就是让我们告别"切图崽"的，况且大部分时候，代码量比较大，逻辑比较复杂，同样的逻辑要在各个地方书写，这时候还老老实实一个个字母的敲，不仅耗时费力，还让错误率大大增加。
所以我们引入组件化思想，作用 就是 将一个app分成许多个页面，再将一个页面分成许多个组件，每个组件都只负责实现页面的一个小功能块，要是工作量还是很大，就再把组件细化成更简单的小组件。同时，出现页面中不同位置却相同功能的情况时，组件还可以复用，就不用麻烦再写一遍了。
剖析React内部具体用法实例
一 、APP的创建
首先按vite模板先创建一个项目并初始化，具体见此文章
创建一个components文件夹目录，在下面加入一些组件，例:
这里我加入了名为Todoform.jsx,TodoList.jsx,Todos.jsx三个组件，分别负责不同的功能 做一个自己的项目，例:
javascript
import { useState } from 'react'
import './App.css'
import TodoList from './components/TodoList'
function XzPlayBasketball() {
return (
<>
//使用了 `<></>`（Fragment）包裹元素
<div></div>
<TodoList />
</>
)
}
export default XzPlayBasketball- useState是一个内置的hook函数，用于在函数组件中添加状态。它接受一个初始值作为参数，并返回一个包含两个元素的数组：第一项是数据变量是一个数组，第二项是一个函数，当它执行并传入新的todos的值，页面会自动更新。
- 注意函数名一定要开头大写，否则React不会将其识别为函数组件
- 使用
<></>（Fragment）包裹元素，Fragment 可以避免额外的 DOM 层级，是 React 推荐的做法之一。
这里用import导入了components中的TodoList组件，并用" <TodoList / > "引入，相当于要写的一些内容就可以放在TodoList中，具体内容用处可以自己对组件名进行命名。
二、对组件的编写
这里我再在TodoList中导入前面定义的Todoform组件和Todos组件，相当于把组件再细化，即功能的细化
javascript
import { useState } from 'react'
import '../Todo.css'//这是对这个组件中的渲染，也是一个组件
import TodoForm from './TodoForm'
import Todos from './Todos'在返回值里面输入一些html标签，构造页面，或者说渲染页面:
javascript
return(
<div className="container">
<h1 className="title">{title}</h1>
<Todos todos={todos}/>
<TodoForm action={action}/>
</div>
)这里我们利用useState给title一个初始值:
const
{
id:1,
text:'比赛开始了',
completed:false,
}这就是TodoList组件在页面上的的功能
接着编写剩下俩个组件:
1.Todos
专门用来做列表的渲染
tips: key属性的作用
- 精准更新，React 通过 key 识别列表项的唯一性，在数据变化时只更新变动的部分，而非重新渲染整个列表。
- 避免渲染错乱，如果省略 key，React 默认使用数组索引（index）作为标识。当列表顺序变化时，可能导致组件状态错乱（如删除第一项后，第二项错误继承第一项的状态）
- 性能提升，稳定的 key（如路由路径 route.path）能让 React 复用已有 DOM 节点，减少不必要的销毁和重建。
ini
function Todos(props){
const todos=props.todos;
return(
<ul>
{
todos.map(todo =>(
<li key={todo.id}>{todo.text}</li>
))
}
</ul >
)
}
export default Todos;这里有个问题，如何拿到父组件传过来的数据?
答:传参，让todos=props.todos，用props接受父组件传过来的参数。
差点忘记了，todos也必须要提前定义好，所以，必须在创建组件之前，就构思好他们各自的功能，提前设置好他们的初始值等内容，避免后期出现找不到对应值等问题而报错
设置初始值:
php
const [todos,setTodos] =useState([
{
id:1,
text:'czx将球传给了xz',
completed:false,
}
]);
我们还可以加一些渲染，让页面变得动态，比如加一个setTime:
2.Todoform
同上，写入一些功能:
javascript
function TodoForm(props) {
const action = props.action
const [text, setText] = useState('')
const handleSubmit = (e) => {
// 阻止默认行为
// 由js 来控制
e.preventDefault(); //
// console.log(text);
action(text)
}
const handleChange = (e) => {
setText(e.target.value)
}
return (
<form action="http://www.baidu.com" onSubmit={handleSubmit}>
<input
type="text"
placeholder="请输入结果"
value={text}
onChange={handleChange}
/>
<button type="submit">添加</button>
</form>
)
}
export default Todoform这个功能就是在添加一个文本框，在输入结果后执行相应的函数，实现页面的动态。
tips:.preventDefault()是阻止表单的默认提交行为，避免页面跳转到 action 属性指定的 URL。 onChange 属性绑定一个匿名函数，当输入框的值发生变化时，更新 text 状态。 onSubmit 是一个常用的事件处理属性，主要用于处理表单提交事件。当用户提交表单（比如点击表单内的提交按钮或者在输入框里按下回车键）时，onSubmit 指定的函数就会被触发。
三、组件化开发的好处
| 好处 | 说明 |
|---|---|
| 易于维护 | 每个组件独立存在，修改影响范围可控 |
| 提高开发效率 | 可复用组件减少重复劳动 |
| 便于团队协作 | 不同成员可以同时开发不同组件 |
| 利于测试 | 每个组件都可以单独进行单元测试 |
| 提升性能 | React 的 diff 算法能高效更新组 |
重点:
- 单一职责原则：一个组件只做一件事。
- 命名规范 ：使用 PascalCase，如
UserProfile,CommentList。 - 保持纯组件：无副作用、输入相同输出相同。
- 避免过度嵌套：控制组件层级不要太深，保持结构清晰。
- 提取公共逻辑：使用自定义 Hook 或 HOC 抽离通用逻辑。
四、总结
简单的React组件化思想 就是这么简单，只需要将项目细化，分解成各个组件让他实现相应的功能。
打个比方 ： 就好像打篮球比赛要赢，有负责传球的，有负责得分的，由负责抢篮板的，有负责指挥的，我们把篮球赛比作一个项目，如果，每个人是一个组件，但凡有一个人没有履行好他的职责(某个组件出问题了 )，就会导致球赛崩盘(项目就会报错或者运行不理想 )，不过在中场休息(检查维修 )的时候，我们就要找到出问题的球员(找到错误的组件 )，对他进行指正(修改组件的内容 )，或者替换另一位球员(重新编写更合适的组件 )，让球赛进行下去(保证项目不会出问题 )；同时，并不是抢篮板的只抢篮板，有时候得分的人也要有抢篮板的能力(不同的项目或大组件调用相同功能的小组件 )，以防篮板往这个人身上走飞的时候他能够接住(组件复用)。
本文着重讲述React组件化的思想，对页面只是简单示例，要想实现更多功能，还需要对JS等语言和react思想再进一步的了解，才能够写真正自己想要的项目。