react常规面试题

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

‌虚拟滚动 ‌：使用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动态导入组件：

ini 复制代码

jsxCopy Code
const LazyComponent = React.lazy(() => import('./Component'));

配合Suspense设置加载态：

xml 复制代码

jsxCopy Code
<Suspense fallback={<Spinner/>}>
  <LazyComponent />
</Suspense>

结合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防御策略

‌自动转义 ‌：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审计‌：检测首屏加载、交互延迟等核心指标

‌异常监控‌：

ini 复制代码

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

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