React组件实用，每个组件各司其职，成为信息管理大师

引言

通过这篇文章，我们对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

再把子组件写出来，例如实现表单的收集，列表的展示等
考虑子组件要实现哪些功能，函数应该放在哪里
1. Form实现数据的输入，提交信息，收集表单
2. List实现数据的打印，将信息可视化，遍历已有的信息，并把Form中要加入的信息打印出来；
3. 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 可进行数据持久化，增强用户体验。其单向数据流和声明式编程理念，使应用逻辑更清晰、更易调试，是构建现代前端应用的优选方案