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

全文共1851字,預計學習時長10分鐘


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

圖源:unsplash


Create React App是一個命令行程序,它由React團隊創建,可以為應用程序搭建了框架。你能夠輕鬆創建一個新的React項目,並將此項目構建成可以部署的工件。


Create React App 3.3的升級更新中出現一些非常酷的新功能,包括一些ES2020標準版本會擁有功能。跟著筆者一起體驗一下吧!


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

自定義模板


你可以使用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>


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

數字分隔符


數字分隔符也是ES2020將要發佈的一個新功能,儘管一些像Chrome這樣的瀏覽器已經支持其最新版本。


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

圖源: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>


上述代碼中,使用下劃線將數字分組,這樣就可以輕鬆讀取它們,而不必將其分成三個一組的模式。該功能也適用於十進制數。


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

可選鏈和空值合併運算符


這項功能將在ES2020中發佈。但現在可以在Create React App3.3或其更高版本中運用該功能,來編寫React應用程序。


可選鏈式運算符用?.來表示,可以使用該運算符來引用可能是“null”或“undefined”的嵌套屬性。


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

圖源: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,必須更新其版本才能使用這些功能。


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

禁止多行表達式


no-unexpected-multiline 的ESLint規則未被禁用,因為它與Prettier不兼容。但仍然可以在 .eslintrc中添加以下內容用以重新啟用它:


<code>{ 
"extends": "react-app",
"rules": {
"no-unexpected-multiline": "warn"

}
}/<code>


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

升級到3.3版本


為升級到ReactApp 3.3版本來使用這些新功能,請運行:


<code>npm install --save --save-exact [email protected]/<code>


在現有的React項目中使用NPM。如果使用的是Yarn,則運行:


<code>yarn add --exact [email protected]/<code>


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

圖源:unsplash


CreateReact App 3.3雖然是一個次要的發佈版本,但提供了一些有用的新功能,它使開發React應用變得更容易。在正式的ES2020標準版本發佈之前,如可選鏈、空值合併運算符和數字分隔符等功能,可以選用這一版本以解燃眉之急。


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

我們一起分享AI學習與發展的乾貨


分享到:


相關文章: