react常规面试题

一、如何优化长列表渲染性能?列举至少三种实现方案

  1. 虚拟滚动 ‌:使用react-windowreact-virtualized库,仅渲染可视区域DOM元素,减少内存占用‌
  2. 分片渲染 ‌:通过requestIdleCallback将长列表拆分为多个渲染块,避免主线程阻塞‌
  3. 记忆化列表项 ‌:结合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组件的按需加载?描述具体实现步骤

  1. 使用React.lazy动态导入组件:

    ini 复制代码
    jsxCopy Code
    const LazyComponent = React.lazy(() => import('./Component'));
  2. 配合Suspense设置加载态:

    xml 复制代码
    jsxCopy Code
    <Suspense fallback={<Spinner/>}>
      <LazyComponent />
    </Suspense>
  3. 结合Webpack魔法注释实现预加载:

    go 复制代码
    jsxCopy 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防御策略

  1. 自动转义 ‌:JSX中直接插入文本内容会被自动转义({userInput})‌
  2. 危险内容消毒 ‌:使用DOMPurify处理富文本内容
  3. 避免危险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实现动态表单生成器?关键实现思路

  1. 配置化驱动:JSON配置描述表单结构
  2. 递归渲染:根据配置类型(input/select)动态渲染组件
  3. 状态聚合:通过useFieldArray(react-hook-form)管理动态字段‌
ini 复制代码
const fields = [{ type: 'text', name: 'username' }, { type: 'email', name: 'email' }];
fields.map(field => <DynamicInput key={field.name} {...field} />);

十、描述React项目性能监控方案

  1. DevTools Profiler‌:分析组件渲染耗时和次数‌

  2. Lighthouse审计‌:检测首屏加载、交互延迟等核心指标

  3. 异常监控‌:

    ini 复制代码
    useEffect(() => {
      const unhandledRejectionHandler = (e) => {
        Sentry.captureException(e.reason);
      };
      window.addEventListener('unhandledrejection', unhandledRejectionHandler);
      return () => window.removeEventListener(...);
    }, []);

    结合Sentry/NewRelic实现错误上报‌

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止7 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞8 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作