当React开发者初次走进React-Native的世界-白红宇

当React开发者初次走进React-Native的世界

阅读量：5017 次

发布时间：2019-06-12

本文共 2186 字，大约阅读时间需要 7 分钟。

RN千机变

1.技术体系问题

RN和React共用一套抽象层，相对于前端，RN其实更接近Node的运行环境

ReactNative =React +IOS +Android

看RN文档时，我会发现入门基础那一块介绍的都是React的内容，进阶篇则介绍了很多IOS和Android的API

2.组件设计问题

Android和IOS一些设计组件是不共通的，这意味着，原本在React上只返回一个组件的情况下，RN中你可能需要判断平台分别返回两个版本的组件，为什么要这样？因为对于许多组件，两个平台的风格差异实在太大，只能分而治之。

3.静态资源问题

RN应用和普通Web应用有一些天生的差别，RN应用是可以植入预定的静态资源的，也就是不需要经过任何一次请求，而都可以本地使用的静态资源，而Web应用试图使用这种资源则需要经过至少一次的网络请求并且缓存，但仍有可能被用户强清缓存等操作付之一炬。

这意味着，做性能优化时也许可以从静态资源入手了，我阅读了以下文章后

学习到了可以通过静态文件占位图优化RN首屏的新思路。当然，很多时候React和RN的优化思路也是共通的，例如

资源预先缓存

长列表延迟加载等等

4.标签生效问题

<div>不能用啦，要用<view>

<p>标签用不了啦,要用<Text>

没有<img>了，取而代之的是<Image>

背景，可以用ImageBackground这个组件

列表，不能用ul/li啦，用ListView组件吧兄弟

各种Input，不能用input标签啦～要用对应的原生控件，比如TextInput、Picker、Switch、Slider

5.事件核心问题

Web开发中，点击事件是核心，而在主攻移动端的RN中，触摸事件的地位则大大增强，而且除此之外，还衍生了长按事件（JS中我记得只有双击事件没有长按事件）

onPressOut等等

onLongPress 等等

6.CSS3属性受限，动画效果使用方式完全变更

CSS/Animation我用不了了，因为CSS已经没了了，底层是用bridge调原生的UI构建

7.虚拟DOM到虚拟View的演变

在React中，我们使用虚拟DOM模拟现实中的DOM节点

在RN中，这个对象被换成了虚拟View,对应原生平台中的视图，因为RN中已经没有DOM了

8.UI呈现的变化

（以下参考自：

UI的描述和呈现分离开了。

html文本描述了页面应该有哪些功能，css告诉浏览器该长什么样。

浏览器引擎通过解析html和css，翻译成一些列的预定义UI控件，

然后UI控件去调用操作系统绘图指令去绘制图像展现给用户。

Javascript可有可无，主要用于html里面一些用户事件响应，DOM操作、异步网络请求和一些简单的计算。

在react native 里面，1和2是不变的，也是用html语言描述页面有哪些功能，然后stylesheet告诉浏览器引擎每个控件应该长什么样。并且和浏览器用的是同一个引擎。

在步骤3里面UI控件不再是浏览器内置的控件，而是react native自己实现的一套UI控件（两套，android一套，ios一套），这个切换是在MessageQueque中进行的，并且还可以发现，他们tag也是不一样的。参考链接：