ECMAScript 2018（ES9）中的视图层框架 - react-JavaScript中文网-JavaScript教程资源分享门户

随着互联网时代的到来，Web开发变得越来越流行。与之相应的，前端技术也得到了极大地发展，React作为当今最流行的前端框架之一，在2013年被Facebook发布。它是一种用于构建用户界面的JavaScript库，现已成为前端页面开发的事实标准。本文将与读者分享React在ECMAScript 2018中的新特性和用法。

React的安装与基本用法

在使用React前，我们需要安装它及其相关的工具。在这里，我们可以使用著名的Node.js包管理工具npm进行React的安装，npm可以在https://npmjs.com官网获取并安装。在安装完成npm后，可以执行以下命令安装React：

npm install react --save

安装完成后，我们可以通过以下方式进行React的引用并输出"Hello, World!"：

import React from 'react';
import { render } from 'react-dom';

const App = () => (
  <div>Hello, World!</div>
);

render(<App />, document.getElementById('app'))

这里的render() 函数将模板App输出到HTML的id为 "app" 的元素中。

什么是ECMAScript 2018及其新特性？

ECMAScript 2018（或称为ES9）是JavaScript的最新规范，它于2018年被发布。它引入了许多新特性和各种语言框架之间的衔接，其中最受欢迎的新特性之一是异步迭代器。通过异步迭代器，我们可以更好地控制异步事件的流。

针对React，最新规范中改进了对象语法，以更好地满足React的需求。仅举几个例子：

属性初始化程序

属性初始化程序是一种新的对象语法，它允许对象使用与上下文无关的引用声明属性。在之前的ECMAScript规范中，我们需要将一个程序分解成多个小类，这样就会导致代码量的增加。现在，我们可以使用属性初始化程序来使代码变得更加简洁易懂。

举个例子，这段代码：

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

现在可以改为：

class User {
  firstName = '';
  lastName = '';
  constructor() {}
}

模板字面量扩展

模板字面量是 JavaScript 的字符串语法，允许我们通过字符串插值在字符串中使用表达式。在之前的ECMAScript规范中，如果我们需要整合多个字符串，需要使用加号"+",这可能会导致代码混乱和缩进问题。现在在ES9中，我们可以使用新的模板字面量扩展语法来使多个字符串的拼接变得更加可读性更强。

const firstName = 'Alex';
const lastName = 'Wilson';

console.log(`My name is ${firstName} ${lastName}.`);

异步迭代器

异步迭代器是ECMAScript 2018 中的另一个重要特性，它通过引入异步迭代器协议，与异步迭代生成器协议一起，为基于Promise的异步事件流增加了内置支持。

举个例子，假设我们需要从 Internet 上的某个地方获取一组数据并迭代其中的每个元素，我们可以使用以下编程范式：

async function demo() {
  const data = await fetch('/my/data.json');
  const json = await data.json();
  for await (const item of json) {
    // ...do something with item...
  }
}

在React中使用异步迭代器

React中的异步数据处理通常都是通过前端框架的配套功能来实现的，这个过程中异步迭代器也占据了重要的作用。

假设我们是通过异步迭代器从某个接口中获取数据，我们可以想象这个过程被分成三个阶段，每个阶段都有自己的函数：

getUsers -> fetchUsers -> parseUsers

我们现在将解析用户细节的 parseUsers() 函数抽离出来，并将其编写为返回用于 uesEffect() 钩子的异步迭代器函数：

export async function* getUserDetail(users) {
  for (const user of users) {
    const res = await fetch(`https://example.com/users/${user.id}/details`);
    const userDetail = await res.json();
    yield { ...user, ...userDetail };
  }
}

我们现在将获取用户 getUsers() 函数改写成异步函数，并使用 for-await-of 循环迭代器来遍历用户列表，并且将其传递给 getUserDetail()：

async function getUsers() {
  const res = await fetch('https://example.com/users');
  const users = await res.json();
  const detailedUsers = [];

  for await (const user of getUserDetail(users)) {
    detailedUsers.push(user);
  }

  return detailedUsers;
}

总结

在ECMAScript 2018中，React者可以更好地控制异步事件的流，使代码变得更加简洁易懂，同时还可以使用异步迭代器来解析用户的细节。这为React开发者提供了更多可能性，使得其前端应用程序更加健壮和高效。React在我们的Web应用程序中占据了重要的地位，现在，它变得越来越强大了。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a343faadd4f0e0ffb60e14

ECMAScript 2018（ES9）中的视图层框架 - react