前端开发 on Zampo Blog

Vue.js 3.0 新特性详解与实战

Thu, 15 Feb 2024 13:45:00 +0800

Vue.js 3.0带来了许多令人兴奋的新特性，今天我们来深入了解这些变化以及如何在实际项目中应用它们。

🚀 Vue 3的主要改进

性能提升

更快的虚拟DOM：重写了虚拟DOM，性能提升1.3-2倍
更小的包体积：通过tree-shaking支持，减少了41%的包体积
更好的TypeScript支持：完全用TypeScript重写

新的响应式系统

基于ES6的Proxy实现，相比Vue 2的Object.defineProperty：

支持数组索引和length的监听
支持Map、Set、WeakMap、WeakSet
支持13种数组变更方法的监听

💡 Composition API详解

为什么需要Composition API？

Vue 2的Options API在处理复杂组件时存在一些问题：

逻辑复用困难
类型推断不够友好
大组件难以维护

基础语法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


import { ref, reactive, computed, watch, onMounted } from 'vue'

export default {
 setup() {
 // 响应式数据
 const count = ref(0)
 const state = reactive({
 name: '张三',
 age: 25
 })
 
 // 计算属性
 const doubleCount = computed(() => count.value * 2)
 
 // 方法
 const increment = () => {
 count.value++
 }
 
 // 生命周期
 onMounted(() => {
 console.log('组件已挂载')
 })
 
 // 监听器
 watch(count, (newVal, oldVal) => {
 console.log(`count从${oldVal}变为${newVal}`)
 })
 
 return {
 count,
 state,
 doubleCount,
 increment
 }
 }
}

组合函数（Composables）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


// composables/useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
 const count = ref(initialValue)
 
 const increment = () => count.value++
 const decrement = () => count.value--
 const reset = () => count.value = initialValue
 
 const isEven = computed(() => count.value % 2 === 0)
 
 return {
 count: readonly(count),
 increment,
 decrement,
 reset,
 isEven
 }
}

// 在组件中使用
import { useCounter } from './composables/useCounter'

export default {
 setup() {
 const { count, increment, decrement, isEven } = useCounter(10)
 
 return {
 count,
 increment,
 decrement,
 isEven
 }
 }
}

逻辑复用示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


// composables/useFetch.js
import { ref, reactive } from 'vue'

export function useFetch(url) {
 const data = ref(null)
 const loading = ref(true)
 const error = ref(null)
 
 const fetchData = async () => {
 try {
 loading.value = true
 error.value = null
 const response = await fetch(url)
 if (!response.ok) throw new Error('请求失败')
 data.value = await response.json()
 } catch (err) {
 error.value = err.message
 } finally {
 loading.value = false
 }
 }
 
 fetchData()
 
 return { data, loading, error, refetch: fetchData }
}

// 在组件中使用
export default {
 setup() {
 const { data: users, loading, error } = useFetch('/api/users')
 
 return { users, loading, error }
 }
}

⚡ 新特性深入

1. Teleport（传送门）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


<template>
 <div class="modal-container">
 <button @click="showModal = true">打开模态框</button>
 
 <!-- 将模态框传送到body下 -->
 <Teleport to="body">
 <div v-if="showModal" class="modal-backdrop">
 <div class="modal">
 <h3>模态框标题</h3>
 <p>这是模态框内容</p>
 <button @click="showModal = false">关闭</button>
 </div>
 </div>
 </Teleport>
 </div>
</template>

<script>
import { ref } from 'vue'

export default {
 setup() {
 const showModal = ref(false)
 return { showModal }
 }
}
</script>

2. Fragments（片段）

Vue 3支持组件有多个根节点：

CSS实用技巧集合：让你的网页更精美

Mon, 05 Feb 2024 14:15:00 +0800

CSS是前端开发中不可或缺的技术，掌握一些实用的CSS技巧能让你的网页脱颖而出。今天分享一些我常用的CSS技巧。

🎨 布局技巧

1. 完美居中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 方法一：Flexbox */
.center-flex {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

/* 方法二：Grid */
.center-grid {
 display: grid;
 place-items: center;
 height: 100vh;
}

/* 方法三：绝对定位 + Transform */
.center-absolute {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

2. 等高列布局

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


.equal-height-container {
 display: flex;
}

.column {
 flex: 1;
 padding: 20px;
 background: #f5f5f5;
 margin: 0 10px;
}

/* 或使用Grid */
.grid-equal-height {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

3. 粘性页脚

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


body {
 min-height: 100vh;
 display: flex;
 flex-direction: column;
}

main {
 flex: 1;
}

footer {
 margin-top: auto;
}

✨ 视觉效果

1. 毛玻璃效果

1
2
3
4
5
6
7
8


.glassmorphism {
 background: rgba(255, 255, 255, 0.25);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.18);
 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

2. 渐变文字

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


.gradient-text {
 background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
 background-size: 300% 300%;
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
 0%, 100% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
}

3. 悬浮卡片效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.hover-card {
 transition: all 0.3s ease;
 transform: translateY(0);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.hover-card:hover {
 transform: translateY(-10px);
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

🔥 动画效果

1. 加载动画

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


/* 旋转加载器 */
.loader {
 width: 40px;
 height: 40px;
 border: 4px solid #f3f3f3;
 border-top: 4px solid #3498db;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

/* 脉冲加载器 */
.pulse-loader {
 width: 20px;
 height: 20px;
 background-color: #3498db;
 border-radius: 50%;
 animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
 0%, 100% {
 transform: scale(0);
 opacity: 1;
 }
 50% {
 transform: scale(1);
 opacity: 0.7;
 }
}

2. 打字机效果

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


.typewriter {
 overflow: hidden;
 border-right: 2px solid #333;
 white-space: nowrap;
 margin: 0 auto;
 animation: 
 typing 3.5s steps(40, end),
 blink-caret 0.75s step-end infinite;
}

@keyframes typing {
 from { width: 0; }
 to { width: 100%; }
}

@keyframes blink-caret {
 from, to { border-color: transparent; }
 50% { border-color: #333; }
}

3. 波浪动画

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


.wave {
 position: relative;
 overflow: hidden;
}

.wave::before {
 content: '';
 position: absolute;
 top: -50%;
 left: -50%;
 width: 200%;
 height: 200%;
 background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
 animation: wave 2s linear infinite;
}

@keyframes wave {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

📱 响应式技巧

1. 流体字体大小

1
2
3
4
5
6
7
8


.fluid-typography {
 font-size: clamp(1rem, 2.5vw, 2rem);
}

/* 更精确的控制 */
.responsive-text {
 font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)));
}

2. 容器查询

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


.card-container {
 container-type: inline-size;
}

@container (min-width: 300px) {
 .card {
 display: flex;
 align-items: center;
 }
 
 .card-image {
 width: 100px;
 height: 100px;
 }
}

3. 响应式图片

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


.responsive-image {
 width: 100%;
 height: auto;
 object-fit: cover;
 aspect-ratio: 16/9;
}

/* 艺术指导 */
.hero-image {
 width: 100%;
 height: 50vh;
 object-fit: cover;
 object-position: center top;
}

@media (max-width: 768px) {
 .hero-image {
 object-position: center center;
 height: 30vh;
 }
}

🛠️ 实用工具类

1. 文本处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


/* 单行省略 */
.text-ellipsis {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

/* 多行省略 */
.text-clamp {
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

/* 防止文本选择 */
.no-select {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

2. 滚动条样式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
 width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
 background: #f1f1f1;
 border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
 background: #888;
 border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
 background: #555;
}

/* 隐藏滚动条但保持功能 */
.hide-scrollbar {
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
 display: none; /* Chrome, Safari and Opera */
}

3. 焦点管理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


/* 改善可访问性的焦点样式 */
.focus-visible {
 outline: none;
}

.focus-visible:focus-visible {
 outline: 2px solid #4285f4;
 outline-offset: 2px;
}

/* 跳转链接 */
.skip-link {
 position: absolute;
 top: -40px;
 left: 6px;
 background: #000;
 color: #fff;
 padding: 8px;
 text-decoration: none;
 transition: top 0.3s;
}

.skip-link:focus {
 top: 6px;
}

🎯 性能优化

1. 硬件加速

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


.gpu-accelerated {
 transform: translateZ(0);
 /* 或 */
 will-change: transform;
}

/* 注意：用完后要移除will-change */
.animation-finished {
 will-change: auto;
}

2. 减少重排重绘

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


/* 使用transform代替改变position */
.move-element {
 transform: translateX(100px);
 /* 而不是 left: 100px; */
}

/* 使用opacity代替visibility */
.fade-element {
 opacity: 0;
 /* 而不是 visibility: hidden; */
}

🧪 实验性功能

1. CSS Houdini

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


/* 注册自定义属性 */
@property --gradient-angle {
 syntax: '<angle>';
 initial-value: 0deg;
 inherits: false;
}

.animated-gradient {
 background: conic-gradient(from var(--gradient-angle), #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
 animation: rotate-gradient 3s linear infinite;
}

@keyframes rotate-gradient {
 to {
 --gradient-angle: 360deg;
 }
}

2. CSS Grid子网格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


.subgrid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.subgrid-item {
 display: grid;
 grid-template-rows: subgrid;
 grid-row: span 3;
}

📋 实践建议

1. CSS组织结构

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 使用BEM命名规范 */
.card {
 /* 块 */
}

.card__header {
 /* 元素 */
}

.card--featured {
 /* 修饰符 */
}

2. CSS变量的妙用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


:root {
 --primary-color: #3498db;
 --secondary-color: #2ecc71;
 --font-size-base: 16px;
 --spacing-unit: 8px;
}

.component {
 color: var(--primary-color);
 font-size: calc(var(--font-size-base) * 1.2);
 padding: calc(var(--spacing-unit) * 2);
}

/* 主题切换 */
[data-theme="dark"] {
 --primary-color: #5dade2;
 --background-color: #2c3e50;
}

3. 调试技巧

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 临时边框调试 */
* {
 outline: 1px solid red;
}

/* 网格调试 */
.debug-grid {
 background-image: 
 linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
 background-size: 20px 20px;
}

💡 总结

这些CSS技巧涵盖了日常开发中的常见需求：

React开发最佳实践指南

Sun, 28 Jan 2024 16:20:00 +0800

React作为目前最流行的前端框架之一，掌握其最佳实践对于开发高质量应用至关重要。

组件设计原则

1. 单一职责原则

每个组件应该只负责一个功能：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// ❌ 不好的做法 - 组件职责过多
const UserDashboard = () => {
 // 用户信息管理
 // 数据统计
 // 设置管理
 // ...太多功能
};

// ✅ 好的做法 - 拆分成多个组件
const UserProfile = () => { /* 用户信息 */ };
const UserStats = () => { /* 数据统计 */ };
const UserSettings = () => { /* 设置管理 */ };

2. Props接口设计

明确定义组件的Props类型：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


import PropTypes from 'prop-types';

const Button = ({ 
 children, 
 onClick, 
 type = 'button', 
 disabled = false,
 variant = 'primary' 
}) => {
 return (
 <button 
 type={type}
 onClick={onClick}
 disabled={disabled}
 className={`btn btn-${variant}`}
 >
 {children}
 </button>
 );
};

Button.propTypes = {
 children: PropTypes.node.isRequired,
 onClick: PropTypes.func,
 type: PropTypes.oneOf(['button', 'submit', 'reset']),
 disabled: PropTypes.bool,
 variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger'])
};

状态管理策略

1. 状态提升原则

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


// 将共享状态提升到最近的公共父组件
const TodoApp = () => {
 const [todos, setTodos] = useState([]);
 
 const addTodo = (text) => {
 setTodos([...todos, { id: Date.now(), text, completed: false }]);
 };
 
 const toggleTodo = (id) => {
 setTodos(todos.map(todo => 
 todo.id === id ? { ...todo, completed: !todo.completed } : todo
 ));
 };
 
 return (
 <div>
 <TodoInput onAdd={addTodo} />
 <TodoList todos={todos} onToggle={toggleTodo} />
 </div>
 );
};

2. 自定义Hook复用逻辑

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


// 自定义Hook封装常用逻辑
const useLocalStorage = (key, initialValue) => {
 const [storedValue, setStoredValue] = useState(() => {
 try {
 const item = window.localStorage.getItem(key);
 return item ? JSON.parse(item) : initialValue;
 } catch (error) {
 console.log(error);
 return initialValue;
 }
 });
 
 const setValue = (value) => {
 try {
 setStoredValue(value);
 window.localStorage.setItem(key, JSON.stringify(value));
 } catch (error) {
 console.log(error);
 }
 };
 
 return [storedValue, setValue];
};

// 使用自定义Hook
const Settings = () => {
 const [theme, setTheme] = useLocalStorage('theme', 'light');
 
 return (
 <div>
 <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
 切换主题
 </button>
 </div>
 );
};

性能优化技巧

1. React.memo优化渲染

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


// 使用React.memo防止不必要的重渲染
const ExpensiveComponent = React.memo(({ data, onUpdate }) => {
 console.log('ExpensiveComponent渲染');
 
 return (
 <div>
 {data.map(item => (
 <div key={item.id}>{item.name}</div>
 ))}
 </div>
 );
});

// 自定义比较函数
const MyComponent = React.memo((props) => {
 // 组件内容
}, (prevProps, nextProps) => {
 // 返回true表示props相等，不需要重渲染
 return prevProps.id === nextProps.id;
});

2. useCallback和useMemo优化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


const TodoList = ({ todos, filter }) => {
 // 缓存计算结果
 const filteredTodos = useMemo(() => {
 return todos.filter(todo => {
 switch (filter) {
 case 'completed':
 return todo.completed;
 case 'active':
 return !todo.completed;
 default:
 return true;
 }
 });
 }, [todos, filter]);
 
 // 缓存回调函数
 const handleToggle = useCallback((id) => {
 // 处理逻辑
 }, []);
 
 return (
 <div>
 {filteredTodos.map(todo => (
 <TodoItem 
 key={todo.id} 
 todo={todo} 
 onToggle={handleToggle}
 />
 ))}
 </div>
 );
};

3. 懒加载和代码分割

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


import React, { Suspense, lazy } from 'react';

// 路由级别的代码分割
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

const App = () => {
 return (
 <Router>
 <Suspense fallback={<div>加载中...</div>}>
 <Routes>
 <Route path="/" element={<Home />} />
 <Route path="/about" element={<About />} />
 <Route path="/contact" element={<Contact />} />
 </Routes>
 </Suspense>
 </Router>
 );
};

错误处理

1. 错误边界

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41


class ErrorBoundary extends React.Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false, error: null };
 }
 
 static getDerivedStateFromError(error) {
 return { hasError: true, error };
 }
 
 componentDidCatch(error, errorInfo) {
 console.error('错误边界捕获到错误:', error, errorInfo);
 // 可以将错误发送到错误报告服务
 }
 
 render() {
 if (this.state.hasError) {
 return (
 <div className="error-fallback">
 <h2>出现了错误</h2>
 <details>
 {this.state.error && this.state.error.toString()}
 </details>
 </div>
 );
 }
 
 return this.props.children;
 }
}

// 使用错误边界
const App = () => {
 return (
 <ErrorBoundary>
 <Header />
 <Main />
 <Footer />
 </ErrorBoundary>
 );
};

2. 异步错误处理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


const useAsyncError = () => {
 const [error, setError] = useState(null);
 const [loading, setLoading] = useState(false);
 
 const execute = async (asyncFunction) => {
 try {
 setLoading(true);
 setError(null);
 const result = await asyncFunction();
 return result;
 } catch (err) {
 setError(err);
 throw err;
 } finally {
 setLoading(false);
 }
 };
 
 return { execute, error, loading };
};

// 使用示例
const DataComponent = () => {
 const [data, setData] = useState(null);
 const { execute, error, loading } = useAsyncError();
 
 const fetchData = async () => {
 const result = await execute(async () => {
 const response = await fetch('/api/data');
 if (!response.ok) throw new Error('请求失败');
 return response.json();
 });
 setData(result);
 };
 
 useEffect(() => {
 fetchData();
 }, []);
 
 if (loading) return <div>加载中...</div>;
 if (error) return <div>错误: {error.message}</div>;
 
 return <div>{JSON.stringify(data)}</div>;
};

测试策略

1. 组件单元测试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

describe('Counter组件', () => {
 test('初始值为0', () => {
 render(<Counter />);
 expect(screen.getByText('0')).toBeInTheDocument();
 });
 
 test('点击增加按钮，数值增1', () => {
 render(<Counter />);
 const incrementButton = screen.getByText('增加');
 fireEvent.click(incrementButton);
 expect(screen.getByText('1')).toBeInTheDocument();
 });
 
 test('点击减少按钮，数值减1', () => {
 render(<Counter />);
 const decrementButton = screen.getByText('减少');
 fireEvent.click(decrementButton);
 expect(screen.getByText('-1')).toBeInTheDocument();
 });
});

2. Hook测试

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import { renderHook, act } from '@testing-library/react';
import useCounter from './useCounter';

describe('useCounter Hook', () => {
 test('初始值正确', () => {
 const { result } = renderHook(() => useCounter(5));
 expect(result.current.count).toBe(5);
 });
 
 test('increment功能正常', () => {
 const { result } = renderHook(() => useCounter(0));
 
 act(() => {
 result.current.increment();
 });
 
 expect(result.current.count).toBe(1);
 });
});

项目结构建议

src/
├── components/ # 通用组件
│ ├── ui/ # UI基础组件
│ ├── layout/ # 布局组件
│ └── forms/ # 表单组件
├── pages/ # 页面组件
├── hooks/ # 自定义Hook
├── services/ # API服务
├── utils/ # 工具函数
├── constants/ # 常量定义
├── styles/ # 样式文件
└── __tests__/ # 测试文件

开发工具推荐

1. 开发环境

Create React App - 快速搭建项目
Vite - 更快的开发服务器
Next.js - 全栈React框架

2. 状态管理

Redux Toolkit - 简化的Redux
Zustand - 轻量级状态管理
React Query - 服务端状态管理

3. 样式解决方案

Styled Components - CSS-in-JS
Tailwind CSS - 实用优先的CSS框架
Emotion - 高性能CSS-in-JS库

总结

React开发最佳实践的核心是：

JavaScript开发实用技巧汇总

Mon, 15 Jan 2024 14:30:00 +0800

在JavaScript开发过程中，掌握一些实用的技巧能够大大提高我们的开发效率。今天分享一些我在项目中经常使用的JavaScript技巧。

1. 数组去重的几种方法

使用Set

1
2
3


const numbers = [1, 2, 2, 3, 3, 4, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

使用filter和indexOf

1

const uniqueNumbers = numbers.filter((item, index) => numbers.indexOf(item) === index);

2. 对象属性的简洁写法

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const name = "张三";
const age = 25;

// 传统写法
const person = {
 name: name,
 age: age
};

// ES6简洁写法
const person = { name, age };

3. 解构赋值的妙用

交换变量

1
2
3


let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2, 1

提取对象属性

1
2


const user = { name: "李四", age: 30, city: "北京" };
const { name, age } = user;

4. 链式操作符

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 可选链操作符
const user = {
 profile: {
 name: "王五"
 }
};

console.log(user?.profile?.name); // "王五"
console.log(user?.address?.street); // undefined (不会报错)

// 空值合并操作符
const defaultName = user?.name ?? "匿名用户";

5. 数组的高阶函数

map, filter, reduce的组合使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const products = [
 { name: "商品A", price: 100, category: "电子" },
 { name: "商品B", price: 200, category: "服装" },
 { name: "商品C", price: 150, category: "电子" }
];

// 筛选电子产品，计算总价
const totalPrice = products
 .filter(product => product.category === "电子")
 .map(product => product.price)
 .reduce((sum, price) => sum + price, 0);

console.log(totalPrice); // 250

6. 异步编程最佳实践

使用async/await处理异步操作

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


async function fetchUserData(userId) {
 try {
 const response = await fetch(`/api/users/${userId}`);
 const userData = await response.json();
 return userData;
 } catch (error) {
 console.error("获取用户数据失败:", error);
 throw error;
 }
}

Promise.all并发处理

1
2
3
4
5


async function fetchMultipleUsers(userIds) {
 const promises = userIds.map(id => fetchUserData(id));
 const users = await Promise.all(promises);
 return users;
}

7. 防抖和节流

防抖函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function debounce(func, delay) {
 let timeoutId;
 return function(...args) {
 clearTimeout(timeoutId);
 timeoutId = setTimeout(() => func.apply(this, args), delay);
 };
}

// 使用示例
const debouncedSearch = debounce((query) => {
 console.log("搜索:", query);
}, 300);

节流函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function throttle(func, delay) {
 let lastCall = 0;
 return function(...args) {
 const now = new Date().getTime();
 if (now - lastCall >= delay) {
 lastCall = now;
 func.apply(this, args);
 }
 };
}

总结

这些JavaScript技巧在日常开发中都非常实用。掌握这些技巧不仅能提高代码的可读性和性能，还能让我们的开发工作更加高效。