React Native:入门知识了解

发布时间:2023年12月17日

什么是React Native

React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。React Native使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。React Native使你只使用JavaScript也能编写原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。

想要了解更多,可以深入学习下

React Native 的基础是React, React是在 web 端非常流行的开源 UI 框架。要想掌握 React Native,先了解 React 框架本身是非常有帮助的,如果你想更深一步学习,我建议你阅读React 的官方文档

如何跨平台

React Native使用JavaScript语言进行开发,通过JavaScript引擎JavaScriptCore在原生平台中运行JavaScript代码。JavaScript层负责应用程序的逻辑和界面渲染,可以通过调用原生平台的API来实现与原生组件的交互。
每个平台(iOS和Android)都有自己的原生组件集,这些组件是用该平台特定的编程语言(如Swift和Java)编写的。React Native通过JavaScriptCore引擎与这些原生组件进行通信,从而在应用程序中使用它们。这样,开发者可以使用JavaScript和React编写代码,同时使用原生组件来实现应用程序的外观和功能。
但是Android使用JavaScriptCore存在性能问题。为了解决这个问题,2019年Facebook引入了新的JavaScript引擎Hermes
在这里插入图片描述

JSX 语法

JSX 语法是一种 JavaScript 语法扩展,它允许你在 JavaScript 代码中编写类似于 HTML 的结构。它是一种语法糖,使你在 JavaScript 中创建和操作对象和变量时,能够以更直观和易于理解的方式进行。

JSX 语法使用大括号 {} 来包围 JavaScript 表达式,从而允许在 JavaScript 代码中直接书写 HTML 标签。通过这种方式,你可以在 JSX 中直接使用 JavaScript 变量、函数和表达式。

const name = 'John';  
const age = 30;  
  
return (  
  <div>  
    <h1>{name}</h1>  
    <p>{age}</p>  
</div>  
);

React 和 React Native 都使用JSX 语法,关于JSX更多的学习,可以参考React JSX

JavaScript 和 TypeScript

2023年1月14日,React Native官方发布了0.71版本,默认开发语言为TypeScript(之前是JavaScript)。目前最新版本是0.73.0(2023年12月13日)。

JavaScript和TypeScript的主要区别在于以下几点:

  1. 类型系统: JavaScript是一种动态类型语言,变量的类型可以在运行时改变。而TypeScript是一种静态类型语言,变量在声明时必须指定类型,并且在整个生命周期中保持不变。
  2. 编译需求: JavaScript是解释型语言,不需要编译就可以运行。而TypeScript需要先编译成JavaScript,然后才能在浏览器或Node.js环境中运行。
  3. 类型推断: TypeScript具有更强大的类型推断功能,可以在不显式声明变量类型的情况下,根据上下文推断出变量的类型。而JavaScript的类型推断相对较弱,需要显式声明变量类型。
  4. 接口和类: TypeScript支持接口(Interfaces)和类(Classes),这些是JavaScript所没有的特性。这使得TypeScript更适合大型项目和面向对象的编程风格。
  5. 可选的静态类型: 虽然TypeScript是静态类型的,但它的类型检查是可选的。你可以在TypeScript代码中混合使用静态类型和动态类型,这使得TypeScript在灵活性上超过了纯JavaScript。
  6. 更严格的错误检查: TypeScript的编译器可以对代码进行更严格的错误检查,可以帮助开发者在早期发现并修复潜在的问题。

深入学习JavaScript
深入学习TypeScript

文件类型

在React Native开发中使用TypeScript语言,JSX语法,每个包含 JSX 的文件都必须使用 .tsx 文件扩展名(例:index.tsx)。这是一个 TypeScript 特定的扩展,告诉 TypeScript 该文件包含 JSX。

文章来源:https://blog.csdn.net/wujakf/article/details/134973366
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。