第十周总结

Java 学习第十周总结
一、学习概述
本周聚焦前端开发核心技术，深入学习 React 框架的高级特性与状态管理，掌握 Web 性能优化的进阶策略，探索 Web 安全的前沿防护技术，实践服务端渲染与静态生成，并深入了解前端工程化与测试体系。通过理论与实战结合，全面提升前端开发能力，为构建高性能、安全的现代化 Web 应用奠定基础。
二、React 高级特性与状态管理

  1. Context API 与跨组件状态共享
    解决 Prop Drilling 问题

// 创建上下文
const ThemeContext = React.createContext('light');
// 提供上下文值
function App() {
return (
<ThemeContext.Provider value="dark">

</ThemeContext.Provider>
);
}
// 消费上下文值
function Toolbar() {
return (




);
}
function ThemedButton() {
const theme = React.useContext(ThemeContext);
return ;
}
核心优势

  1. 避免多层组件间的 props 传递
  2. 实现全局状态的统一管理
  3. 配合 Hooks 使用更简洁高效
  4. Redux 与 Redux Toolkit
    Redux 核心概念

// Action定义
const increment = { type: 'INCREMENT' };
const decrement = { type: 'DECREMENT' };
// Reducer处理状态
function counterReducer(state = 0, action) {
switch (action.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
default: return state;
}
}
// Store创建
const store = Redux.createStore(counterReducer);
// 组件中使用
function Counter() {
const count = useSelector(state => state);
const dispatch = useDispatch();
return (


计数: {count}


<button onClick={() => dispatch(increment)}>+1
<button onClick={() => dispatch(decrement)}>-1

);
}
Redux Toolkit 简化实践

// 创建Slice
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1,
},
});
// 在组件中使用
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';
function Counter() {
const count = useSelector(state => state.counter);
const dispatch = useDispatch();
return (


计数: {count}


<button onClick={() => dispatch(increment())}>+1
<button onClick={() => dispatch(decrement())}>-1

);
}
3. React Router 路由管理

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
function App() {
return (











);
}
三、Web 性能优化进阶

  1. 懒加载与代码分割
    React.lazy 与 Suspense 实现

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
function App() {
return (
<React.Suspense fallback={

加载中...
}>
<Route path="/" element={} />
<Route path="/about" element={} />
</React.Suspense>
);
}
资源预加载

2. 图片优化与服务端渲染 响应式图片与 WebP 格式 响应式图片 Next.js 服务端渲染示例

// pages/index.js
export async function getServerSideProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}
function Home({ data }) {
return

{data.title}

;
}
四、Web 安全进阶实践

  1. 内容安全策略（CSP）
    HTTP 响应头配置

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com; img-src *;
2. CSRF 防护与输入验证
Express 框架中的 CSRF 防护

const csrf = require('csurf');
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: false }));
app.use(csrf());
app.get('/', (req, res) => {
res.send( <form action="/" method="POST"> <input type="hidden" name="_csrf" value="${req.csrfToken()}"> <button type="submit">Submit</button> </form> );
});
DOMPurify 清理用户输入

import DOMPurify from 'dompurify';
const userContent = '

安全内容

';
const cleanContent = DOMPurify.sanitize(userContent);
console.log(cleanContent); // 输出：

安全内容


五、服务端渲染与 GraphQL

  1. 服务端渲染（SSR）与静态生成（SSG）
    Next.js 中的 SSG 实现

// pages/about.js
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return { props: { data } };
}
function About({ data }) {
return

{data.title}

;
}
2. GraphQL 与 Apollo Client
Apollo Server 搭建

const { ApolloServer, gql } = require('apollo-server');
const typeDefs = gql type Post { id: ID! title: String! content: String! } type Query { getPosts: [Post] } ;
const posts = [
{ id: '1', title: 'Hello World', content: 'This is my first post' },
];
const resolvers = {
Query: {
getPosts: () => posts,
},
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(Server ready at ${url}));
Apollo Client 查询数据

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:4000',
cache: new InMemoryCache(),
});
const GET_POSTS = gql query GetPosts { getPosts { id title content } } ;
function App() {
const { loading, error, data } = useQuery(GET_POSTS);
if (loading) return

加载中...

;
if (error) return

出错: {error.message}

;
return (

{data.getPosts.map(post => (

{post.title}


{post.content}



))}

);
}
六、前端工程化与测试

  1. Vite 与 Webpack 构建工具
    Vite 快速配置

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
});
Webpack 优化配置

// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const CssNanoPlugin = require('cssnano-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[contenthash].js',
chunkFilename: 'chunk.[contenthash].js',
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
],
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
new CssNanoPlugin(),
],
splitChunks: {
chunks: 'all',
},
},
devServer: {
port: 3000,
hot: true,
},
};
2. 前端测试体系
Jest 单元测试

// Counter.test.js
import React from 'react';
import Counter from './Counter';
import { render, screen, fireEvent } from '@testing-library/react';
test('计数器加减功能', () => {
render();
const incrementButton = screen.getByRole('button', { name: '+1' });
const decrementButton = screen.getByRole('button', { name: '-1' });
const countElement = screen.getByText('计数: 0');
fireEvent.click(incrementButton);
expect(screen.getByText('计数: 1')).toBeInTheDocument();
fireEvent.click(decrementButton);
expect(screen.getByText('计数: 0')).toBeInTheDocument();
});
Cypress 端到端测试

// cypress/integration/app.spec.js
describe('App', () => {
beforeEach(() => {
cy.visit('http://localhost:3000');
});
it('计数器加减功能', () => {
cy.contains('计数: 0');
cy.get('button').contains('+1').click();
cy.contains('计数: 1');
cy.get('button').contains('-1').click();
cy.contains('计数: 0');
});
});
七、TypeScript 实践

  1. 基础类型与接口定义
    变量与数组类型

let name: string = '张三';
let age: number = 25;
let isStudent: boolean = true;
let names: string[] = ['张三', '李四'];
let ages: Array = [25, 30];
let user: [string, number] = ['张三', 25];
接口与类型别名

interface User {
name: string;
age: number;
isActive?: boolean;
}
type Point = {
x: number;
y: number;
};
const user: User = {
name: '张三',
age: 25,
};
const point: Point = { x: 1, y: 2 };
2. 函数与类的类型定义
函数类型

function add(a: number, b: number): number {
return a + b;
}
const add2: (a: number, b: number) => number = (a, b) => a + b;
类的类型

class Person {
name: string;
constructor(name: string) {
this.name = name;
}
greet(): string {
return Hello, ${this.name};
}
}
const person = new Person('张三');
console.log(person.greet()); // 输出：Hello, 张三
八、本周学习总结与反思

  1. 学习成果
  2. 掌握 React Context API 与 Redux Toolkit，实现复杂状态管理
  3. 熟练运用 React.lazy 与 Suspense 实现组件懒加载，提升应用性能
  4. 理解 CSP、CSRF 等安全策略，能实现基本的 Web 安全防护
  5. 掌握 Next.js 的 SSR 与 SSG 模式，提升首屏加载速度与 SEO
  6. 熟悉 Vite 与 Webpack 构建流程，能配置优化生产构建
  7. 建立前端测试体系，掌握 Jest 单元测试与 Cypress 端到端测试
  8. 熟练使用 TypeScript，提升代码类型安全性与可维护性
  9. 存在问题
  10. React 悬念（Suspense）与数据获取库的集成不够熟练
  11. WebAssembly 与 WebGL 的底层原理理解不足
  12. 大型项目中 Redux 状态管理的最佳实践经验欠缺
  13. TypeScript 泛型与高级类型特性应用不够深入
  14. 改进方向
  15. 深入学习 React Suspense 与数据获取库的集成，如 react-query
  16. 学习 WebAssembly 的 Rust 开发，实践高性能计算场景
  17. 研究大型项目中的 Redux 架构设计，如领域驱动设计模式
  18. 深入学习 TypeScript 泛型、条件类型等高级特性
  19. 下周计划
  20. 学习 WebAssembly 开发，使用 Rust 编写高性能模块
  21. 深入研究 WebGL 与 Three.js，实现 3D 图形渲染
  22. 学习微前端架构，实现多个前端应用的集成
  23. 实践 TypeScript 高级类型，提升复杂场景下的类型定义能力
  24. 阅读《React 设计模式》相关章节，提升组件设计能力
posted @ 2025-06-15 21:05  执笔诉相思  阅读(14)  评论(0)    收藏  举报