JavaScript on Zampo Blog

每个前端都在用 React，但很多人把它学反了

Tue, 14 Apr 2026 15:00:00 +0800

你写了半年 React，还是会背 useState、useEffect、JSX。

但老板问：React 到底在解决什么问题？

你答不上来。

问题不在你，是很多人从一开始，就把 React 学反了。

每个前端都在用 React，但很多人把它学反了

Tue, 14 Apr 2026 15:00:00 +0800

你学了 React，但可能学反了。

不是你不会写 useState、useEffect，而是你一直没想明白：React 到底在解决什么问题。

很多前端工程师都是这样：能用 React 写页面，但说不清它和 jQuery 的根本差异在哪。

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支持组件有多个根节点：

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开发最佳实践的核心是：

2024年前端开发趋势预测

Sat, 20 Jan 2024 16:45:00 +0800

🌟 引言

2024年对于前端开发者来说是一个充满机遇的年份。随着Web技术的快速发展，新的框架、工具和最佳实践不断涌现。本文将深入分析今年前端开发的主要趋势，帮助开发者把握技术发展方向。

🚀 框架生态的演进

React 18+ 的成熟应用

React在2024年继续保持其主导地位，特别是以下特性的广泛应用：

并发特性

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


import { startTransition, useTransition } from 'react';

function SearchApp() {
 const [isPending, startTransition] = useTransition();
 const [searchQuery, setSearchQuery] = useState('');
 const [searchResults, setSearchResults] = useState([]);

 const handleSearch = (query) => {
 setSearchQuery(query);
 startTransition(() => {
 // 非紧急更新，不会阻塞用户输入
 setSearchResults(performExpensiveSearch(query));
 });
 };

 return (
 <div>
 <SearchInput onChange={handleSearch} />
 {isPending && <SearchSpinner />}
 <SearchResults results={searchResults} />
 </div>
 );
}

Suspense数据获取

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function ProfilePage() {
 return (
 <Suspense fallback={<ProfileSkeleton />}>
 <UserProfile />
 <Suspense fallback={<PostsSkeleton />}>
 <UserPosts />
 </Suspense>
 </Suspense>
 );
}

Vue 3的组合式API生态

Vue 3的组合式API已经成为主流开发方式：

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