ReactNative
# 前言
要使用 React Native,你需要对 JavaScript 基础知识有所了解。如果你是 JavaScript 新手或需要复习,你可以在 MDN 上深入学习 (opens new window)或复习一下 (opens new window)
# 环境搭建
我使用的是Windows系统,所以只针对Windows做记录
也可以参照官方文档React开发环境搭建 (opens new window),按照步骤一步一步操作即可,
缺一不可
- 必须安装的依赖有:Node、JDK 和 Android Studio。(缺一不可)
- Node 的版本应大于等于 14
- 首先下载和安装 Android Studio (opens new window),剩下的步骤完全可以参照官方文档一步一步操作
# ReactNative启动命令
- 开启 USB 调试
- 通过 USB 数据线连接设备 adb devices:检查设备是否成功连接
- 运行应用
yarn react-native run-android || yarn android 编译并运行 React Native 应用 npx react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用
1
2
建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。
# 调试命令
通过浏览器进行调试
- 在开发者菜单中选择"Debug JS Remotely"选项,即可以开始在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.
- 在浏览器中打开开发者工具
# ReactNative踩坑
- Hook 不婿在条件语句中使用hook函数
# State Hook
import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15# Effect Hook
1# 通过跳过 Effect 进行性能优化
如果某些特定值在两次重渲染之间没有发生变化,你可以通知 React 跳过对 effect 的调用,只要传递数组作为
useEffect
的第二个可选参数即可useEffect(() => { document.title = `You clicked ${count} times`; }, [count]); // 仅在 count 更改时更新
1
2
3上面这个示例中,我们传入
[count]
作为第二个参数。这个参数是什么作用呢?如果count
的值是5
,而且我们的组件重渲染的时候count
还是等于5
,React 将对前一次渲染的[5]
和后一次渲染的[5]
进行比较。因为数组中的所有元素都是相等的(5 === 5
),React 会跳过这个 effect,这就实现了性能的优化。
编辑 (opens new window)
上次更新: 2023/06/25, 09:27:47