引言
通过这篇文章,我们对React组件有了一个大概认识,接下来,我们就要尝试用组件化思维,去完成一些实际的功能了。本文将带你细致地描述一个小项目,让你从实现简单的信息管理中学到组件的使用,为进大厂打基础。
First:思维框架的构造
要实现一个功能,做一个项目,首先要有一个大概的提纲;例如我要做一个信息管理,那首先它要有名字,接着再有输入信息的功能,然后再考虑增删改查等细节。
再把这些细化,把每个功能细化成组件,再一个个去编写。
jsx文件的创建:

- 设置根组件App.jsx,并导入Headers组件
javascript
import { useState } from 'react'
import './App.css'
import Headers from './compoents/Headers'
function App() {
return (
<>
{/* 开发的任务单位就是组件 */}
<Headers />
</>
)
}
export default App
-
再把子组件写出来,例如实现表单的收集,列表的展示等
-
考虑子组件要实现哪些功能,函数应该放在哪里
- Form实现数据的输入,提交信息,收集表单
- List实现数据的打印,将信息可视化,遍历已有的信息,并把Form中要加入的信息打印出来;
- Item实现勾选,删除等效果;。
Second:对组件功能的编写
- index.jsx根组件的编写
javascript
import{
//响应式状态编程
useState//react 函数式编程 提供了好用的以use开头的函数
} from 'react';
import Form from './Form'
import List from './List'
const Headers = () =>{
//数据流管理
//父组件持有管理数据,props传递数据 子组件通过props自定义函数
//通知父组件
const [headers,setHeaders] = useState([
{
id:1,
text:'我叫zsf,我很虚',
isComplete:false
},
{
id:2,
text:'我叫yzx,我挂了专业课',
isComplete:false
}
]);
const addHeader_text= (text)=>{
setHeaders([
...headers,
{
id:Date.now(),
text,
isComplete:false
}
])
}
const onToggle = (id) =>{
setHeaders(headers.map(header=>header.id === id ?
{...header,isComplete:!header.isComplete}
:header
))
}
return (
<div className="app">
{/* 自定义事件 */}
<Form
onAddHeader1={addHeader_text}
/>
<List
headers={headers}
onToggle={onToggle}
/>
</div>
)
}
export default Headers
我们对这段代码分解一下:
最基础的:
一、初始化数组,提供表单最初的数据
php
const [headers,setHeaders] = useState([
{
id:1,
text:'我是zsf,我很虚',
isComplete:false
},
{
id:2,
text:'我是yzx,我挂了专业课',
isComplete:false
}
]);
二、返回值,俩个子组件,分别要实现的功能
这里实现添加信息:文本和;以及勾选
ini
return (
<div className="app">
{/* 自定义事件 */}
<Form
onAddHeader1={addHeader_text}
/>
<List
headers={headers}
onToggle={onToggle}
/>
</div>
)
Tips:
{} 进行数据绑定,要保证数据和界面状态的统一,因为界面是由数据驱动的;Form中,是在index父组件中定义了addHeader这类函数,然后将其作为onAddHeader的属性传递给子组件,后面子组件调用父组件的函数;List中一样,将headers表中的数据传给子组件,以便子组件调用;这就是对数据状态的绑定。
接下来看看Form,List和Item组件,在数据状态的层层绑定下,传递要用的函数:
Form中返回值中,将value与text文本进行绑定,并设置onChange实时控制文本状态:
Form:
ini
const Form = ({onAddHeader1}) => {
//单项数据流
const [text,setText] = useState('')
//对俩个数组初始化,输入前为空。
const handleSubmit = (e) =>{
e.preventDefault();//阻止表单提交时的默认行为,如刷新页面
let result1 = text.trim();
if(!result1)return;
onAddHeader1(text.trim());
setText(''); //数据状态和界面状态一致要敏感
}
return (
<>
<h1 className="header">TodoList</h1>
<form className="todo-input" onSubmit={handleSubmit}>
<input
type="text"
value={text}
onChange={e=> setText(e.target.value)}
placeholder="请输入内容"
required
/>
<button type="submit">提交</button>
</form>
</>
)
}
export default Form
切记,为了培养对用户体验的重视,平时编写时也可以带上placeholder这类属性
List渲染一个待办事项列表。最外层是
元素,类名为 header-list 。代码根据 headers 数组长度决定渲染内容:若数组长度大于 0,使用 map 方法遍历 headers 数组,为每个 header 渲染一个 Item 组件,传入 key 、 header 数据和一个调用 onToggle 函数的回调,整体实现待办列表的条件渲染。
List:
javascript
import Item from "./Item"
const List = (props) =>{
const{
headers,
onToggle
}= props
return (
<ul className="header-list">
{
headers.length>0?(
headers.map((header)=>{
return <Item
key={header.id}
header={header}
onToggle={()=>onToggle(header.id)}
/>
})
):(
<p>暂无待办事项</p>
)
}
</ul>
)
}
export default List
最后Item,Item 组件 return 渲染含复选框、文本和删除按钮的待办项,分别用于状态切换、内容展示和删除操作:
javascript
const Item = (props) => {
const {
id,
text,
isComplete,
} = props.header
const {onToggle,onDelete}=props
return (
<div className="header-item">
<input type="checkbox" checked={isComplete} onChange={onToggle}/>
<span className={isComplete?'completed':''}>{text}</span>
<button onClick={onDelete}>Delete</button>
</div>
)
}
export default Item
要实现功能的函数:
- 增加文本(addHeader_text)
- 实现勾选(onToggle)
- 实现删除(onDelete)
Third:如何存储数据
这里引入一个浏览器提供的本地存储机制:localStorage
下面介绍了它的一些特点:
永久保存 | 数据不会因为关闭页面或浏览器而消失(除非手动清除) |
---|---|
同源限制 | 只能在同一个域名下访问数据(协议 + 域名 + 端口相同) |
存储容量 | 大约 5MB(比 Cookie 大很多) |
仅存储字符串 | 所有数据都必须是字符串格式(如果要存对象/数组,需用 JSON.stringify() 转换) |
不与服务器通信 | 数据只存在浏览器端,不会自动发送给服务器 |
localStorage有几个常用的方法
-
存储数据 :localStorage.setItem(key, value);
key
和value
都要是字符串,key是给数据定义的唯一键,value是数据的值。 -
读取数据 :localStorage.getItem(key);读取数据,根据键名获取对应的值,只有key一个参数
-
删除数据 :localStorage.removeItem(key);删除某条数据
-
清除数据:localStorage.clear();清除所有的数据
在我们这个项目里,就使用了这个方法,用于存储数据和读取数据:
javascript
useEffect(() => {
localStorage.setItem('todos', JSON.stringify(todos))
}, [todos])
//因为要求是字符串,所以有时要通过JSON.stringify()方法去将不是字符串的数据转化为字符串类型
//useEffect是hooks函数里的一种,它的执行机制是在后面选定的数组中的某个值发生变化时执行 const [todos, setTodos] = useState(
JSON.parse(localStorage.getItem('todos')) || []
)
//将字符串转变为对象
Fouth:项目的实现


具体可以自己尝试一下
Fifth:总结
React 是一个以组件为核心、数据为驱动、强调单向绑定和灵活扩展性的现代前端框架。通过 props
实现组件通信,利用状态管理保持界面一致性,并借助 localStorage
实现数据持久化,能够帮助我们构建出高效、稳定、易于维护的前端应用。React 通过组件化开发模式,将 UI 拆分为独立、可复用的部分,提升开发效率与维护性。借助 useState
、useEffect
等 Hook 管理状态与副作用,实现响应式界面。结合 localStorage
可进行数据持久化,增强用户体验。其单向数据流和声明式编程理念,使应用逻辑更清晰、更易调试,是构建现代前端应用的优选方案