4月15日 web学习笔记

一、React 高级应用与最佳实践
性能优化
React.memo：优化函数组件的渲染。
useMemo 和 useCallback：缓存计算结果和函数引用。
示例：
jsx

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

昂贵组件

;
});

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

const memoizedCallback = useCallback(() => {
    console.log('回调函数被调用');
}, [count]);

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

}
Hooks 的高级用法
useReducer：管理复杂状态逻辑。
useContext：结合 Context API 使用。
示例：

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 (



);
}
React 悬念（Suspense）
数据获取：使用 react-fetching-library。
示例：
jsx

const resource = fetchData('https://api.example.com/data');

function DataComponent() {
const data =Suspense.use(resource);
return

{data.title}

;
}

function App() {
return (
<Suspense fallback={

加载中...

}>


);
}
二、WebAssembly（Wasm）
WebAssembly 简介
定义：一种低级的类汇编语言，运行在现代浏览器中。
优势：高性能、跨平台。
使用 Rust 编写 WebAssembly
安装工具链：
bash

curl https://sh.rustup.rs -sSf | sh
rustup target add wasm32-unknown-unknown
cargo install wasm-bindgen-cli
示例代码：
rust

// src/lib.rs
use wasm_bindgen::prelude:😗;

[wasm_bindgen]

pub fn add(a: i32, b: i32) -> i32 {
a + b
}
编译和使用：
bash

wasm-pack build --target web
在 JavaScript 中调用 WebAssembly
示例：
JavaScript

import init, { add } from './pkg/my_wasm_module.js';

async function run() {
await init();
console.log(add(2, 3)); // 输出：5
}

run();
三、WebGL 与图形渲染
WebGL 基础
定义：JavaScript API，用于在浏览器中渲染 2D 和 3D 图形。
核心概念：
着色器（Shaders）：用于定义图形渲染的 GLSL 代码。
缓冲区（Buffers）：存储顶点数据。
纹理（Textures）：图像数据。
使用 Three.js 简化 WebGL
安装：
bash

npm install three
示例：

import * as THREE from 'three';

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 动画
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}

animate();
四、实战练习
React 懒加载与性能优化
创建一个包含多个页面的 React 应用。
使用 React.lazy 和 Suspense 实现懒加载。
使用 useMemo 和 useCallback 优化性能。
WebAssembly 实践
使用 Rust 编写一个简单的 WebAssembly 模块。
在 JavaScript 中调用该模块，执行计算任务。
Three.js 3D 渲染
创建一个简单的 3D 场景，包含旋转的立方体。
添加光照和材质效果。