Mac的开发环境
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日志删除或者注释.
网友评论