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有几个常用的方法
  1. 存储数据 :localStorage.setItem(key, value);keyvalue 都要是字符串,key是给数据定义的唯一键,value是数据的值。

  2. 读取数据 :localStorage.getItem(key);读取数据,根据键名获取对应的值,只有key一个参数

  3. 删除数据 :localStorage.removeItem(key);删除某条数据

  4. 清除数据: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 拆分为独立、可复用的部分,提升开发效率与维护性。借助 useStateuseEffect 等 Hook 管理状态与副作用,实现响应式界面。结合 localStorage 可进行数据持久化,增强用户体验。其单向数据流和声明式编程理念,使应用逻辑更清晰、更易调试,是构建现代前端应用的优选方案

相关推荐
G等你下课14 分钟前
告别刷新就丢数据!localStorage 全面指南
前端·javascript
该用户已不存在14 分钟前
不知道这些工具,难怪的你的Python开发那么慢丨Python 开发必备的6大工具
前端·后端·python
爱编程的喵17 分钟前
JavaScript闭包实战:从类封装到防抖函数的深度解析
前端·javascript
LovelyAqaurius17 分钟前
Unity URP管线着色器库攻略part1
前端
Xy91020 分钟前
开发者视角:App Trace 一键拉起(Deep Linking)技术详解
java·前端·后端
lalalalalalalala22 分钟前
开箱即用的 Vue3 无限平滑滚动组件
前端·vue.js
前端Hardy23 分钟前
8个你必须掌握的「Vue」实用技巧
前端·javascript·vue.js
hxmmm23 分钟前
react合成事件
react.js
snakeshe101025 分钟前
深入理解 React 中 useEffect 的 cleanUp 机制
前端
星月日26 分钟前
深拷贝还在用lodash吗?来试试原装的structuredClone()吧!
前端·javascript