[{"data":1,"prerenderedAt":101},["ShallowReactive",2],{"$fASE0hsf87MNJlJYdtoflLOhEkXTbQafb3vAXnof6J9Y":3,"$f3Fq3Vvc1RPyMVhHFov2pUb_iMkT70EUmvvI_ji0wSyQ":16},{"title":4,"date":5,"category":6,"readTime":7,"tags":8,"content":12,"_excerpt":13,"id":14,"_path":15},"React Native 性能优化实战","2026-04-15","技术教程","10 分钟",[9,10,11],"React Native","性能","移动端","\u003Ch1>React Native 性能优化实战\u003C\u002Fh1>\n\u003Ch2>性能问题的常见表现\u003C\u002Fh2>\n\u003Cp>在开发 React Native 应用时，我们经常会遇到以下性能问题：\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>界面卡顿\u003C\u002Fstrong>：列表滚动不流畅\u003C\u002Fli>\n\u003Cli>\u003Cstrong>启动时间长\u003C\u002Fstrong>：应用打开需要等待\u003C\u002Fli>\n\u003Cli>\u003Cstrong>内存泄漏\u003C\u002Fstrong>：应用运行一段时间后崩溃\u003C\u002Fli>\n\u003Cli>\u003Cstrong>帧率下降\u003C\u002Fstrong>：动画不流畅\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>列表优化\u003C\u002Fh2>\n\u003Ch3>使用 FlatList 而非 ScrollView\u003C\u002Fh3>\n\u003Cp>FlatList 是高性能的列表组件，它会按需渲染可见的项：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\"><FlatList\n  data={data}\n  renderItem={({ item }) => <ListItem item={item} \u002F>}\n  keyExtractor={item => item.id}\n\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>优化 renderItem\u003C\u002Fh3>\n\u003Cp>确保 renderItem 返回的组件是纯组件：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">const ListItem = React.memo(({ item }) => {\n  return <View style={styles.item}>\n    <Text>{item.title}<\u002FText>\n  <\u002FView>\n})\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>图片优化\u003C\u002Fh2>\n\u003Ch3>使用合适的图片格式\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>对于图标，使用 SVG\u003C\u002Fli>\n\u003Cli>对于照片，使用 WebP 格式\u003C\u002Fli>\n\u003Cli>压缩图片大小\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>使用 FastImage\u003C\u002Fh3>\n\u003Cp>FastImage 是一个高性能的图片加载库：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">import FastImage from 'react-native-fast-image'\n\n<FastImage\n  source={{\n    uri: 'https:\u002F\u002Fexample.com\u002Fimage.jpg',\n    headers: { Authorization: 'someAuthToken' },\n  }}\n  style={{ width: 200, height: 200 }}\n  resizeMode={FastImage.resizeMode.contain}\n\u002F>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>内存管理\u003C\u002Fh2>\n\u003Ch3>清理定时器和监听器\u003C\u002Fh3>\n\u003Cp>在组件卸载时清理：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">useEffect(() => {\n  const timer = setInterval(() => {\n    \u002F\u002F do something\n  }, 1000)\n  \n  return () => clearInterval(timer)\n}, [])\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>避免内存泄漏\u003C\u002Fh3>\n\u003Cp>确保正确处理异步操作：\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-jsx\">useEffect(() => {\n  let isMounted = true\n  \n  fetchData().then(data => {\n    if (isMounted) {\n      setData(data)\n    }\n  })\n  \n  return () => {\n    isMounted = false\n  }\n}, [])\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>总结\u003C\u002Fh2>\n\u003Cp>性能优化是一个持续的过程，需要不断地监测和改进。通过以上方法，可以显著提升 React Native 应用的性能。\u003C\u002Fp>\n","在开发 React Native 应用时，我们经常会遇到以下性能问题：","react-native-performance","\u002Fwriting\u002Freact-native-performance\u002F",[17,28,42,53,64,66,80,91],{"id":18,"title":19,"date":20,"category":6,"readTime":21,"tags":22,"_excerpt":26,"_path":27},"cf-xray-nginx-tutorial","移动宽带 SSH 不到海外 VPS？CF + nginx 反向代理的全套方案","2026-06-16","17 分钟",[23,24,25],"333","eee","999","3 分钟摘要： - 移动宽带到 VPS 的 SSH 流量被 GFW 识别并阻断 - 用 Cloudflare CDN 隐藏真实 VPS IP（免费方案） - xray VLESS + WebSocket 加密代理流量 - nginx 网站防御 G网 主动探测","\u002Fwriting\u002Fcf-xray-nginx-tutorial\u002F",{"id":29,"title":30,"date":31,"category":32,"readTime":33,"tags":34,"_excerpt":40,"_path":41},"telegram-86-login-recovery","86 手机号无法登录 Telegram 终极解决方案：绕过付费验证码 + 旧设备验证找回账号","2026-06-14","工具教程","8 分钟",[35,36,37,38,39],"Telegram","86手机号","账号找回","二次验证","短信收费","3 分钟摘要： - 86 号码 + 邮箱 + 二次验证密码 = 找回账号的三要素，缺一不可 - 用第三方客户端 Telega（绕过 Google Play 校验版本）登录，触发邮箱 + 2FA 通道 - 登录成功后再用官方 Telegram 登录、更新到最新版本 - 整个过程不需要原手机短信、不需要","\u002Fwriting\u002Ftelegram-86-login-recovery\u002F",{"id":43,"title":44,"date":45,"category":46,"readTime":33,"tags":47,"_excerpt":51,"_path":52},"indie-developer-journey","从零到一：我的独立开发之路","2026-05-15","创业人生",[48,49,50],"独立开发","创业","个人成长","2023年初，我做出了一个重要决定：离开稳定的工作，成为一名独立开发者。这个决定并非一时冲动，而是经过深思熟虑的结果。","\u002Fwriting\u002Findie-developer-journey\u002F",{"id":54,"title":55,"date":56,"category":6,"readTime":57,"tags":58,"_excerpt":62,"_path":63},"vue3-composition-api","Vue 3 Composition API 完全指南","2026-04-28","12 分钟",[59,60,61],"Vue","JavaScript","前端","Composition API 是 Vue 3 引入的一组基于函数的 API，它允许我们使用函数来组织组件逻辑，而不是选项对象。","\u002Fwriting\u002Fvue3-composition-api\u002F",{"id":14,"title":4,"date":5,"category":6,"readTime":7,"tags":65,"_excerpt":13,"_path":15},[9,10,11],{"id":67,"title":68,"date":69,"category":70,"readTime":71,"tags":72,"_excerpt":78,"_path":79},"futures-trading-seven-rules","期货交易的七条铁律：从亏损到稳定盈利的思考","2026-03-20","交易心得","5 分钟",[73,70,74,75,76,77],"期货交易","交易思维","止损","趋势跟踪","心法","做期货这几年，踩过的坑、爆过的仓、熬过的夜，最终都沉淀成这七条心得。期货交易本质上不是预测行情，而是管理自己。以下每一条都是真金白银换来的，建议反复读、慢慢悟。","\u002Fwriting\u002Ffutures-trading-seven-rules\u002F",{"id":81,"title":82,"date":83,"category":84,"readTime":71,"tags":85,"_excerpt":89,"_path":90},"git-workflow-best-practices","Git 工作流最佳实践","2026-03-10","开发工具",[86,87,88],"Git","团队协作","版本控制","这是一个经典的分支模型：","\u002Fwriting\u002Fgit-workflow-best-practices\u002F",{"id":92,"title":93,"date":94,"category":6,"readTime":95,"tags":96,"_excerpt":99,"_path":100},"typescript-tips","TypeScript 实用技巧","2026-02-25","7 分钟",[97,61,98],"TypeScript","编程技巧","使用类型守卫来缩小类型范围：","\u002Fwriting\u002Ftypescript-tips\u002F",1781610782243]