react-native最佳实践
简化文件引用路径
根据不同场景的需要，我们会将文件拆分为一个又一个的文件，在文件嵌套较深时，经常出现类似 ../../../Components/Product 这样的代码。多写一层或少写一层都会导致代码异常
方法一
使用 babel-plugin-module-resolver 插件，给文件夹取一个别名
使用方式：
在.babelrc 文件中加入如下代码
{
"plugins": [
["module-resolver", {
"root": ["./src"],
"alias": {
actions: './app/actions',
api: './app/api',
assets: './app/assets',
components: './app/components',
containers: './app/containers',
constants: './app/constants',
selectors: './app/selectors',
}
}]
]
}
然后我们就可以使用 import Product from 'components/Product' 这样的方式去引用我们需要的组件
方法二
package.json
使用方式：
给每个大模块文件夹下面创建一个 package.json 文件，key 为 name, 对应的值就是我们给这个文件取的别名
package.json
然后，就可以使用别名的方式去引用对应文件夹下面的文件
image.png
引入顺序排序
引用顺序没有强制规定要谁先谁后，但是为了方便其他同事 review 我们代码，以及在查找引用时更加快捷，最好是有一个统一的引用方式。
顺序如下：
- react 组件
- react-native 组件
- 引入的第三方组件
- 项目中使用 aliases 方式引用的绝对路径
- 相对路径
import React, { Component } from 'react'
import { View, ScrollView } from 'react-native'
import { NavigationScreenProp } from 'react-navigation'
import { connect } from 'react-redux'
import Card from './Card'
import TabItem from './TabItem'
依赖包的版本锁定
react-native 目前还没有一个相对来说特别稳定的版本，仍然处于 v0.* 的版本，这导致它的变化会比较大。一些基于旧版本的第三方组件，在RN 升级后，也需要继续修改，导致无法和旧的 RN 版本兼容，如果组件的版本已更新，而使用的 RN 版本还没有更新，就可能会导致异常，而这些异常往往不容易被跟踪，所以将依赖的第三方组件版本锁定非常有必要。
改动的方式很简单，就是将依赖包前面的 ^ 去掉即可
- 改动前
"react-native-qrcode": "^0.2.7",
"react-native-qrcode-svg": "^5.1.2",
"react-native-root-siblings": "^3.1.0",
"react-native-scrollable-mixin": "^1.0.1",
- 改动后
"react-native-qrcode": "0.2.7",
"react-native-qrcode-svg": "5.1.2",
"react-native-root-siblings": "3.1.0",
"react-native-scrollable-mixin": "1.0.1",
使用纯函数组件或PureComponent
- 纯函数组件少了对状态的管理以及对生命周期的监控，所以性能会更加的快速。
const Header = () => (<Text>This is Header</Text>);
- PureComponent 使用浅比较的方式极大地减少了重复渲染的出现，性能方面也有一定的提高
class Header extends PureComponent {
...
}
什么时候使用纯函数组件，什么时候使用 PureComponent，请查看https://www.jianshu.com/p/b683a0c45b74
图标使用字体图标
APP 中经常会用到大量的图标，使用字体图标可以减少包的体积，同时，对不同的分辨率的手机展示上也不会有误差，项目中可以使用 react-native-vector-icons 来加载图标
图片按需加载或者存放于CDN
图片在加载后，会存放于手机内存中，可以通过需要使用时，再通过 require 的方式加载需要的图片来减少 APP 对手机内存的消耗
<Image source={require('@assets/images/icon-arrow.png')} />
- 图片可以通过压缩一定比例后上传至 CDN，在需要的时候再去请求对应的图片链接来加载
<Image source={{ uri: 'https://cdn.image.jpg' }} />
使用Redux管理状态
当项目越来越大时，许多的数据需要在不同的页面进行交互，比如用户信息，一个地方变化后，所有与之相关的地方都需要变化，这里我们习惯用的 state 就不太方便处理了，基于 context 的 Redux 状态管理工具也就有了存在的必要
Redux 参考文档 移步这里
状态管理不只Redux，还有 Mobx 等，它们之前也分别具有各自的优点和缺点，具体使用哪种根据团队的情况来定。个人而言更倾向于 Redux, dispatch 发送一个 action, 经过 reducer 对 store 进行修改，可以很好地预测数据的变化，当项目越来越大时优点尤为明显
