ReactNative认知（一）

ReactNative 是Facebook开发的一套用于开发跨平台App的技术框架

相比传统开发方式解决了一些痛点：

1.难以复用

2.多平台多次开发

3.效率低下

效率带来的缺点也可想而知就是一些原生可以实现的复杂操作，RN做不到

前置知识

React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本结构，首先需要了解一些基本的 React 的概念，比如 JSX 语法、组件、state状态以及props属性。如果你已经了解了 React，那么还需要掌握一些 React Native 特有的知识，比如原生组件的使用。

语言选择

typeScript是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

本次开发使用typeScript作为ReactNative的开发语言，对比JavaScript有一些优势

一、ts的静态检查

参考为什么要使用TypeScript？有哪些情景请简单介绍一下，或者来个例子? TS对JS的改进主要是静态类型检查，静态类型检查有何意义？标准答案是“静态类型更有利于构建大型应用”。为什么静态类型有利于构建大型应用？我总结，利在两点。

其一，静态类型检查可以做到early fail，即你编写的代码即使没有被执行到，一旦你编写代码时发生类型不匹配，语言在编译阶段（解释执行也一样，可以在运行前）即可发现。针对大型应用，测试调试分支覆盖困难，很多代码并不一定能够在所有条件下执行到。而假如你的代码简单到任何改动都可以从UI体现出来，这确实跟大型应用搭不上关系，那么静态类型检查确实没什么作用。

配合vscode的TSLint插件可以很好的实现静态语法检查

二、 类型就是最好的注释。

静态类型对阅读代码是友好的，针对大型应用，方法众多，调用关系复杂，不可能每个函数都有人编写细致的文档，所以静态类型就是非常重要的提示和约束。而假如你的代码像jQuery这样所有函数基本全是API，根本没什么内部函数，而且逻辑关系看起来显而易见，这确实跟大型应用搭不上关系，那么静态类型对阅读代码确实也没什么帮助。总的来说，现代编程语言设计，很多特性已经有非常成熟的理论支持了，如果我们重视计算机基础，那么一些语言的适用场景就像是拼积木，可以用几句话概括。像是TS对JS这样，只是单一特性变化。

PS:typeScript本质上还是一个解释执行的脚本语言，和JavaScript一样没有编译过程

同时也不是强类型语言，是「静态类型检查」的「弱类型」语言

真正的强类型语言有：java，swift，C#

三、 其他语法特性

1. TypeScript工具使重构更变的容易、快捷。

2. TypeScript 引入了 JavaScript 中没有的“类”概念。

3. 引入了public，private，protected访问控制符代替下划线私有

4. 支持泛型和命名空间

5. TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

6. 支持接口的定义

   ……

JSX

JSX是一种嵌入式的类似XML的语法。 它可以被转换成合法的JavaScript，尽管转换的语义是依据不同的实现而定的。 JSX因React框架而流行，但也存在其它的实现。 TypeScript支持内嵌，类型检查以及将JSX直接编译为JavaScript。

想要使用JSX必须做两件事：

1. 给文件一个.tsx扩展名

2. 启用jsx选项

TypeScript具有三种JSX模式：preserve，react和react-native。 这些模式只在代码生成阶段起作用 - 类型检查并不受影响。 在preserve模式下生成代码中会保留JSX以供后续的转换操作使用（比如：Babel）。 另外，输出文件会带有.jsx扩展名。 react模式会生成React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为.js。 react-native相当于preserve，它也保留了所有的JSX，但是输出文件的扩展名是.js。

参考资料：

官方文档

typeScriptg中文文档

ReactNative入门与进阶

https://docs.nativebase.io

博客地址