全文共1851字，预计学习时长10分钟
图源：unsplash
Create React App是一个命令行程序，它由React团队创建，可以为应用程序搭建了框架。你能够轻松创建一个新的React项目，并将此项目构建成可以部署的工件。
Create React App 3.3的升级更新中出现一些非常酷的新功能，包括一些ES2020标准版本会拥有功能。跟着笔者一起体验一下吧！
自定义模板
你可以使用Create React App 3.3中的自定义模板，来创建React项目。例如，如果要创建TypeScript React app，可以运行如下代码：
<code>npx create-react-app foo-app--template typescript/<code>
其中foo-app 是该应用程序项目的名称。
默认情况下，它附带两个模板：
<code>npx create-react-app foo-app --template typescript/<code>
无需指定--template选项来使用第一个模板，因为它在程序中是默认的。搜索更多模板，可以访问NPM的网站，并在浏览器中输入以下内容：
https://www.npmjs.com/search?q=cra-template-*
在设置 template选项时，可以删除前缀 cra-template-。还可以通过创建具有以下结构的文件来构建新模板：
<code>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)/<code>
数字分隔符
数字分隔符也是ES2020将要发布的一个新功能，尽管一些像Chrome这样的浏览器已经支持其最新版本。
图源：unsplash
可以使用数字分隔符将数字分成组块，这样就可以轻松读取它们。例如，可如下进行使用：
<code>importReactfrom"react";
importReactDOMfrom"react-dom";
classAppextendsReact.Component {
render() {
return (
<>
{1_000_000_000}
{1000_000_000.333_333}
>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);/<code>
上述代码中，使用下划线将数字分组，这样就可以轻松读取它们，而不必将其分成三个一组的模式。该功能也适用于十进制数。
可选链和空值合并运算符
这项功能将在ES2020中发布。但现在可以在Create React App3.3或其更高版本中运用该功能，来编写React应用程序。
可选链式运算符用?.来表示，可以使用该运算符来引用可能是“null”或“undefined”的嵌套属性。
图源：unsplash
如果试图访问深度嵌套的对象， “null”和“undefined”的检查工作量将大大节省。例如，可以如下进行使用：
<code>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>Click Me
{this.state.msg?.bar?.baz}
>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);/<buttononclick>/<code>
上述代码使用了以下代码中的可选链式运算符：
<code>{this.state.msg?.bar?.baz}
/<code>
因为this.state.msg可能没有bar属性。
当点击“ClickMe”按钮时，会看到“foo”这个词被转换为on和off。
空值合并运算符用于设置表达式的默认值。它由??符号来表示。例如，可以编写以下代码，在上述示例中添加一个默认值：
<code>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>Click Me
{this.state.msg?.bar?.baz ?? "bar"}
>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);/<buttononclick>/<code>
上述代码中存在：
<code>{this.state.msg?.bar?.baz?? "bar"}
/<code>
这样就可以显示出“bar”属性，表示this.state.msg?.bar?.baz为 null还是undefined的。
这和|| 的不同之处在于，??仅在其前面的表达式为 null或undefined 时返回默认值，而不是像|| 那样，返回所有错误值。
如果使用的是TypeScript，必须更新其版本才能使用这些功能。
禁止多行表达式
no-unexpected-multiline 的ESLint规则未被禁用，因为它与Prettier不兼容。但仍然可以在 .eslintrc中添加以下内容用以重新启用它：
<code>{
"extends": "react-app",
"rules": {
"no-unexpected-multiline": "warn"
}
}/<code>升级到3.3版本
为升级到ReactApp 3.3版本来使用这些新功能，请运行：
<code>npm install --save --save-exact [email protected]/<code>
在现有的React项目中使用NPM。如果使用的是Yarn，则运行：
<code>yarn add --exact [email protected]/<code>
图源：unsplash
CreateReact App 3.3虽然是一个次要的发布版本，但提供了一些有用的新功能，它使开发React应用变得更容易。在正式的ES2020标准版本发布之前，如可选链、空值合并运算符和数字分隔符等功能，可以选用这一版本以解燃眉之急。
我们一起分享AI学习与发展的干货
閱讀更多 讀芯術 的文章
