前言

要使用 React Native，你需要对 JavaScript 基础知识有所了解。如果你是 JavaScript 新手或需要复习，你可以在 MDN 上深入学习 (opens new window)或复习一下 (opens new window)

环境搭建

我使用的是Windows系统，所以只针对Windows做记录

也可以参照官方文档React开发环境搭建 (opens new window),按照步骤一步一步操作即可，缺一不可

• 必须安装的依赖有：Node、JDK 和 Android Studio。（缺一不可）
• Node 的版本应大于等于 14

1. 首先下载和安装 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 中直接运行应用

建议在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>
 );
}

Effect Hook

通过跳过 Effect 进行性能优化

如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可

useEffect(() => {
 document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新

上面这个示例中，我们传入 [count] 作为第二个参数。这个参数是什么作用呢？如果 count 的值是 5，而且我们的组件重渲染的时候 count 还是等于 5，React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比较。因为数组中的所有元素都是相等的(5 === 5)，React 会跳过这个 effect，这就实现了性能的优化。