4月30日 web学习笔记

一、React 高级主题与最佳实践
React Hooks 的高级用法
useReducer：管理复杂状态逻辑。
useContext：结合 Context API 使用。
示例：
jsx

const themeReducer = (state, action) => {
switch (action.type) {
case 'light': return 'light';
case 'dark': return 'dark';
default: return state;
}
};

const ThemeContext = React.createContext();

function ThemeProvider({ children }) {
const [theme, dispatch] = useReducer(themeReducer, 'light');
return (
<ThemeContext.Provider value={{ theme, dispatch }}>
{children}
</ThemeContext.Provider>
);
}

function ThemedButton() {
const { theme, dispatch } = useContext(ThemeContext);
return (

<button className={theme} onClick={() => dispatch({ type: theme === 'light' ? 'dark' : 'light' })}>
切换主题

);
}

function App() {
return (



);
}
自定义 Hooks
定义：提取组件逻辑，促进复用。
示例：
jsx

function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);

const increment = () => {
    setCount(count + 1);
};

const decrement = () => {
    setCount(count - 1);
};

return { count, increment, decrement };

}

function Counter() {
const { count, increment, decrement } = useCounter(0);

return (
    <div>
        <p>计数: {count}</p>
        <button onClick={increment}>+1</button>
        <button onClick={decrement}>-1</button>
    </div>
);

}
React.memo 与 useMemo
定义：优化组件渲染性能。
示例：
jsx

const ExpensiveComponent = React.memo(() => {
console.log('渲染昂贵组件');
return

昂贵组件

;
});

function ParentComponent() {
const [count, setCount] = useState(0);

const memoizedValue = useMemo(() => {
    console.log('重新计算值');
    return count * 2;
}, [count]);

return (
    <div>
        <p>计数: {count}</p>
        <button onClick={() => setCount(count + 1)}>+1</button>
        <p>计算值: {memoizedValue}</p>
        <ExpensiveComponent />
    </div>
);

}
二、前端工程化与构建工具（进阶）
Vite 与 Webpack 的比较与优化
Vite：适合开发环境，启动快。
Webpack：适合生产环境，优化强。
性能优化：
代码分割：将代码拆分成多个 chunk。
Tree Shaking：移除未使用的代码。
压缩：使用 TerserPlugin 压缩 JS，CSSNano 压缩 CSS。
构建优化
懒加载：按需加载组件和路由。
资源预加载：提前加载关键资源。
CDN 分发：使用 CDN 加速静态资源加载。
三、Web 安全与性能（进阶）
安全防护
CSP：限制外部资源加载。
HTTP 安全头：使用 Helmet 等工具设置安全头。
CSRF 与 XSS 防护：综合使用令牌验证和输入清理。
性能优化
减少重排和重绘：批量更新 DOM。
优化 CSS 交付：内联临界 CSS，异步加载非临界 CSS。
使用 Lighthouse 进行性能审计：识别性能瓶颈并优化。
四、实战练习
React 高级应用开发
使用 useReducer 和 useContext 构建一个状态管理应用。
创建自定义 Hooks，提取可复用逻辑。
前端构建优化
配置 Webpack 实现代码分割和 Tree Shaking。
使用 Vite 构建开发环境，对比 Webpack 的生产环境配置。
Web 安全与性能优化
为一个 React 项目配置 CSP 和其他安全头。
使用 Lighthouse 对项目进行性能审计，优化关键渲染路径。