浅谈React Native之原理篇

这是我参与 8 月更文挑战的第 20 天，活动详情查看： 8月更文挑战

前言

要说React Native的原理，我们就不得不先聊聊React了。

React 框架是一个非常优雅、现代的前端开发框架，通过数据驱动的模式，可以让我们可以更专注于开发业务逻辑。

React介绍

React 的组件是用户界面的最小元素，与外界的所有交互都通过 state 和 props 进行传递。通过这样的组件封装设计，使用声明式的编程方式，使得 React 的逻辑足够简化，并可以通过模块化开发逐步构建出项目的整体 UI。

React 框架中还有一个重要的概念是单向数据流，所有的数据流从父节点传递到子节点。假设父节点数据通过 props 传递到子节点，如果相对父节点（或者说相对顶层）传递的 props 值改变了，那么其所有的子节点（默认在没有使用 shouldComponentUpdate 进行优化的情况下）都会进行重新渲染，这样的设计使得组件足够扁平并且也便于维护。

import React, { Component } from 'react';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <div>
          <span>Hello world!</span>
        </div>
    );
  }
}

Virtual DOM

React 框架底层的核心为 Virtual DOM，也就是虚拟 DOM。那么，我们为什么需要虚拟DOM呢？

Virtual DOM是一种描述，而不是具体实现，这可以让我们可以通过Virtual DOM实现一码多用
频繁操作DOM是低效的，通过Virtual DOM的diff机制，可以合并和缩减操作次数

React Native介绍

在了解了React的关键机制后，会对我们学习React Native更有帮助。

Facebook 曾致力于使用 HTML 5 进行移动端的开发，最终发现与原生的 App 相比，体验上还是有非常大的差距，并且这种差距越来越大，特别是性能方面的差距。

最终，Facebook 放弃了 HTML 5 的技术方向，结合之前章节介绍的 React 框架的发展历史，2015 年 3 月，Facebook 正式发布了 React Native 框架，此框架专注于移动端 App 的开发。

在最初发布的版本中，我们只可以使用 React Native 框架开发 iOS 平台的 App，在 2015 年 9 月，Facebook 发布了支持 Android 平台的 React Native 框架。至此，React Native 框架真正实现了跨平台的移动 App 开发，此消息简直就是移动开发人员的福音。

React Native 框架在 React 框架的基础上，底层通过对 iOS 平台与 Android 平台原生代码的封装与调用，结合前台的 JavaScript 代码，这样我们就可以通过 JavaScript 代码编写出调用 iOS 平台与 Android 平台原生代码的 App，调用原生代码编写的 App 的性能远远优于使用 HTML 5 开发的 App 性能，因为 HTML 5 开发的 App 只是在 HTML 5 外部包裹上一个程序外壳后在移动平台上运行，在性能与可以实现的功能上都不能达到 React Native 框架的水准。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View>
          <Text>Hello world!</Text>
        </View>
    );
  }
}

我们可以看到，和传统的React开发相比，只是把DOM的描述替换成了react-native模块，react-native模块通过平台判断，继续渲染为对应的平台原生组件。