react-native总结
一、每个 App 都少不了的导航功能
我们知道无论是底部 Button 切换，还是页面跳转统称为导航功能，有了这些功能，一个完整的 App 基本骨架才会出来，接下来才能用业务逻辑去填充整个骨架，在 React-Native 中，Facebook 也推出过导航组件，但是，面对复杂的业务逻辑性能相对来说体验较差，于是，第三方导航组件 react-navigation 诞生了，Facebook 也推荐使用该组件，可见这个导航组件能力超群，这个组件里面主要包括三个核心功能组件：TabNavigator、StackNavigator、DrawerNavigation，分别实现的功能： Tab 导航、页面跳转、抽屉效果（侧滑菜单），
react-navigation 初探使用 TabNavigator
1.安装
安装完之后查看 package.json 文件里面 dependencies 对应的值会多一个 key-value 对应的react-navigation 和版本号：
2.路由配置
RN 中的 Tab 导航比 Android 操作简单，RN 是自己去配置好每个 Tab 对应的页面切换目标，一切都要自己去配置，基本框架配置好之后随处可用，下面先攻克底部 Tab 切换功能。
.当你调用setState的时候，发生了什么事？
当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。
这将启动一个称为和解（reconciliation）的过程。
和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。
为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。
关于ref
组件的ref字段一般被用来获取组件的对象，一般书写形式如下：
compoentDidMount(){this.refs.view// 获取到view组件对象this._scroll.scrollTo({y:10,x:10})//获取到ScrollView对象，并执行scrollTo()}....<View ref='view'></View><TextInput ref={(input)=>{//此处可以对TextInput组件进行操作，比如focus()}}/><ScrollView ref={(scroll)=>this._scroll=scroll}/>
可以尝试打印一下通过ref获取到的组件对象，例如打印scrollview的组件对象，可以找到组件对象可以调用的方法、组件的属性和其子组件与父组件信息。
ref仅可以在组件被render到界面后，才可以调用，否则会返回undefined；
关于image
关于Image组件，目前版本，在iOS和Android平台上行为略微不一致，当不给Image设置source或source不可用时，仅设置布局属性时，iOS端会显示根据布局属性生成无图组件，进行占位;Android端则不会生成无图组件进行占位，即便设置了明确的长高属性
界面跳转与传值
RN本质上是js。也就是前端那一套，没有原生界面跳转的概念，所有的界面跳转本质上就是组件的替换。为了达到与原生一致的界面切换体验，跳转必须要借助Navigator，Navigator可叠加使用，必须在跳转前提前静态声明
设置环境和工程
目前来看，开发 iOS 原生应用只能用 macOS 系统。由于大多数移动应用都会涉及到 Android 和 iOS两端，因此应该考虑使用 Mac 来开发 React Native 移动应用。
在创建项目之前，你需要安装一堆东西，主要包括：
Android Studio和Xcode工具：安装最新版本以构建和发布应用。对于 Android 开发，确保为要运行的Android API 版本配置正确的模拟器。
JavaScript IDE或文本编辑器：不需要使用 Xcode 或 Android Studio 来编写 JavaScript 代码，真正需要的只是一个文本编辑器。比如使用 Atom（由 GitHub 开发），Sublime Text 或喜欢的任何优秀文本编辑器，笔者目前用的是 VSC。
JavaScript 或 React Native 包：安装一些工具来管理 React Native 软件包以及三方库，包括：
从 nodejs.org 下载 node.js：为了让JavaScript 运行时允许访问npm，这是一个由 node.js 项目创建的便捷工具，可用于管理开源软件包。确保下载 node.js 的最新 LTS（长期支持）版本。此下载中还包括一个名 为 Metro bundler 的开发服务器，它在调试时能够提供实时更新渲染。
关于视图渲染刷新
过度渲染
React Native组件的渲染都在render函数中执行并return，即每触发一次render函数都要重新渲染一次组件。而每次对state的修改则会触发一次render，将整个组件重新渲染。这就将导致一个问题，即过度渲染。有时候我们频繁的进行state操作时，频繁的触发render，导致页面卡顿，性能下降，动画掉帧等一系列问题。
关于Promise、async和await
Promise对象是ES6新增的，常作为异步结果的返回值，例如：本地数据存储或fetch网络请求。async函数同样是ES6新增的，需要同await联合使用。所以一般情况下同时使用两者去进行异步处理，以网络请求为例
asyncsomeHandle(url){try{letresult=awaitfetch(url);
console.log(result)returnresult;}catch(err){console.log(err);}}
但是aysnc函数有一个特点是假如fetch等异步操作返回reject，那么async函数将直接返回reject状态，而不会往下继续执行。即假如fetch若返回reject，将不会执行下面的打印。
可以在async函数内加上try...catch，来收集异步操作的错误信息。
fetch
fetch，是 XMLHttpRequest 的一种替代方案。如果有人问你，除了 Ajax 获取后台数据之外，还有没有其他的替代方案？答案是还可以使用一种更优的解决方案 fetch。
到现在为止，fetch 的支持性还不是很好，但是在谷歌浏览器中已经支持了fetch。fetch 挂在在 BOM 中，可以直接在谷歌浏览器中使用。
内核。
