react基础1

一、React Hooks的闭包陷阱是如何产生的?如何避免?

  • 产生原因‌:Hook依赖的state在闭包中被锁定,当异步操作使用旧闭包值时会出现数据不一致
scss 复制代码
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setTimeout(() => {
      // 始终输出初始值0(闭包陷阱)
      console.log(count); 
    }, 3000);
  }, []); // ❌ 空依赖数组
}
  • 解决方案‌:
  1. 使用函数式更新:setCount(c => c + 1)
  2. 通过useRef保持最新值引用
  3. 正确声明依赖数组

二、如何实现自定义Hook的TypeScript类型推断?

使用泛型与返回元组类型:

scss 复制代码
function useToggle<T extends boolean>(initialState: T): [T, () => void] {
  const [state, setState] = useState(initialState);
  const toggle = () => setState(!state);
  return [state, toggle];
}
// 使用时可自动推断类型
const [isOpen, toggleOpen] = useToggle(false); 

三、React.memo与useMemo的核心区别是什么?

React.memo useMemo
作用对象 组件级缓存 值/计算结果的缓存
触发条件 props变化时重新渲染 依赖数组变化时重新计算
典型场景 避免子组件不必要的渲染 昂贵计算/复杂对象创建的优化

四、如何用React Context实现细粒度性能优化?

  1. 拆分Context‌:将高频更新与低频更新的数据分离
  2. 使用Selector模式‌:
ini 复制代码
const UserContext = createContext();
const useUser = (selector) => {
  const context = useContext(UserContext);
  return selector(context);
}
// 组件中按需消费
const username = useUser(ctx => ctx.username);
  1. 配合useMemo防止不必要渲染

五、解释React并发模式(Concurrent Mode)的三个核心API

  1. startTransition‌:标记非紧急状态更新
javascript 复制代码
jsxCopy Code
import { startTransition } from 'react';
// 用户输入立即响应,搜索结果延迟更新
startTransition(() => setSearchQuery(input));
  1. useDeferredValue‌:获取延迟版本的值
  2. Suspense‌:配合lazy加载组件时展示fallback

六、React服务端渲染(SSR)的hydration过程可能遇到什么问题?如何解决?

问题‌:

  • 客户端与服务端初始渲染不一致导致hydration失败
  • 第三方库依赖window对象引发SSR报错

解决方案‌:

  1. 使用useEffect/componentDidMount隔离浏览器API调用
  2. 服务端渲染时通过ReactDOMServer.renderToString生成静态HTML
  3. 客户端使用ReactDOM.hydrateRoot进行注水
  4. 检查data-reactroot属性是否一致

七、设计高阶组件时如何处理ref透传问题?

使用forwardRef与Ref转发:

javascript 复制代码
const withLogger = (WrappedComponent) => {
  return React.forwardRef((props, ref) => {
    useEffect(() => {
      console.log('Component mounted');
    }, []);
    
    return <WrappedComponent {...props} ref={ref} />;
  });
}

八、React错误边界的实现原理与限制

原理 ‌:

通过类组件的static getDerivedStateFromError()componentDidCatch()捕获子组件树错误

限制‌:

  • 无法捕获以下错误:

    1. 事件处理器中的错误
    2. 异步代码(setTimeout、请求回调)
    3. 服务端渲染错误
    4. 错误边界组件自身的错误

九、如何用React实现双向数据绑定?

方案 ‌:

组合使用valueonChange,支持自定义表单控件:

javascript 复制代码
function useModel(initialValue) {
  const [value, setValue] = useState(initialValue);
  return {
    value,
    onChange: e => setValue(e.target.value),
    // 支持非DOM场景
    setValue 
  };
}
// 使用
const inputProps = useModel('');
return <input {...inputProps} />;

十、React性能优化中如何正确使用useCallback?

黄金法则‌:

  1. 必要性检查‌:仅在以下场景使用:

    • 作为其他Hook的依赖项
    • 作为memoized组件的prop
  2. 稳定依赖‌:确保依赖数组完整且变化合理

  3. 反模式‌:避免在渲染层直接创建函数

scss 复制代码
// ✅ 正确用法
const handleClick = useCallback(() => {
  // 依赖state时需要声明依赖数组
}, [dep1, dep2]);

// ❌ 不必要的useCallback
const unstableFunc = useCallback(() => {}, []);
相关推荐
振鹏Dong1 小时前
超大规模数据场景(思路)——面试高频算法题目
算法·面试
uhakadotcom1 小时前
Python 与 ClickHouse Connect 集成:基础知识和实践
算法·面试·github
uhakadotcom1 小时前
Python 量化计算入门:基础库和实用案例
后端·算法·面试
写代码的小王吧2 小时前
【安全】Web渗透测试(全流程)_渗透测试学习流程图
linux·前端·网络·学习·安全·网络安全·ssh
uhakadotcom2 小时前
使用Python获取Google Trends数据:2025年详细指南
后端·面试·github
uhakadotcom2 小时前
使用 Python 与 Google Cloud Bigtable 进行交互
后端·面试·github
uhakadotcom2 小时前
使用 Python 与 BigQuery 进行交互:基础知识与实践
算法·面试
uhakadotcom2 小时前
使用 Hadoop MapReduce 和 Bigtable 进行单词统计
算法·面试·github
小小小小宇2 小时前
CSS 渐变色
前端
snow@li2 小时前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站