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

相关推荐
web守墓人3 小时前
【gpt生成-其一】以go语言为例,详细描述一下 :语法规范BNF/EBNF形式化描述
前端·gpt·golang
_一条咸鱼_5 小时前
Android Picasso 请求构建模块深度剖析(一)
android·面试·android jetpack
互联网搬砖老肖5 小时前
Selenium2+Python自动化:利用JS解决click失效问题
javascript·python·自动化
_一条咸鱼_5 小时前
Android Picasso 显示模块深度剖析(六)
android·面试·android jetpack
pink大呲花6 小时前
使用 Axios 进行 API 请求与接口封装:打造高效稳定的前端数据交互
前端·vue.js·交互
samuel9186 小时前
uniapp通过uni.addInterceptor实现路由拦截
前端·javascript·uni-app
泯泷6 小时前
JavaScript随机数生成技术实践 | 为什么Math.random不是安全的随机算法?
前端·javascript·安全
benben0446 小时前
Unity3D仿星露谷物语开发35之锄地动画
前端·游戏·游戏引擎
WebInfra6 小时前
🔥 Midscene 重磅更新:支持 AI 驱动的 Android 自动化
android·前端·测试
八了个戒6 小时前
「数据可视化 D3系列」入门第八章:动画效果详解(让图表动起来)
开发语言·前端·javascript·数据可视化