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

相关推荐
aesthetician2 分钟前
ReactFlow:构建交互式节点流程图的完全指南
前端·流程图·react
neo_dowithless6 分钟前
多语言维护太痛苦?我自研了一个翻译自动化 CLI 工具
前端·ai编程
小徐_23337 分钟前
老乡鸡也开源?我用 Trae SOLO 做了个像老乡鸡那样做饭小程序!
前端·trae
前端伪大叔42 分钟前
第13篇:🎯 如何精准控制买入卖出价格?entry/exit\_pricing 实战配置
javascript·python
荒诞英雄43 分钟前
菠萝滞销,帮帮我们(多个APP实例间pinia混乱)
前端·架构
llq_3501 小时前
pnpm / Yarn / npm 覆盖依赖用法对比
前端
麦当_1 小时前
ReAct 模式在 Neovate 中的应用
前端·javascript·架构
折七1 小时前
告别传统开发痛点:AI 驱动的现代化企业级模板 Clhoria
前端·后端·node.js
程序0071 小时前
纯html实现商品首页
前端
coderlin_1 小时前
BI磁吸布局 (2) 基于react-grid-layout扩展的布局方式
前端·react.js·前端框架