React-native学习记录

Mac的开发环境

React Native 中文译 - 开发环境

Homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node

brew install node

React-Native CLI

npm install -g yarn react-native-cli

Watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

Flow

Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

brew install flow

初始化

命令行cd到你想要放置项目的目录下面

react-native init ProjectName
cd ProjectName
react-native run-ios

当然也可以直接用Xcode运行ProjectName目录中ios下的project文件

工具

• Chrome + React Native Debugger
• Visual Studio Code + React Native Tools

React Native Debugger

image.png

• command + option + J 打开调试工具
• source 标签 勾选 Pause On Caught Exceptions

image.png

• 断点调试 Source标签 CMD + P 输入想要调试的文件名称,重新加载浏览器

image.png

调试按钮

image.png

关键词

constructor

当前组件的构造函数,init的初始化函数,通常在这个函数中声明需要用到的状态机变量

状态机

RN将所有的UI视为一个简单的状态机,那么任意一个UI场景就是状态机的一种.状态机变量的改变会导致RN组件的重新渲染,为了提高性能,要尽可能的减少状态机变量的数目.

那么哪些变量可以作为状态机呢?
应用对所接受的事件处理可能导致处理结果中某些数据需要重新显示在UI界面上,这些数据就是状态机的备选对象,开发者再对这些数据进行筛选,剔除重复数据,就找到了状态机变量的最小集.

重复数据:

• 该数据可以由其他备选对象通过某种规则计算出来
• 该数据可以由组件的属性通过某种规则计算出来
• 该数据可以由其他备选对象再加上属性中的某些数据按照某种规则计算出来

千万不要把一个RN组件放在状态机变量中. 正确的做法是 把它放下render函数中,让它成为本组件的子组件.

RN设计思路

创建多个只负责渲染数据的无状态RN组件,将它们封装在一个有状态机的RN组件中,
并把这个有状态的RN组件的状态机变量的值通过props传给无状态机的RN组件.
也就是: 有状态机组件负责交互逻辑, 无状态机组件负责渲染界面

注意点

• 使用console.log记录日志对RN应用的性能有影响,日志过多有可能会造成红屏. 所以发包前注意将所有的console.log日志删除或者注释.