React on Rui bloghttps://rqbaby.cloud/tags/react/Recent content in React on Rui blogHugo -- 0.160.0zh-cnWed, 08 Apr 2026 10:42:56 +0800Reacthttps://rqbaby.cloud/posts/react/Wed, 08 Apr 2026 10:42:56 +0800https://rqbaby.cloud/posts/react/<p>文档：[https://17.reactjs.org/docs/getting-started.html]</p> <h2 id="核心要点">核心要点</h2> <table> <thead> <tr> <th>你想做的事</th> <th>React 里常用</th> <th>Vue 里常用</th> </tr> </thead> <tbody> <tr> <td>页面加载后执行一次</td> <td>useEffect(&hellip;, [])</td> <td>onMounted</td> </tr> <tr> <td>页面销毁前清理</td> <td>useEffect 返回清理函数</td> <td>onUnmounted</td> </tr> <tr> <td>监听某个值变化</td> <td>useEffect(&hellip;, [value])</td> <td>watch</td> </tr> <tr> <td>自动追踪依赖执行副作用</td> <td>useEffect（手动写依赖）</td> <td>watchEffect</td> </tr> <tr> <td>根据状态计算新值</td> <td>useMemo</td> <td>computed</td> </tr> </tbody> </table> <h2 id="代码整理">代码整理：</h2> <p>hello world 注意需要使用==type=&ldquo;text/jsx&rdquo;==</p>技术栈https://rqbaby.cloud/posts/%E6%8A%80%E6%9C%AF%E6%A0%88/Wed, 08 Apr 2026 10:42:56 +0800https://rqbaby.cloud/posts/%E6%8A%80%E6%9C%AF%E6%A0%88/<p>前端开发</p> <ul> <li>精通 HTML、CSS、JavaScript，熟悉页面结构与布局，掌握 ES6+ 新特性</li> <li>熟练使用 Flex、Grid、媒体查询，能够实现高性能响应式页面开发</li> <li>熟练掌握 Vue.js 技术栈（Vuex、Vue Router、Axios），具备 React / React Native 跨端开发能力</li> <li>熟悉 微信小程序开发，掌握 UniApp 跨平台框架</li> <li>熟练使用 Element Plus、ECharts、Ant Design、Vant 等主流组件库 后端开发</li> <li>熟练掌握 Java 基础语法，熟悉 Spring Boot、MyBatis-Plus 框架，具备后端接口开发与工程化能力</li> <li>熟悉 Node.js（Express），能够进行全栈开发</li> <li>熟练掌握 Python 基础语法，熟悉 Django、Flask 及常用爬虫库</li> <li>具备 自研加密算法工程化落地、性能优化（多线程、JVM 调优、流式读取）的实践经验 移动端开发</li> <li>熟悉 Android 原生开发，具备代码重构与性能优化经验</li> <li>掌握 跨端开发（React Native / UniApp），支持移动端与桌面端适配 数据库与存储</li> <li>熟悉 MySQL、MongoDB、OpenGauss 等数据库，具备数据库建模与优化能力</li> <li>理解 数据安全与加密策略，掌握 国密算法（SM2/SM3/SM4） 运维与部署</li> <li>熟悉 Linux 基础命令，具备软件部署与运维能力</li> <li>熟悉 Docker、Jenkins，具备 CI/CD 自动化部署 实践经验</li> <li>能独立编写 Shell/PowerShell 脚本，支持一键化构建与上线 协作与工具</li> <li>熟练使用 Git，能够配合 GitHub/GitLab/Gitee 进行多人协作开发</li> <li>熟悉 敏捷开发流程，具备跨团队协作与项目推进能力</li> </ul>快捷键https://rqbaby.cloud/posts/%E5%BF%AB%E6%8D%B7%E9%94%AE/Wed, 08 Apr 2026 10:42:56 +0800https://rqbaby.cloud/posts/%E5%BF%AB%E6%8D%B7%E9%94%AE/<p>webstorm 代码格式化： mac：win+alt+L<br> windows: ctrl+alt+L 展开代码块： Ctrl + NumPad + 折叠代码块： Ctrl + NumPad-</p> <p>vscode 格式化： windows: shift + alt +F react 快速生成模板： rfc (快速创建一个组件fun) rcc （快速创建一个组件extends）类组件 rconst 快速创建一个 constuctor rcep 快速创建一个组件（使用extends方式） rcredux 快速创建一个 redux格式的类模板</p>React全家桶技术栈https://rqbaby.cloud/posts/react%E5%85%A8%E5%AE%B6%E6%A1%B6%E6%8A%80%E6%9C%AF%E6%A0%88/Wed, 08 Apr 2026 10:42:53 +0800https://rqbaby.cloud/posts/react%E5%85%A8%E5%AE%B6%E6%A1%B6%E6%8A%80%E6%9C%AF%E6%A0%88/<table> <thead> <tr> <th>层级</th> <th>技术选型</th> </tr> </thead> <tbody> <tr> <td>语言</td> <td>TypeScript</td> </tr> <tr> <td>前端（Web）</td> <td>Next.js + Tailwind + shadcn/ui</td> </tr> <tr> <td>移动端（App）</td> <td>React Native + Expo + NativeWind</td> </tr> <tr> <td>小程序</td> <td>Taro（React 语法）</td> </tr> <tr> <td>数据库</td> <td>Supabase（数据库 + Auth + Realtime + Edge Functions）</td> </tr> <tr> <td>AI 层</td> <td>OpenAI SDK + LangChain + pgvector</td> </tr> <tr> <td>状态管理</td> <td>Zustand / React Query</td> </tr> <tr> <td>部署</td> <td>Vercel（Web） + Expo EAS（App） + 微信开发者工具（小程序）</td> </tr> </tbody> </table> <p>Web：Next.js+Supabase App: React Native+Next.js+Supabase 小程序：Taro+Next.js+Supabase</p>React Native运行IOShttps://rqbaby.cloud/posts/react-native%E8%BF%90%E8%A1%8Cios/Wed, 08 Apr 2026 10:42:51 +0800https://rqbaby.cloud/posts/react-native%E8%BF%90%E8%A1%8Cios/<ol> <li>关闭代理</li> <li>yarn install</li> <li>yarn pod</li> <li>检查xcode workspace 三处arm64 twwapp中的三处、以及prods</li> <li><img loading="lazy" src="https://rqbaby.cloud/uploads/Pasted%20image%2020250122100454.png" alt="Pasted image 20250122100454"> </li> <li>运行，查看报错，选择wenling<img loading="lazy" src="https://rqbaby.cloud/uploads/Pasted%20image%2020250122100554.png" alt="Pasted image 20250122100554"> </li> <li>再次运行，fix代码里的语法错误</li> <li>再次运行，xcode执行成功后关闭终端、simulator，在webstorm重新运行</li> </ol>