4月11日 web学习笔记

一、前端框架入门（React）
React 基础
组件化开发：React 使用组件构建用户界面。
JSX 语法：JavaScript 和 HTML 的混合语法。
示例：
jsx

function Welcome(props) {
return

Hello, {props.name}

;
}

const element = ;
ReactDOM.render(element, document.getElementById('root'));
状态管理
状态（State）：组件内部的数据。
属性（Props）：父组件传递给子组件的数据。
示例：
jsx

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}

increment = () => {
    this.setState({ count: this.state.count + 1 });
}

render() {
    return (
        <div>
            <p>计数: {this.state.count}</p>
            <button onClick={this.increment}>+1</button>
        </div>
    );
}

}

ReactDOM.render(, document.getElementById('root'));
生命周期方法
挂载阶段：componentDidMount。
更新阶段：componentDidUpdate。
卸载阶段：componentWillUnmount。
React Hooks
useState：在函数组件中使用状态。
useEffect：在函数组件中执行副作用操作。
示例：
jsx

import React, { useState, useEffect } from 'react';

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

useEffect(() => {
    console.log('计数更新了');
}, [count]);

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

}

export default Counter;
二、Web 性能优化
资源加载优化
懒加载（Lazy Loading）：延迟加载非关键资源。
示例：
HTML

代码分割 使用 Webpack 或其他打包工具实现代码分割。 示例（React + React.lazy）： jsx

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>
);
}
缓存策略
使用 Cache-Control 和 ETag。
服务端缓存（如 Redis）。
图片优化
使用现代图片格式（如 WebP）。
响应式图片：
HTML

三、Web 安全 常见的 Web 攻击 XSS（跨站脚本攻击）：防止用户输入中包含恶意脚本。 CSRF（跨站请求伪造）：验证请求来源。 SQL 注入：使用参数化查询。 安全最佳实践 内容安全策略（CSP）：限制外部资源加载。 HTTPS：确保数据传输安全。 输入验证：对用户输入进行严格验证。 安全库和工具 Helmet：为 Express 应用设置安全 HTTP 头。 DOMPurify：清理可能包含 XSS 的 HTML。 四、实战练习 React 应用开发 创建一个简单的待办事项应用： 使用 useState 管理待办事项列表。 使用 useEffect 加载本地存储数据。 实现添加、删除和标记完成功能。 性能优化实践 对一个现有应用进行性能分析（使用 Lighthouse）。 实现图片懒加载和代码分割。 安全防护 在一个 Express 应用中集成 Helmet。 使用 DOMPurify 清理用户输入的 HTML 内容。