最近在做的APP项目，是在vs code中使用javascript开发的，之前没有接触过，第一次接触，就先来谈谈我自己对react、react-native之间的理解

目录

• 一、基本介绍
• • 关于react
  • 关于react-native
• 二、React
• • react产生背景
  • react框架以及底层原理
• 三、React-Native
• • 框架

一、基本介绍

关于react

我们知道的当前前端三大框架(vue、react和angular)，而React 作为构建高性能 Web 应用的框架之一，国内用的相对来说比较多

关于react-native

React Native 作为构建跨 IOS 与 Android 平台 App 应用的框架，用js的方式 去开发原生应用， 一套代码生成 android、ios应用，js通过JSBridge调用原生API渲染UI交互通信。

移动端应用的开发，目前主要有以下几种模式：
1、原生开发(Native App)：即Android使用Java在AndroidStudio开发，IOS应用使用Objective-C在Xcode中开发
2、网页开发(Web App)
3、混合开发(Hybrid App)
4、React Native App

具体请跳转以下链接 移动端应用开发的几种方式.

二、React

react产生背景

React 起源于 Facebook 的内部项目，在 Facebook 内部极其复杂的项目中，当时面临的一个问题是，MVC 架构的项目当 Model 和 View 有数据流动时，可能会出现双向的数据流动，那么项目的调试以及维护将变得异常复杂。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套

react开源github链接: https://github.com/facebook/react/.

react框架以及底层原理

React 框架使用 JSX（JavaScript eXtension，可以理解为看起来像 HTML 的 JavaScript）指定 React 组件的输出定义，而逻辑函数的部分依然是采用 JavaScript ES6 来编写，编写的代码通过 React 框架渲染在 Web 浏览器中运行

React 框架底层的核心为 Virtual DOM，也就是虚拟 DOM

传统的 HTML 页面更新页面元素，或者说需要更新页面，都是将整个页面重新加载实现重绘，执行这样的操作不管是对于服务器还是在用户体验上，“花费”都是非常昂贵的。后来，开始有了 AJAX（Asynchronous JavaScript And XML）这样的局部更新技术，实现了页面局部组件的异步更新，不过 AJAX 在代码的编写、维护、性能以及更新粒度的控制上还是没有达到一个完美的状态。

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。在 HTML 网页上，组织页面（或文档）的对象元素被组织在一个树形结构中，用来表示文档中对象的标准模型就称为 DOM。

React 通过在框架底层设计了一个虚拟 DOM，此虚拟 DOM 与页面上的真实 DOM 进行映射，当业务逻辑修改了 React 组件中的 state 部分，如上例中，子组件的 state 值，username 由 Parry 修改成了 React，React 框架底层的 diff 算法会与页面 DOM 比较计算，哪些部分更改了，通过比较虚拟 DOM 与真实 DOM 的差异，最终只更新真实 DOM 与虚拟 DOM 差异的部分。此计算过程是在内存中进行的，并最终只更新差异的部分，所以 React 在前端中的高性能表现正是来自于此底层的设计。

三、React-Native

https://github.com/facebook/react-native/

框架

React Native 依然由 JSX 进行组件布局的开发，框架中组件开发的原理与思想与 React 框架一致，而且底层都由最重要的 state 进行驱动。
React 与 React Native 除了在编码表现层都使用 JSX 语法外，在 React 与 React Native 的底层都有 Virtual DOM 与 DOM 之间的映射与转换，以实现了页面组件高效更新的前端表现

参考文档：
https://www.imooc.com/article/78942.

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！