一、如何优化长列表渲染性能?列举至少三种实现方案
- 虚拟滚动 :使用
react-window
或react-virtualized
库,仅渲染可视区域DOM元素,减少内存占用 - 分片渲染 :通过
requestIdleCallback
将长列表拆分为多个渲染块,避免主线程阻塞 - 记忆化列表项 :结合
React.memo
与稳定key
值,避免子组件无效重渲染
二、在复杂表单场景中,如何避免useState导致的多次渲染?
采用useReducer
统一管理表单状态,通过单次dispatch处理多个字段更新,相比多个useState
减少渲染次数
go
const [state, dispatch] = useReducer((prev, action) => {
switch(action.type) {
case 'UPDATE_FIELD':
return {...prev, [action.field]: action.value};
default: return prev;
}
}, initialValues);
三、如何实现React组件的按需加载?描述具体实现步骤
-
使用
React.lazy
动态导入组件:inijsxCopy Code const LazyComponent = React.lazy(() => import('./Component'));
-
配合
Suspense
设置加载态:xmljsxCopy Code <Suspense fallback={<Spinner/>}> <LazyComponent /> </Suspense>
-
结合Webpack魔法注释实现预加载:
gojsxCopy Code import(/* webpackPrefetch: true */ './Component')
36
四、React事件系统中如何阻止冒泡?与原生DOM有何区别?
调用e.stopPropagation()
,但React事件是合成事件(SyntheticEvent),实际在document层统一委托处理。与原生区别:
- React事件自动处理跨浏览器兼容
- 原生
e.preventDefault()
可能不生效,需调用合成事件方法
五、如何用Hooks实现组件卸载时的资源清理?
在useEffect
返回清理函数:
scss
useEffect(() => {
const timer = setInterval(...);
return () => {
clearInterval(timer); // 清理定时器
socket.disconnect(); // 断开WebSocket
};
}, []);
此函数会在组件卸载或依赖变更前执行37
六、描述React项目中常见的XSS防御策略
- 自动转义 :JSX中直接插入文本内容会被自动转义(
{userInput}
) - 危险内容消毒 :使用
DOMPurify
处理富文本内容 - 避免危险API :禁用
dangerouslySetInnerHTML
,必须使用时严格校验内容来源
七、如何用Hooks实现防抖/节流函数?
使用useRef
保存定时器引用,避免重复创建:
ini
const debounce = (fn, delay) => {
const timerRef = useRef(null);
return (...args) => {
clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => fn(...args), delay);
};
};
在useEffect
或事件处理器中调用
八、如何实现跨组件全局状态共享?对比三种方案
方案 | 适用场景 | 特点 |
---|---|---|
Context API | 低频更新数据(主题/用户信息) | 简单但性能敏感,需配合memo优化 |
Redux Toolkit | 高频更新/复杂状态逻辑 | 支持中间件、时间旅行调试 |
Recoil | 原子级状态管理(表单/异步状态) | 更细粒度控制,自动渲染优化 |
九、如何用React实现动态表单生成器?关键实现思路
- 配置化驱动:JSON配置描述表单结构
- 递归渲染:根据配置类型(input/select)动态渲染组件
- 状态聚合:通过
useFieldArray
(react-hook-form)管理动态字段
ini
const fields = [{ type: 'text', name: 'username' }, { type: 'email', name: 'email' }];
fields.map(field => <DynamicInput key={field.name} {...field} />);
十、描述React项目性能监控方案
-
DevTools Profiler:分析组件渲染耗时和次数
-
Lighthouse审计:检测首屏加载、交互延迟等核心指标
-
异常监控:
iniuseEffect(() => { const unhandledRejectionHandler = (e) => { Sentry.captureException(e.reason); }; window.addEventListener('unhandledrejection', unhandledRejectionHandler); return () => window.removeEventListener(...); }, []);
结合Sentry/NewRelic实现错误上报