本文章适用于希望应用现在RN致死后来使用Flutter构建移动应用程序的React Native开发人员。如果您了解RN框架的基础知识，那么您可以使用本文章作为开始学习Flutter的一种方式是。

面向JavaScript开发人员的Dart简介

与React Natiive一样，Flutter使用反应式三视图。然而，当RN转换为原生widget时，Flutter一直编译为原生代码。Flutter控制屏幕上的每个像素，这避免了由于需要JavaScript侨接而导致的性能问题。

Dart是一种易于学习的语言，并提供以下功能：

提供用于构建Web、服务器和移动应用程序的开源、可扩展的编程语言。
提供一种面向对象的单继承语言，它使用AOT编译为本机的C-style语法。
可选择转换为JavaScript。
支持接口和抽象类。

下面描述了JavaScript和Dart锥尖差异的几个示例。

一、入口点

JavaScript没有预定义的入口函数——您定义入口点。

// JavaScript
function startHere() {
    // Can be used as entry point
}

在Dart中，每个应用程序都必须一个顶级main()函数作为应用程序的入口点。

/// Dart
void main() {}

二、打印到控制台

要在Dart中打印到控制台，请使用print()

// JavaScript
console.log('Hello world!');

/// Dart
print('Hello world!');

三、变量

Dart是类型安全的——它结合使用静态类型检查和运行时检查来确保变量的值始终与变量的静态类型相匹配。虽然类型是强制性的，但一些类型注释是可选的，因为Dart执行类型推断。

3.1、创建和分配变量

在JavaScript中，不能设置类型，因为是弱类型语言。

在Dart中，变量必须明确类型化，或者类型系统必须自动推断出正确的类型。

// JavaScript
var name = 'JavaScript';

/// Dart
/// Bothh variables are acceptable.
String name = 'dart';// Explicitly typed as a [String]
var otherName = 'Dart';// Inferred [String] type.

有关详细信息，请参阅Dart 的类型系统

3.2、默认值

在JavaScript中，未初始化的变量是undefined.

在Dart中，未初始化的变量的初始值为null.因为数字是Dart中的对象，所以即使是数字类型的未初始化也具有值null。

注意： 从 2.12 开始，Dart 支持Sound Null Safety，所有底层类型默认都是不可空的，必须初始化为不可空值。

// JavaScript
var name; // == undefined

// Dart
var name; // == null; raises a linter warning
int? x; // == null

有关详细信息，请参阅有关变量的文档。

四、检查空值或零

在JavaScript中，值1或任何非空对象都被视为true使用==比较运算符。

// JavaScript
var myNull = null;
if (!myNull) {
    console.log('null is treated as false');
}
var zero = 0;
if (!zero) {
    console.log('0 is treated as false');
}

在Dart中，只有布尔值true`被视为true。

/// Dart
var myNull;
if (myNull == null) {
    print('use "== null" to check null');
}
var zero = 0;
if (zero == 0) {
    print('user "== 0" too check zero');
}

五、方法

Dart和JavaScript的功能大体相似。主要区别在于声明。

// JavaScript
function fn() {
    return true;
}

/// Dart
/// You can explicitly define the return type.
bool fn() {
    return true;
}

有关更多信息，请参阅有关函数的文档。

六、异步编程

6.1、Futures

与JavaScript一样，Dart支持单线程执行。在JavaScript中，Promise对象表示异步操作的最终完成（或失败）及其结果值。

Dart使用Future对象来处理这个问题。

// JavaScript
class Example {
    _getIPAddress() {
        const url = 'https://httpbin.org/ip';
        return fetch(url)
            .then(response => response.json())
            .then(ressponseJson => {
                const ip = responseJson.origin;
                return ip;
            });
    }
}

function main() {
    const example = new Example();
    example
        ._getIPAddress()
        .then(ip => console.log(ip))
        .catch(error => console.error(error));
}

main();

/// Dart
import 'dart:convert';
import 'package:http:http.dart' as http;

class Example {
    Future<String> _getIPAddress() {
        final url = Uri.https('httpbin.org', '/ip');
        return http.get(url).then((response) {
            String ip = jsonDecode(response.body)['origin'];
            return ip;
        });
    }
}

void main() {
    final example = Example();
    example
        ._getIPAddress()
        .then((ip) => print(ip))
        .catchError((error) => print(error));
}

有关详细信息，请参阅有关 Future对象的文档。

6.2、async和await

函数声明定义了async一个异步函数。

在JavaScript中，该async函数返回一个Promise。该await运算符用于等待一个Promise.

// JavaScript
class Example {
    async function _getIPAddress() {
        const url = 'https://httpbin.org/ip';
        const response = await fetch(url);
        const json = await response.json();
        const data = json.origin;
        return data;
    }
}

async function main() {
    const example = new Example();
    try {
        const ip = await example._getIPAddress();
        console.log(ip);
    } catch (error) {
        console.error(error);
    }
}

main();

在Dart中，async函数返回Future,函数体被安排在稍后执行。该await运算符用于等待一个Future。

/// Dart
import 'dart:convert';

import 'package:http/http.dart' as http;

class Example {
    Future<String> _getIPAddress() async {
        final url = Uri.https('httpbin.org', '/ip');
        final response = await http.get(url);
        String ip = jsonDecode(response.body)['origin'];
        return ip;
    }
}

/// An async function returns a 'Future'
/// It can also return 'void', unless you see
/// the 'avoid_void_async' lint. In that case,
/// return 'Future<void>'

void main() async {
    final example = Example();
    try {
        final ip = await example._getIPAddress();
        print(ip);
    } catch (error) {
        print(error);
    }
}

有关详细信息，请参阅async 和 await的文档。

文章版权归作者所有，未经允许请勿转载。

THE END