react和react native的区别是什么

react和react native的区别是：1、框架作用的平台不同；2、工作原理有差别；3、渲染周期不同；4、react native中所有元素都会被平台指定的react组件替换；5、宿主平台的API不同。

本文环境：windows10、react16版本，Dell G3电脑。

（学习视频分享：react视频教程）

区别如下：

1、框架作用的平台不同

RN是由React衍生出来的，两种框架都是用JSX开发语法，但是RN是用来开发真正原生渲染的iOS和Andriod移动应用的JS框架，而React是将浏览器作为渲染平台。

2、工作原理的差别

Virtual DOM是介于开发者描述的视图与实际在页面上渲染的视图之间。在浏览器上如果想渲染出来可交互的用户界面，开发者必须操作浏览器的文档对象（document object model），Virtual DOM的出现，就是为了节省这部分操作所消耗的性能。

但是Virtual DOM的巨大潜力，是在于这个抽象层，可以带来很多可能性。

React Native的工作原理，就是调用Objective-C的API去渲染iOS组件，调用Java API去渲染Android组件，而不是渲染到DOM上。桥接使得React可调用宿主平台开放的UI组件，React组件通过render方法返回了描述界面的标记代码。如果是web平台，React最终把标记代码解析成浏览器的DOM；而在React Native中，标记代码会解析成特定平台的组件，例如会表现成iOS平台上的UIView。

3、渲染周期

React的渲染周期开始于react组件挂载到DOM之后，接着React进入渲染周期并根据需要渲染组件。在渲染阶段，React将开发者在return中返回的HTML标记直接按需渲染到页面上。

React Native生命周期与React基本相同，在渲染上因为React Native依赖于桥接，并不在UI主线程运行，它可以在不影响用户体验的前提下执行这些异步调用。

4、创建组件

当编写Web环境的React的时候，视图最终需要渲染成普通的HTML元素；而在React Native中，所有元素都会被平台指定的React组件替换，例如在iOS中，组件被渲染成UIView，而在Android平台，会被渲染成View。

UI元素均为React的组件，而不是像

这样基础的html元素，因此在使用每一个组件的时候，都需要显式的导入，例如：

import { DatePickerIOS } from 'react-native';

5、原生的样式

在Web中，使用CSS样式为React组件添加样式已经是开发过程中不可获取的一部分了。React通常不影响我们编写CSS的方式，并且它确实让样式的动态创建更加容易（通过state和props），除此之外，React基本上不关心我们如何处理样式的。

非Web平台上有大量的方法来处理布局和样式，我们使用React Native时，只需要用一种标准的方法来处理样式，React和宿主平台之间的桥接包含了一个缩减版CSS子集的实现，这个CSS子集主要通过flexbox进行布局，做到了尽量简化，而不是去实现所有的CSS规则。有别于Web平台，CSS的支持程度因浏览器而不同，React Native则做到了样式规则的一致。

6、宿主平台API

使用Web 环境的React 与React Native 最大的不同，在于宿主平台的API。

在Web 中，我们通常要处理采纳标准的不一致和碎片化所引起的问题，并且大多数浏览器只支持部分核心的特性。然而在React Native 中，平台特定的API 在提供优秀原生的用户体验方面发挥了巨大的作用。当然，要考虑的方面还有很多。API 囊括了许多功能，从数据存储到地理服务，以及操控硬件设备（如摄像头）等。非常规平台上的API 会更有趣，例如，React Native 和虚拟现实头盔之间的API 会是什么样的呢？

默认情况下，iOS 和Android 版本的React Native 支持许多常用的特性，甚至可以支持任何异步的本地API。React Native 让宿主平台API 的使用变得更加简单和直观，你可以在其中自由地试验。同时，务必思考一下怎样做才符合目标平台的体验，并在心里设计好交互过程。毋庸置疑，React Native 的桥接不可能暴露宿主平台全部的API。

如果你需要使用一个未支持的特性，完全可以自己动手添加到React Native 中。另外，如果其他人已经集成，那就更好了，所以应该及时查看社区中的实现。值得注意的是，使用平台API 也会对代码复用有帮助。同时，实现平台特定功能的React组件也是平台特定的。

隔离和封装这些组件将会给你的应用带来更大的灵活性。当然，这对你开发Web 应用同样奏效，如果你想共享React 和React Native 的代码，请记住像DOM 这样的API 在React Native 中并不存在。

相关推荐：js教程

Atas ialah kandungan terperinci react和react native的区别是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn