CSS-in-jS
在 JS 中写CSS 常见组件库
- styled-components
- Emotion
- import { css } from "@emotion/react";
CSS module
每个组件中都有JS和CSS JS逻辑通过ES module 做了模块化 CSS 没 不同组件的样式 冲突 要工具做模块化 CSS modules 它通过编译给 className 加上了 hash，然后导出了这个唯一的 className 然后在组件里用 styles.xxx 的方式引入
vue 中也有类似机制 叫做 scoped css
<style scoped> .guang { color: red; } </style>
tailwind
原子化 css 框架
- 传统 css是定义 class，然后在 class 内部写样式，而原子化 css 是预定义一些细粒度 class，通过组合 class 的方式完成样式编写
- 所有预定义的 class 都可以通过配置文件修改值，也可以通过 aaa-[14px] 的方式定义任意值的 class
- tailwind 本质上就是一个 postcss 插件，通过 AST 来分析 css 代码，对 css 做增删改，并且可以通过 extractor 提取 js、html 中的 class，之后基于这些来生成最终的 css 代码。
ahooks 中常用的钩子
- useMount 初始化执行 useUnmount 卸载执行
- useToggle 在两个状态值间切换
- useUpdateEffect
useUpdateEffect等同于useEffect忽略首次执行，只在依赖更新执行 - useResponsive 获取响应式信息
wangEdit 组件封装 你增加了哪些
promise promise all 应用场景
promise
书写简单方便 Promise对象代表一个异步操作
三种状态 pengding初始状态 fulfilled成功 rejected 失败 状态只改变一次
promise all 应用场景
大图片分片上传
Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。特别适合使用在遍历种，进行的耗时操作。但是却要想要一次性返回所有结果。
react-query
const queryClient = new QueryClient()
function App() {
return (
// Provide the client to your App
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
)
}
数据获取和缓存 查询
useQuery 通过传递一个查询键（如 API 端点的 URL）和一个数据获取函数，它会自动处理数据的获取、缓存和更新
数据更新和无刷新请求
useMutation 用于处理数据的更新、创建和删除等操作。它可以发送无刷新请求，并自动更新缓存中的数据
缓存自动刷新 失效
const { data } = useQuery("todos", fetchTodos, {
refetchInterval: 5000, // 每 5 秒刷新一次数据
});
const handleTodoUpdate = () => {
// 使 "todos" 查询的缓存失效
queryClient.invalidateQueries("todos");
};
错误处理
— 错误处理和重试 设置请求次数
- 乐观更新
- 无限滚的分页
vueI18n
next 和 nuxt
next
- react 生态系统
- 静态生成
- 文件路由系统
- 代码拆分
nuxt
- Vue.js生态
- 自动引入
- 预渲染和服务器端渲染
- 插件
算法 闰年 考虑 不同的输入值 字符串 数字
prisma
现代化的数据库访问工具和 ORM（对象关系映射）框架
- 数据库迁移和模式管理
- 多个数据库支持 一套语法 你可以结合使用不同的数据库
