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实现错误上报‌

相关推荐
2501_906801206 分钟前
BY组态-低代码web可视化组件
前端·物联网·低代码·数学建模·前端框架
sma2mmm15 分钟前
微前端实现方案对比Qiankun VS npm组件
前端·前端框架·npm
月起星九18 分钟前
为什么package.json里的npm和npm -v版本不一致?
前端·npm·node.js
孤客网络科技工作室29 分钟前
每天学一个 Linux 命令(7):cd
java·linux·前端
JSON_L33 分钟前
Vue 组件通信 - Ref组件通信
javascript·vue.js·ecmascript
努力的搬砖人.34 分钟前
Vue 2 和 Vue 3 有什么区别
前端·vue.js·经验分享·面试
Json_181790144801 小时前
python采集淘宝拍立淘按图搜索API接口,json数据示例参考
服务器·前端·数据库
uhakadotcom1 小时前
轻松掌握XXL-JOB:分布式任务调度的利器
后端·面试·github
珹洺1 小时前
Java-servlet(十)使用过滤器,请求调度程序和Servlet线程(附带图谱表格更好对比理解)
java·开发语言·前端·hive·hadoop·servlet·html
Fri_1 小时前
Vue 使用 xlsx 插件导出 excel 文件
javascript·vue.js·excel