当Vite遇上React：组件化开发的"速效救心丸"

SortWorld
49 阅读4分钟

从前有个叫Webpack的老爷爷，打包速度慢得像树懒喝下午茶☕。直到Vite这个"闪电侠"出现，让React组件开发变成了：

  1. 光速启动：冷启动比外卖小哥送咖啡还快⚡
  2. 即热更新：改代码像刷短视频一样秒刷新🎬
  3. 开箱即用：连import React from 'react'都帮你省了（感动到哭）

一、3行代码开启奇幻之旅

npm create vite@latest my-react-app --template react
cd my-react-app
npm run dev

然后你就会发现：

  • 组件像乐高一样随意拼装🧩
  • 开发体验丝滑得像德芙巧克力🍫
  • 再也不用对着进度条祈祷了🙏 温馨提示：用过Vite之后，可能会对其他构建工具产生"戒断反应"，慎入！

二、组件化的魔法

组件是React开发的核心单元，它将HTML、CSS和JS组合成一个可复用的功能模块。通过函数形式定义组件，可以返回JSX模板并处理数据逻辑，以标签形式插入使用。组件化思想将传统DOM编程升级为组件树编程，使开发聚焦业务而非底层API，通过组合不同组件即可构建完整应用，如同搭积木般高效灵活。react组件的引入,创建组件的文件。

image.png

可以看到在src文件下引入并创建了组件文件夹components,将所需要写的单个组件写在该文件当中，当根组件或者子组件需要调用时在头部进行组件引入。

image.png

同时可以看到在子组件当中引入其它两个它的子组件,对此我们对于React组件化有了基础的思想。

image.png

三、 组件化思想

现代React编程当中所有业务都应该具备模块化，他应具备大型的多人协作的项目，而其模块化文件分离应为函数、类、文件分离

  • 现代前端开发框架的核心思想
  • 低级的DOM树编程 -》 组件树编程
  • 开发的最小单元 html 只是沙子 组件才是任务单元
  • 组件组合一堆的html,css,js 实现一个组合功能 方便复用
  • 组件组合在一起，完成页面开发 页面由组件构成，现代前端其实就是用组件搭乐高积木
  • 会写组件，会拆分组件，写数据状态业务 写前端项目了

四、React页面开发业务

4.1在大厂开发中一定要把用户当成大爷伺候在代码当中加上placeholder

return (
    <form action="http://www.baidu.com" onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="请输入待办事项"
        value={text}
        onChange={handleChange}
      />
      <button type="submit">添加</button>
    </form>
  )

image.png

4.2默认发送url请求

当我们在输入框当中提交表单的时候默认会发送url请求，这是产品业务行为。为此在这里我们要阻止其默认行为，要修改TodoList由js来控制。

image.png

4.3修改todos

todos是父组件的,TodoForm修改不了，但我们可以向父组件打报告，想要拿到输入框当中的TodoList！！！

import { useState } from 'react' const [text, setText] = useState('')

当定义引入完之后，我们要将其跟input进行绑定，如果想要修改就要绑定handleChange事件。

image.png

const handleChange = (e) =>{ setText(e.target.value) }

当在输入框中输入所需要的事件时，输入状态发生了改变，所以在提交的时候不需要拿到e.target.value，只需要拿到text即可。然后我们将这个值交给外界的onAdd,这样我们就可以调用传过来的函数。

const onAdd = props.onAdd

回到父组件TodoList当中我们可以看到，需要在子组件上加上一个自定义函数。

<TodoForm onAdd={handleAdd} />

image.png

...todos es6中的展开运算符，因为是个数组所以要新增一个数组，新的状态,新增一下文章内容。

五、总结

React的基本框架可以概括为：

组件(Components):构建页面的基本单元，用函数定义。

状态(State):组件内部的数据，可以动态改变。

属性(Props):从父组件传递给子组件的数据。

事件处理(Event Handing):处理用户的交互操作。

后续将会在项目当中不断深入理解React拼积木搭成城堡的过程，只需要沉下心来慢慢学习，这样我们才能够更好的理解和使用React开发。

avatar
文章
阅读
粉丝