当前位置：首页 > news >正文

织梦商业网站内容管理系统seo项目是什么

news 2025/7/16 14:34:41

织梦商业网站内容管理系统,seo项目是什么,wordpress数据库调用文章,wordpress文章积分大家好，我是 Chocolate。前不久看到一篇不错的内容，来自于 The React Ecosystem in 2023，也结合自己今年使用的 React 生态总结一下。本文并非视频演讲稿，和视频内容还是有一点点区别，视频内容相对来说会更加详细一…

大家好，我是 Chocolate。

前不久看到一篇不错的内容，来自于 The React Ecosystem in 2023，也结合自己今年使用的 React 生态总结一下。

本文并非视频演讲稿，和视频内容还是有一点点区别，视频内容相对来说会更加详细一点，这里放一下视频传送门：

b 站: https://www.bilibili.com/video/BV1Zh4y1G78R/
youtube: https://www.youtube.com/watch?v=VvSIM1XKuIA

选择你喜欢的平台即可，如果可以的话留下你的点赞和关注就是对我更新最大的鼓励！

前言

React 不知不觉到 23 年已经有 10 年之久了，下面是来自于网图，关于 10 周年的生日蛋糕：

关于这个生态方面，也有挺多内容，去年下半年到今年上半年，这一年时间，我也逐渐接触了一些新的工具，有些非常好用，就是那种一旦使用了，在任何项目中都必须要安装了，不用就顺手，那我们就快速进入正文吧：

开始使用

我记得我在接触前端的时候，那会还在大三阶段，还只是懵懂的学了一些 html 和 js，css 都没怎么用，说实在一点，还只是使用 java + jsp 实现一些非常简单的逻辑，可是那会还是觉得很有成就感，能自己做点表单页面出来。

再到之后大三课程设计了解到了 Vue 和 React 框架，最开始其实还是接触 Vue，不过还是 Vue2 的时代。

后来因为工作需要，开始接触了 react，接触了 hooks 语法之后，感觉就很棒，可惜 Vue3 慢了那么一点点，当时还不够稳定，但现阶段 Vue 也挺香的，跟着 antfu 大佬学就是了，很多工具也是从他那里了解的。

环境问题

过去学编程总是会遇到环境问题，学生时代主要是 windows 电脑，有时候找到了不对的教程， npm run 一跑就报错，但是正因为解决了这些问题，能力也不断提升了。

现在我们也可以使用一些云端 IDE，比如 CodeSandbox 与 StackBlitz，国内的话比如 cloudstudio 等，对于初学者来说可以直接跟随文档教程去写代码了，而无需考虑环境问题，有时候就是环境老是报错，一下就劝退了。

现如今的一些官方文档也比以前好了不少，提供在线 demo，不会的跟着教程手写一遍完全就可以上手了，非常方便。

当然，等你熟悉了语法以后，最好还是自己能配置一下项目，从零搭建起来，提升动手能力。

借助工具

在过去其实一般都是以 CRA（Create 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-app@latest

当然，这个配置出来的只是很简单的项目，许多配置还需要开发人员自己去弄，我在学的时候是用的这个模版：

🔋 Next.js + Tailwind CSS + TypeScript starter and boilerplate packed with useful development features

下文我也会提到这里面具体的一些技术栈。

不过，现阶段我更喜欢用 t3-app（The 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 (<div><h1>Basic Example</h1><p>This example demonstrates some of the core features of React Routerincluding nested <code>&lt;Route&gt;</code>s,{" "}<code>&lt;Outlet&gt;</code>s, <code>&lt;Link&gt;</code>s, 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. */}<Routes><Route path="/" element={<Layout />}><Route index element={<Home />} /><Route path="about" element={<About />} /><Route path="dashboard" element={<Dashboard />} />{/* Using path="*"" means "match anything", so this routeacts like a catch-all for URLs that we don't 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. */}<nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/dashboard">Dashboard</Link></li><li><Link to="/nothing-here">Nothing Here</Link></li></ul></nav><hr />{/* 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 (<div><h2>Home</h2></div>);
}function About() {return (<div><h2>About</h2></div>);
}function Dashboard() {return (<div><h2>Dashboard</h2></div>);
}function NoMatch() {return (<div><h2>Nothing to see here!</h2><p><Link to="/">Go to the home page</Link></p></div>);
}

使用 React Router 的话需要自己去配置一遍，而我的话更喜欢文件路由的形式，所以我也就更喜欢直接使用 Next.js 的 Pages Router，新版的 App Router 依旧还是有点不习惯，需要嵌套使用。

关于路由的话还有一个 TanStack Router，TanStack 里还是有一些提升开发体验的工具库。

客户端状态管理

提到状态管理，你也许会想到 Redux，不过它还是存在一些问题的，比较推荐的是使用 Redux Toolkit，以下是简单的示例代码：

import { createSlice } from '@reduxjs/toolkit'const 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 'zustand'type Store = {count: numberinc: () => void
}const useStore = create<Store>()((set) => ({count: 1,inc: () => set((state) => ({ count: state.count + 1 })),
}))function Counter() {const { count, inc } = useStore()return (<div><span>{count}</span><button onClick={inc}>one up</button></div>)
}

上述是使用了 ts 语法，可以看到，你完全可以像 hooks 一样去使用，而不需要一些模板代码，上手起来也很快速。

类似地还有一个 jotai，这个和我之前使用的 recoil 看起来语法挺像，都有 atom 的概念。

服务端状态管理

上文提到的 tanstack，里面就有一个 query，名字叫 tanstack query ，示例代码如下：

import {QueryClient,QueryClientProvider,useQuery,
} from '@tanstack/react-query'const 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 (<div><h1>{data.name}</h1><p>{data.description}</p><strong>👀 {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 } } = useForm<Inputs>();const onSubmit: SubmitHandler<Inputs> = 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 defaultValue="test" {...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 && <span>This field is required</span>}<input type="submit" /></form>);
}