程序测评:Create React App 3.3中有哪些酷炫新功能?

全文共1851字，预计学习时长10分钟

Create React App是一个命令行程序，它由React团队创建，可以为应用程序搭建了框架。你能够轻松创建一个新的React项目，并将此项目构建成可以部署的工件。

Create React App 3.3的升级更新中出现一些非常酷的新功能，包括一些ES2020标准版本会拥有功能。跟着笔者一起体验一下吧！

自定义模板

你可以使用Create React App 3.3中的自定义模板，来创建React项目。例如，如果要创建TypeScript React app，可以运行如下代码：

npx create-react-app foo-app--template typescript

其中foo-app 是该应用程序项目的名称。

默认情况下，它附带两个模板：

npx create-react-app foo-app --template typescript

无需指定--template选项来使用第一个模板，因为它在程序中是默认的。搜索更多模板，可以访问NPM的网站，并在浏览器中输入以下内容：

https://www.npmjs.com/search?q=cra-template-*

在设置 template选项时，可以删除前缀 cra-template-。还可以通过创建具有以下结构的文件来构建新模板：

my-app/
  README.md (for npm)
  template.json
  package.json
  template/
    README.md (for projects created fromthis template)
    gitignore
    public/
      index.html
    src/
      index.js (or index.tsx)

数字分隔符

数字分隔符也是ES2020将要发布的一个新功能，尽管一些像Chrome这样的浏览器已经支持其最新版本。

可以使用数字分隔符将数字分成组块，这样就可以轻松读取它们。例如，可如下进行使用：

importReactfrom"react";
        importReactDOMfrom"react-dom";
        classAppextendsReact.Component {
          render() {
            return (
              <>
                <p>{1_000_000_000}</p>
                <p>{1000_000_000.333_333}</p>
              </>
            );
          }
        }
        const rootElement = document.getElementById("root");
        ReactDOM.render(<App />, rootElement);

上述代码中，使用下划线将数字分组，这样就可以轻松读取它们，而不必将其分成三个一组的模式。该功能也适用于十进制数。

可选链和空值合并运算符

这项功能将在ES2020中发布。但现在可以在Create React App3.3或其更高版本中运用该功能，来编写React应用程序。

可选链式运算符用?.来表示，可以使用该运算符来引用可能是“null”或“undefined”的嵌套属性。

如果试图访问深度嵌套的对象， “null”和“undefined”的检查工作量将大大节省。例如，可以如下进行使用：

importReactfrom"react";
        importReactDOMfrom"react-dom";
        classAppextendsReact.Component {
          constructor(props) {
            super(props);
            this.state= { msg: {} };
          }
          onClick() {
            if (this.state.msg?.bar?.baz) {
              this.setState({ msg: {} });
            } else {
              this.setState({ msg: { bar: { baz: "foo" } } });
            }
          }
          render() {
            return (
              <>
                <buttononClick={this.onClick.bind(this)}>Click Me</button>
                <p>{this.state.msg?.bar?.baz}</p>
              </>
            );
          }
        }
        const rootElement = document.getElementById("root");
        ReactDOM.render(<App />, rootElement);

上述代码使用了以下代码中的可选链式运算符：

<p>{this.state.msg?.bar?.baz}</p>

因为this.state.msg可能没有bar属性。

当点击“ClickMe”按钮时，会看到“foo”这个词被转换为on和off。

空值合并运算符用于设置表达式的默认值。它由??符号来表示。例如，可以编写以下代码，在上述示例中添加一个默认值：

importReactfrom"react";
        importReactDOMfrom"react-dom";
        classAppextendsReact.Component {
          constructor(props) {
            super(props);
            this.state= { msg: {} };
          }
          onClick() {
            if (this.state.msg?.bar?.baz) {
              this.setState({ msg: {} });
            } else {
              this.setState({ msg: { bar: { baz: "foo" } } });
            }
          }
          render() {
            return (
              <>
                <buttononClick={this.onClick.bind(this)}>Click Me</button>
                <p>{this.state.msg?.bar?.baz ?? "bar"}</p>
              </>
            );
          }
        }
        const rootElement = document.getElementById("root");
        ReactDOM.render(<App />, rootElement);

上述代码中存在：

<p>{this.state.msg?.bar?.baz?? "bar"}</p>

这样就可以显示出“bar”属性，表示this.state.msg?.bar?.baz为 null还是undefined的。

这和|| 的不同之处在于，??仅在其前面的表达式为 null或undefined 时返回默认值，而不是像|| 那样，返回所有错误值。

如果使用的是TypeScript，必须更新其版本才能使用这些功能。

禁止多行表达式

no-unexpected-multiline 的ESLint规则未被禁用，因为它与Prettier不兼容。但仍然可以在 .eslintrc中添加以下内容用以重新启用它：

{ 
 "extends": "react-app", 
 "rules": { 
   "no-unexpected-multiline": "warn" 
 } 
}

升级到3.3版本

为升级到ReactApp 3.3版本来使用这些新功能，请运行：

npm install --save --save-exact react-scripts@3.3.0

在现有的React项目中使用NPM。如果使用的是Yarn，则运行：

yarn add --exact react-scripts@3.3.0

CreateReact App 3.3虽然是一个次要的发布版本，但提供了一些有用的新功能，它使开发React应用变得更容易。在正式的ES2020标准版本发布之前，如可选链、空值合并运算符和数字分隔符等功能，可以选用这一版本以解燃眉之急。

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范