React 17是獨(dú)特的。您幾乎不會(huì)注意到任何新功能夷家。但是蒸其，您可以找到對(duì)React核心的一些有重大影響的改進(jìn)。其中库快，對(duì)JSX的更改非常引人注目摸袁。
本文將討論JSX的改進(jìn)，背后的動(dòng)機(jī)以及每個(gè)開發(fā)人員在升級(jí)到React 17之前應(yīng)了解的知識(shí)义屏。
首先靠汁，讓我們看看您將從外部經(jīng)歷的變化。
開發(fā)人員的可見變化
對(duì)React 17進(jìn)行一次表面檢查肯定會(huì)讓您印象深刻闽铐。真正令人興奮的東西不是新功能蝶怔，而是React編譯的方式。
為了更好地理解這些內(nèi)容兄墅，我們來看一下使用舊版React的組件中JSX的編譯代碼踢星。
在React 17之前
您可能會(huì)注意到編譯后的版本使用React.createElement，其中React依賴項(xiàng)在范圍中應(yīng)該可用察迟。這就是為什么您需要在每個(gè)組件中首先導(dǎo)入React的原因斩狱。
現(xiàn)在讓我們看一下它如何與React 17一起工作。
使用React 17扎瓶，您不需要將React導(dǎo)入JSX
我希望可以提供一個(gè)提示所踊，說明編譯后的版本不需要React導(dǎo)入。如下圖所示概荷，React 17編譯器從導(dǎo)入一個(gè)新的依賴項(xiàng)react/jsx-runtime秕岛，該依賴項(xiàng)處理JSX轉(zhuǎn)換。
帶有React 17的新JSX轉(zhuǎn)換
因此，作為開發(fā)人員继薛，一旦升級(jí)到React 17修壕，就可以從組件代碼中刪除React導(dǎo)入（如果僅適用于JSX）。
但這是唯一的變化嗎遏考？
正如您已經(jīng)注意到的那樣慈鸠，從外部看，效果似乎無關(guān)緊要灌具。
重要的是要了解青团，當(dāng)代碼庫中有更多React組件時(shí)，整體效果將是可見的
為了更好地理解其影響咖楣，讓我們看一下為什么要?jiǎng)h除與React.createElementJSX有關(guān)的依賴關(guān)系督笆。
移除 React.createElement帶來的好處
減小包裝尺寸
隨著React import的移除，編譯后的捆綁輸出的大小將變得稍小诱贿。我希望它變得顯而易見娃肿，因?yàn)槲覀冃枰獜拿總€(gè)組件中刪除React導(dǎo)入，在該組件中編譯器將它替換為React中的子模塊珠十，如下所示料扰。
import {jsx as _jsx} from 'react/jsx-runtime';
共享組件變得更加容易
聽起來可能并不多，但是每當(dāng)將React組件從React項(xiàng)目共享到Bit.dev或?qū)⒔M件發(fā)布到NPM時(shí)宵睦，您始終需要確保react未將其配置為记罚，dependency而是配置為peerDependency。這樣做是為了減小組件的捆綁大小壳嚎，并防止在不同版本下多次安裝React的情況（在應(yīng)用程序中使用共享組件時(shí)）桐智。
React在Bit.dev上共享的組件
減少動(dòng)態(tài)屬性查找
由于React 17不再將React.createElement用于JSX，因此無需進(jìn)行動(dòng)態(tài)屬性查找烟馅。如前所述说庭，您可以在前端代碼庫的編譯版本中找到它。
但是郑趁，此處的性能提升非常小刊驴，您幾乎不會(huì)注意到其中的區(qū)別
這是因?yàn)楝F(xiàn)代JavaScript引擎主要針對(duì)動(dòng)態(tài)屬性查找進(jìn)行了優(yōu)化。
那么我們需要帶有React 17的React.createElement嗎寡润？
React.createElement如果要在JSX之外創(chuàng)建動(dòng)態(tài)元素捆憎，則仍然需要該方法。
如果需要在代碼中手動(dòng)創(chuàng)建元素梭纹，則應(yīng)繼續(xù)使用React.createElement
此外躲惰，您可能想知道，我們是否仍在使用react/jsx-runtimeJSX代替React.createElementReact 17变抽，并且這些問題是否已解決础拨？簡而言之氮块，是的！
當(dāng)我們查看新功能時(shí)诡宗，react/jsx-runtime它將帶來一些設(shè)計(jì)更改滔蝉，以避免React.createElement方法中出現(xiàn)的瓶頸。引入了其中的一些更改以發(fā)展未來的體系結(jié)構(gòu)塔沃。
作為開發(fā)人員蝠引，我還應(yīng)該知道什么？
好吧芳悲，這不過是棄用通知而已立肘。在React 17 JSX的更改中，您應(yīng)該注意到一些注意事項(xiàng)名扛。
棄用“module pattern”組件
const Foo = (props) => {
return {
onClick() {
//...
}
render() {
return <div onClick={this.onClick.bind(this)} />;
}
}
};
但是，通過執(zhí)行下面提到的兩個(gè)更改茧痒，升級(jí)起來會(huì)更容易肮韧。
- 使用函數(shù)表達(dá)式而不是箭頭函數(shù)。
- 添加一個(gè)帶有
isReactComponent的prototype旺订，以告知React區(qū)分類和函數(shù)組件弄企。
結(jié)果如下。
function Foo(props) {
return {
onClick() {
//...
}
render() {
return <div onClick={this.onClick.bind(this)} />;
}
}
};
Foo.prototype = { isReactComponent: true};
同樣区拳，將有的棄用通知拘领；
- 不贊成使用
defaultProps功能組件。 - 從對(duì)象棄用散布密鑰樱调。
- 棄用字符串引用（并刪除生產(chǎn)模式_owner字段）约素。
但是，這些警告并不是遷移到React 17的障礙笆凌。您也將有時(shí)間直到下一個(gè)主要版本進(jìn)行升級(jí)圣猎。
結(jié)論
JSX轉(zhuǎn)換的好消息是它向后兼容，只需很少的更改即可升級(jí)到React17乞而。但是我覺得影響可能會(huì)更好送悔，因?yàn)楫?dāng)前的改進(jìn)在現(xiàn)實(shí)世界中幾乎是看不到的。
但是爪模，了解這些改進(jìn)中的大多數(shù)將有助于加快將來的發(fā)布速度也很重要欠啤。因此，升級(jí)到React 17將使您的代碼庫成為未來的證明屋灌。而且您不需要提醒自己將React import保留在JSX文件中洁段。
此外，如果您從舊版本升級(jí)声滥，則值得參考棄用聲明眉撵，以免將來出現(xiàn)麻煩侦香。
