01
1. react19 有什么新特性?
| 类别 | 特性名称 | 简介 |
|---|---|---|
| 🧠 状态管理 | use hook（跨组件共享资源） | 原本只在 Server Component 中，现在 Client 也能用 |
| 🧱 DOM 支持 | 新的 formActions、formState 支持 | 支持 <form> 更现代的处理方式 |
| 💣 报错机制升级 | 自动 error recovery（无需 Error Boundary） | 渲染错误会自动恢复 |
| 🧵 资源处理 | useFormStatus, useFormState, useOptimistic | 用于更好的表单和异步体验 |
| 🛠️ 组件生命周期 | useEffectEvent 新 Hook | 避免 stale closure 的 Hook |
| 💥 异常处理 | 新的 use + throw 控制流 | Suspense 支持异步函数错误处理 |
| 🧪 React Server Components | 默认启用（不再实验） | 更简单构建服务端组件 |
2. react 并发渲染机制?
一、核心设计原理
时间切片（Time Slicing）
- 将渲染任务拆分为 5ms 的微任务块
- 通过浏览器空闲时间（
requestIdleCallback）分片执行 - 优势：避免长任务阻塞主线程，保持页面响应
可中断渲染（Interruptible Rendering）
- 构建 Fiber 树过程中可暂停/恢复
- 高优先级任务（如用户输入）可中断低优渲染
- 示例场景：用户输入时暂停大数据列表渲染
双缓冲机制
- Current Tree：当前显示的 Fiber 树
- WorkInProgress Tree：后台构建的新版本
- 更新完成后原子性切换引用，避免渲染中间状态
二、关键实现机制
Fiber 架构升级
- 每个组件对应一个 Fiber 节点
- 链表结构存储，支持任务暂停/回溯
- 包含
child、sibling、return指针
3. 如何手动实现图片懒加载?
懒加载是为了延迟加载非视口内的图片，减少初始页面加载时间和带宽使用。手动实现的话，通常需要用到Intersection Observer API，或者传统的滚动事件监听。
首先，如何标记需要懒加载的图片。通常是将真实的图片URL放在data属性里，比如data-src，而src放占位图或者空。然后，检测这些图片是否进入视口，动态替换src属性。 使用Intersection Observer来监听目标元素，当元素进入视口时触发回调函数，加载图片。这里需要注意的是，一旦图片加载完成，应该取消观察，避免重复加载。 另外，要考虑性能优化。比如，使用函数节流（throttle）处理滚动事件，避免频繁触发检查函数。对于已经加载过的图片，可以添加一个类名或者属性标记，防止重复处理。 还有，如何处理图片加载失败的情况。可能需要设置一个默认的错误处理图片，或者在加载失败时进行重试。
方案 ：Intersection Observer（现代浏览器首选）
document.addEventListener('DOMContentLoaded', () => {
const lazyImages = document.querySelectorAll('img.lazy');
// 创建观察器实例
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img); // 加载后停止观察
}
});
}, {
rootMargin: '100px', // 预加载边界扩展
threshold: 0.01
});
lazyImages.forEach(img => observer.observe(img));
});
4. xss 如何防止?
一、输入处理与验证
- 严格白名单验证，正则过滤；强制的类型转换；
- 内容安全编码
| 输出场景 | 编码方式 | 示例工具 |
|---|---|---|
| HTML 内容 | HTML Entity 编码 | textContent 属性 |
| HTML 属性 | 属性值编码 | setAttribute |
| URL 参数 | URL 编码 | encodeURIComponent |
| CSS 值 | CSS 十六进制编码 | CSS.escape() |
| JavaScript 内嵌 | Unicode 转义 | JSON.stringify |
二、前端框架安全实践
-
React 安全特性 自动转义机制：
// 安全示例 <div>{userContent}</div> // 自动转义 HTML // 危险场景 <div dangerouslySetInnerHTML={{__html: content}} /> // 必须人工审核内容 -
现代模板引擎 安全输出语法：
<!-- Handlebars 安全输出 --> {{sanitize content}}
三、浏览器安全策略
- 内容安全策略（CSP）
Content-Security-Policy:
default-src 'self';
script-src 'self' https://trusted.cdn.com;
style-src 'self' 'unsafe-inline';
img-src * data:;
- 安全 Cookie 设置
Set-Cookie: sessionId=abc123;
HttpOnly;
Secure;
SameSite=Strict
四、服务端防护措施
-
- 响应头安全设置
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
