4月14日 web学习笔记

一、React 高级特性
Context API
问题：在组件树中传递 props 太繁琐（prop drilling）。
解决方案：使用 Context API 实现跨组件的状态共享。
示例：
jsx
// 创建上下文
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 I am styled by theme context!;
}
Redux（状态管理）
核心概念：
Store：存储应用状态。
Action：描述发生的事情。
Reducer：根据 Action 更新状态。
示例：
jsx

// 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 (
    <div>
        <p>计数: {count}</p>
        <button onClick={() => dispatch(increment)}>+1</button>
        <button onClick={() => dispatch(decrement)}>-1</button>
    </div>
);

}

ReactDOM.render(


,
document.getElementById('root')
);
React Router（路由管理）
核心组件：
：提供路由功能。
：定义路由规则。

：创建导航链接。 示例：

import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

function App() {
return (

• 首页


• 关于我们

            <Switch>
                <Route exact path="/">
                    <Home />
                </Route>
                <Route path="/about">
                    <About />
                </Route>
            </Switch>
        </div>
    </Router>
);

}
二、Web 性能优化（进阶）
懒加载与代码分割
React.lazy：懒加载组件。
React.Suspense：显示加载状态。
示例：
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>
);
}
资源预加载

：预加载关键资源。 示例： HTML 图片优化 使用 WebP 格式。 响应式图片： HTML 服务端渲染（SSR） 使用 Next.js 实现服务端渲染。 示例（Next.js）： jsx

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

function Home({ data }) {
return

{data.title}

;
}

export default Home;
三、Web 安全（进阶）
内容安全策略（CSP）
防止 XSS 攻击。
示例（HTTP 响应头）：
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted.cdn.com
HTTP 安全头
X-Content-Type-Options: nosniff：防止 MIME 类型嗅探。
X-Frame-Options: DENY：防止点击劫持。
Strict-Transport-Security: max-age=31536000：强制 HTTPS。
CSRF 防护
使用 CSRF 令牌。
示例（Express）：
JavaScript

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> );
});

app.post('/', (req, res) => {
res.send('Form submitted');
});
输入验证与清理
使用 DOMPurify 清理用户输入的 HTML。
示例：
JavaScript

import DOMPurify from 'dompurify';

const userContent = '

安全内容

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

安全内容

'
四、实战练习
React 应用优化
使用 React.memo 和 useMemo 优化组件渲染。
示例：
jsx

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

昂贵组件

;
});

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

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

}
性能监控
使用 Lighthouse 分析应用性能。
使用 React Profiler 监控组件渲染性能。
安全防护
在 Express 应用中集成 Helmet 和 CSRF 保护。
使用 DOMPurify 清理用户输入的 HTML。