如果你是在准备 React Native 面试，下面这套比较适合刷「高频手写 + 实操」题，尤其是 1～3 年经验的 RN 开发。
一、最高频：必会手写
-
防抖 debounce
-
搜索框输入
-
防止重复请求
-
-
节流 throttle
-
Scroll
-
点击按钮
-
高频事件
-
-
Promise 并发控制
-
限制同时请求数量
-
Promise.all -
失败重试
-
-
深拷贝 / 浅拷贝
-
deepClone -
循环引用处理
-
-
手写
Promise.allPromise.myAll = function (promises) {} -
手写
bind / call / apply -
数组去重
unique([1, 2, 2, 3]) -
数组扁平化
flatten([1, [2, [3, 4]]]) -
实现
map / filter / reduce -
LRU 缓存
-
RN 本地缓存
-
接口数据缓存
-
二、React 高频手写题
1. 手写 useDebounce
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(timer);
}, [value, delay]);
return debouncedValue;
}面试官通常会继续问：
-
为什么要 cleanup？
-
useEffect什么时候执行？ -
如果组件卸载了怎么办？
-
debounce 和 throttle 的区别？
2. 手写 usePrevious
function usePrevious(value) {
const ref = useRef();
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}3. 手写 useDebounceFn
function useDebounceFn(fn, delay) {
const timerRef = useRef(null);
return useCallback((...args) => {
clearTimeout(timerRef.current);
timerRef.current = setTimeout(() => {
fn(...args);
}, delay);
}, [fn, delay]);
}4. 手写一个简易 useRequest
需要考虑：
loading
data
error
execute
cancel
retry例如：
const { data, loading, error, run } = useRequest(fetchUser);这是非常典型的实战题。
三、React Native 高频实操题
这些比纯 JS 手写题更值得重点准备。
1. FlatList 无限滚动
要求：
进入页面
↓
请求第一页
↓
上拉加载下一页
↓
loading
↓
没有更多数据
↓
显示 Footer重点考：
<FlatList
data={list}
renderItem={renderItem}
onEndReached={loadMore}
onEndReachedThreshold={0.5}
ListFooterComponent={...}
/>面试官很可能继续追问：
-
为什么
onEndReached会触发多次？ -
如何防止重复请求？
-
keyExtractor怎么写？ -
FlatList 为什么比 ScrollView 性能好？
-
windowSize/initialNumToRender/maxToRenderPerBatch有什么作用？
2. 下拉刷新 + 上拉加载
这是 RN 非常高频的实操题。
需要实现：
Pull to Refresh
↓
重新请求第一页
↓
覆盖旧数据
Load More
↓
请求下一页
↓
append最好能够现场写完整组件。
3. 搜索列表
例如：
实现一个用户搜索页面。
要求：
输入关键词
↓
300ms debounce
↓
请求 API
↓
loading
↓
展示结果
↓
处理空数据
↓
处理错误
↓
取消过期请求这里可以同时考：
-
useEffect -
useRef -
debounce
-
AbortController
-
FlatList
-
状态管理
这是非常值得重点练的一道综合题。
4. 图片列表优化
例如：
1000 张图片的列表如何保证流畅？
需要能说出：
-
FlatList -
图片缓存
-
固定高度
-
getItemLayout -
keyExtractor -
减少 render
-
React.memo -
避免 inline object/function
-
控制
windowSize -
分页
-
缩略图
-
避免一次加载大量原图
5. 自定义 Modal
要求实现：
半透明背景
↓
居中弹窗
↓
点击确定 / 取消
↓
点击背景关闭继续升级：
如何做成全局 Modal？
可以考：
Context
Provider
Portal
ref四、RN 导航高频实操
1. 登录态导航
经典题：
App
│
├── 未登录
│ └── Login
│
└── 已登录
└── Main
├── Home
├── Profile
└── Settings考：
-
React Navigation
-
token
-
AsyncStorage
-
登录状态恢复
-
Splash
-
NavigationContainer
2. Token 过期自动刷新
这是偏中高级的实战题。
请求 API
↓
401
↓
refresh token
↓
获取新 access token
↓
重试原请求难点：
多个请求同时 401 怎么办？
不能让 5 个请求同时 refresh。
需要设计：
401
↓
refreshPromise
↓
其他请求等待同一个 Promise
↓
refresh 成功
↓
全部重试这个题很能区分普通 RN 开发和有实际项目经验的人。
五、RN 性能优化手写 / 实操
高频题：为什么 FlatList 滚动卡顿？
需要从几个层面回答：
JS Thread
UI Thread
Bridge / JSI
↓
render 太多
↓
图片太大
↓
频繁 setState
↓
组件重复渲染
↓
列表配置不合理然后给解决方案。
高频题：如何判断组件为什么重复渲染？
可以使用：
React.memo以及：
useMemo
useCallback但面试时最好强调：
不是所有地方都应该使用 useMemo/useCallback。
应该结合 profiler / render 次数判断瓶颈，而不是无脑优化。
六、RN 高频实操：手写一个聊天页面
这个题非常适合准备中高级 RN 面试。
要求：
聊天列表
↓
FlatList
↓
发送消息
↓
输入框
↓
键盘处理
↓
自动滚动到底部
↓
分页加载历史消息
↓
WebSocket 实时消息继续追问：
-
WebSocket 断线怎么办？
-
如何重连？
-
如何保证消息不重复？
-
如何保证消息顺序？
-
App 进入后台怎么办？
-
如何处理键盘遮挡？
七、我建议你重点刷这 15 道
如果时间有限，优先级可以这样排：
| 优先级 | 题目 |
|---|---|
| ⭐⭐⭐⭐⭐ | FlatList 分页加载 |
| ⭐⭐⭐⭐⭐ | 下拉刷新 + 上拉加载 |
| ⭐⭐⭐⭐⭐ | 搜索 + debounce |
| ⭐⭐⭐⭐⭐ | 登录态 Navigation |
| ⭐⭐⭐⭐⭐ | Token 自动刷新 |
| ⭐⭐⭐⭐⭐ | React Hooks 手写 |
| ⭐⭐⭐⭐ | debounce / throttle |
| ⭐⭐⭐⭐ | Promise.all |
| ⭐⭐⭐⭐ | 并发请求控制 |
| ⭐⭐⭐⭐ | 图片列表性能优化 |
| ⭐⭐⭐⭐ | 全局 Modal |
| ⭐⭐⭐⭐ | 聊天页面 |
| ⭐⭐⭐ | deepClone |
| ⭐⭐⭐ | LRU |
| ⭐⭐⭐ | 手写 bind/call/apply |
如果是准备「现场手写」，我尤其建议练成这 5 个完整项目题：
① 搜索页面
Input → debounce → API → FlatList → loading/error/empty
② 商品列表
下拉刷新 → 分页 → 无限滚动 → 防重复请求
③ 登录系统
Login → token → 持久化 → Navigation → token refresh
④ 聊天页面
FlatList → 输入框 → 键盘 → WebSocket → 自动滚动
⑤ 通用请求 Hook
useRequest → loading/data/error/cancel/retry/cache
这 5 个基本可以把 JS + React + RN + 网络请求 + 性能 + 工程思维 串起来。