湘潭网站建设企业,广东东莞免费网站制作公司,怎么让百度搜到网站,白沟网站建设大家好#xff0c;我是 Chocolate。
前不久看到一篇不错的内容#xff0c;来自于 The React Ecosystem in 2023#xff0c;也结合自己今年使用的 React 生态总结一下。
本文并非视频演讲稿#xff0c;和视频内容还是有一点点区别#xff0c;视频内容相对来说会更加详细一…大家好我是 Chocolate。
前不久看到一篇不错的内容来自于 The React Ecosystem in 2023也结合自己今年使用的 React 生态总结一下。
本文并非视频演讲稿和视频内容还是有一点点区别视频内容相对来说会更加详细一点这里放一下视频传送门 b 站: https://www.bilibili.com/video/BV1Zh4y1G78R/ youtube: https://www.youtube.com/watch?vVvSIM1XKuIA 选择你喜欢的平台即可如果可以的话留下你的点赞和关注就是对我更新最大的鼓励
前言
React 不知不觉到 23 年已经有 10 年之久了下面是来自于网图关于 10 周年的生日蛋糕 关于这个生态方面也有挺多内容去年下半年到今年上半年这一年时间我也逐渐接触了一些新的工具有些非常好用就是那种一旦使用了在任何项目中都必须要安装了不用就顺手那我们就快速进入正文吧
开始使用
我记得我在接触前端的时候那会还在大三阶段还只是懵懂的学了一些 html 和 jscss 都没怎么用说实在一点还只是使用 java jsp 实现一些非常简单的逻辑可是那会还是觉得很有成就感能自己做点表单页面出来。
再到之后大三课程设计了解到了 Vue 和 React 框架最开始其实还是接触 Vue不过还是 Vue2 的时代。
后来因为工作需要开始接触了 react接触了 hooks 语法之后感觉就很棒可惜 Vue3 慢了那么一点点当时还不够稳定但现阶段 Vue 也挺香的跟着 antfu 大佬学就是了很多工具也是从他那里了解的。
环境问题
过去学编程总是会遇到环境问题学生时代主要是 windows 电脑有时候找到了不对的教程 npm run 一跑就报错但是正因为解决了这些问题能力也不断提升了。
现在我们也可以使用一些云端 IDE比如 CodeSandbox 与 StackBlitz国内的话比如 cloudstudio 等对于初学者来说可以直接跟随文档教程去写代码了而无需考虑环境问题有时候就是环境老是报错一下就劝退了。
现如今的一些官方文档也比以前好了不少提供在线 demo不会的跟着教程手写一遍完全就可以上手了非常方便。
当然等你熟悉了语法以后最好还是自己能配置一下项目从零搭建起来提升动手能力。
借助工具
在过去其实一般都是以 CRACreate React App为主现在23 年 6 月中旬看这个仓库是有 100k star 了。
但是呢 cra 这玩意也讨论了挺久关键还是修改 webpack 配置问题不过社区里面也有解决方案 CRACO - Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app. 其次就是使用 Vite提升开发体验地址在这Vite Getting Started
pnpm create vite不过自从我开始接触了 Next.js 之后就用着那一套了也很方便自己做全栈方面。
可以使用如下脚手架工具去配置一个 Next.js 项目
npx create-next-applatest当然这个配置出来的只是很简单的项目许多配置还需要开发人员自己去弄我在学的时候是用的这个模版 Next.js Tailwind CSS TypeScript starter and boilerplate packed with useful development features 下文我也会提到这里面具体的一些技术栈。 不过现阶段我更喜欢用 t3-appThe best way to start a full-stack, typesafe Next.js app
非常好用
路由
提到路由一般会想到 React Router下面是 6.8 版本简单示例代码
import { Routes, Route, Outlet, Link } from react-router-dom;export default function App() {return (divh1Basic Example/h1pThis example demonstrates some of the core features of React Routerincluding nested codelt;Routegt;/codes,{ }codelt;Outletgt;/codes, codelt;Linkgt;/codes, and using a* route (aka splat route) to render a not found page when someonevisits an unrecognized URL./p{/* Routes nest inside one another. Nested route paths build uponparent route paths, and nested route elements render insideparent route elements. See the note about Outlet below. */}RoutesRoute path/ element{Layout /}Route index element{Home /} /Route pathabout element{About /} /Route pathdashboard element{Dashboard /} /{/* Using path* means match anything, so this routeacts like a catch-all for URLs that we dont have explicitroutes for. */}Route path* element{NoMatch /} //Route/Routes/div);
}function Layout() {return (div{/* A layout route is a good place to put markup you want toshare across all the pages on your site, like navigation. */}navulliLink to/Home/Link/liliLink to/aboutAbout/Link/liliLink to/dashboardDashboard/Link/liliLink to/nothing-hereNothing Here/Link/li/ul/navhr /{/* An Outlet renders whatever child route is currently active,so you can think about this Outlet as a placeholder forthe child routes we defined above. */}Outlet //div);
}function Home() {return (divh2Home/h2/div);
}function About() {return (divh2About/h2/div);
}function Dashboard() {return (divh2Dashboard/h2/div);
}function NoMatch() {return (divh2Nothing to see here!/h2pLink to/Go to the home page/Link/p/div);
}使用 React Router 的话需要自己去配置一遍而我的话更喜欢文件路由的形式所以我也就更喜欢直接使用 Next.js 的 Pages Router新版的 App Router 依旧还是有点不习惯需要嵌套使用。
关于路由的话还有一个 TanStack RouterTanStack 里还是有一些提升开发体验的工具库。
客户端状态管理
提到状态管理你也许会想到 Redux不过它还是存在一些问题的比较推荐的是使用 Redux Toolkit以下是简单的示例代码
import { createSlice } from reduxjs/toolkitconst initialState {value: 0,
}export const counterSlice createSlice({name: counter,initialState,reducers: {increment: (state) {state.value 1},decrement: (state) {state.value - 1},incrementByAmount: (state, action) {state.value action.payload},},
})// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } counterSlice.actionsexport default counterSlice.reducer不过我除开工作上没办法项目已经做成这样了能不用也就不用目前更喜欢使用 Zustand以下是示例代码
import { create } from zustandtype Store {count: numberinc: () void
}const useStore createStore()((set) ({count: 1,inc: () set((state) ({ count: state.count 1 })),
}))function Counter() {const { count, inc } useStore()return (divspan{count}/spanbutton onClick{inc}one up/button/div)
}上述是使用了 ts 语法可以看到你完全可以像 hooks 一样去使用而不需要一些模板代码上手起来也很快速。
类似地还有一个 jotai这个和我之前使用的 recoil 看起来语法挺像都有 atom 的概念。
服务端状态管理
上文提到的 tanstack里面就有一个 query名字叫 tanstack query 示例代码如下
import {QueryClient,QueryClientProvider,useQuery,
} from tanstack/react-queryconst queryClient new QueryClient()export default function App() {return (QueryClientProvider client{queryClient}Example //QueryClientProvider)
}function Example() {const { isLoading, error, data } useQuery({queryKey: [repoData],queryFn: () fetch(https://api.github.com/repos/tannerlinsley/react-query).then((res) res.json(),),})if (isLoading) return Loading...if (error) return An error has occurred: error.messagereturn (divh1{data.name}/h1p{data.description}/pstrong {data.subscribers_count}/strong{ }strong✨ {data.stargazers_count}/strong{ }strong {data.forks_count}/strong/div)
}其实去年的时候我就有了解过 SWR “SWR” 这个名字来自于 stale-while-revalidate一种由 HTTP RFC 5861(opens in a new tab) 推广的 HTTP 缓存失效策略。这种策略首先从缓存中返回数据过期的同时发送 fetch 请求重新验证最后得到最新数据。 也在项目中集成过不过今后我应该会考虑用一用 tanstack query。
以及我在过去的视频也有提到过 GraphQL不过在我了解了 tRPC 了之后我又更喜欢使用 tRPC 带来的编程体验了。
Form
在过去使用 form我其实都是使用组件库里面的比如 antd 里面的它确实也挺好用的如果是要做后台的话直接用 antd pro 一把梭哈就完事了。
不过如果我们要单独使用 form 的话react-hook-form 是我使用起来比较舒适的社区里面还有一个 formik可以了解一下个人觉得 react-hook-form 够用了。
react-hook-form 的示例代码如下
import { useForm, SubmitHandler } from react-hook-form;type Inputs {example: string,exampleRequired: string,
};export default function App() {const { register, handleSubmit, watch, formState: { errors } } useFormInputs();const onSubmit: SubmitHandlerInputs data console.log(data);console.log(watch(example)) // watch input value by passing the name of itreturn (/* handleSubmit will validate your inputs before invoking onSubmit */form onSubmit{handleSubmit(onSubmit)}{/* register your input into the hook by invoking the register function */}input defaultValuetest {...register(example)} /{/* include validation with required or other standard HTML validation rules */}input {...register(exampleRequired, { required: true })} /{/* errors will return when field validation fails */}{errors.exampleRequired spanThis field is required/span}input typesubmit //form);
}测试
测试是构建高质量 React 应用程序的重要组成部分。在测试 React 应用程序时需要考虑的两个很好的选择是用于单元测试的 Vitest 和 React 测试库以及用于端到端测试的 Playwright 或 Cypress。 Vitest 在去年好像还上了一个榜单来着当时没有记录看来以后得多记录一些动态。 不过本人目前还没使用过工作中需求进度比较赶也没人集成这些倒是见到开源社区里会有工作中的话也有专门的人去写自动化测试所以得看场景。
CSS
这一年内我最喜欢的还是 tailwindcss也正是有 tailwindcss 这个文档网站也让我了解了一些 css 语法知识原来有些效果属性可以这样那样使用。
在过去旧的项目我看到挺多都是使用 Styled Components还有的非常老的项目就直接行内样式一把梭哈不过写着写着你会发现原来写行内样式还越写越爽了 tailwindcss 使用体验还是挺棒的。
类似的还有 UnoCSS也很棒看个人选择。
而 Styled Components 的话我见的比较多的是 Emotion也是 CSS-in-JS 的形式。
UI 库
日常使用我主要是以 antd 和 antd pro 为主不过了解了 tailwindcss 后shadcn/ui 也不错配合 tailwindcss 还是挺香的。
动画
依旧还是以 react-spring 和 Framer Motion 为主。 不过我还了解有 GSAP我在去年用的时候犹记得还没有对应 react 版本在那次录制的时候发现是有的
其它
因为有些是挺常见的基本上一段时间也不怎么会改变的比如国际化、数据可视化、类型安全方面这些都是用的比较主流的库而且是一直在持续维护和更新的。
文档的话挺早就在关注着 Docusaurus如今 2.0 版本已经比较稳定了 以及 Next.js 团队做的文档工具 nextra这个仓库在只有几百 star 的时候我就关注着的因为之前 SWR 文档网站就是用这个构建的之后貌似独立出来了出了文档工具 也是因为这两个网站让我了解到原来不只有 md还有 MDX
当然要细说 React 肯定还有很多很多比如 umidumi 以及其他一些非常好用的库。
这里就再提一点 Dev Tools其实让我想到 Nuxt 之前出的 devtools 以及 studio个人感觉很棒对开发者来说真的太好了这也是为什么我很喜欢 js 的一点吧。
之前倒是看到一些消息貌似 Next.js 也在做 devtools 相关的事情我感觉他们也应该要做还是蛮期待的。
总结
很高兴能和各位分享自己所使用的 React 生态以及通过那篇文章了解了大概的生态内容本文也还有许多不足比如也许了解的框架还不够部分内容并未提及到主要是以我当前水平视角去说带有一些个人体验感受可谓是美中不足吧。
