[[400861]]

今天分享的內(nèi)容是React 17中JSX的新特性。

正文

本文主要介紹React 17中JSX的新特性以及你為什么要關(guān)注它。

React 17的發(fā)布是獨(dú)一無(wú)二的。幾乎沒(méi)有任何你會(huì)注意到的新功能。然而，你可以找到幾個(gè)對(duì)React核心影響很大的改進(jìn)。在這些改進(jìn)中，JJSX的變化是非常明顯的。

本文將討論JSX的改進(jìn)，它們背后的動(dòng)機(jī)，以及每個(gè)開(kāi)發(fā)者在升級(jí)到React 17之前應(yīng)該知道的事情。

首先，最重要的是，讓我們看看你將從外部體驗(yàn)到的變化。

對(duì)開(kāi)發(fā)者來(lái)說(shuō)，可見(jiàn)的變化

對(duì)React 17的膚淺研究肯定會(huì)讓你印象不深。真正令人興奮的東西不是新功能，而是在React的編譯方式。

為了更好地理解這些，讓我們看一下使用舊版React的組件中的JSX的編譯代碼。

Before React 17

你可能會(huì)注意到，編譯后的版本使用React.createElement，其中React的依賴性應(yīng)該在范圍內(nèi)可用。這就是為什么你需要在每個(gè)組件中首先導(dǎo)入React。

現(xiàn)在讓我們來(lái)看看它在React 17中是如何工作的。

有了React 17，你就不需要為JSX導(dǎo)入React了。

我希望這能提供一個(gè)線索，即編譯后的版本不需要React的導(dǎo)入。

正如你在下圖中看到的，React 17編譯器從react/jsx-runtime導(dǎo)入了一個(gè)新的依賴項(xiàng)，它處理JJSX轉(zhuǎn)換。

New JSX Transform with React 17

因此，作為開(kāi)發(fā)者，一旦你升級(jí)到React 17，你可以從你的組件的代碼中刪除React導(dǎo)入，如果它只是為了JSX而存在。

但這是唯一的變化嗎，有關(guān)系嗎?

正如你已經(jīng)注意到的，從外面看效果似乎無(wú)關(guān)緊要。

重要的是要明白，當(dāng)你的代碼庫(kù)中有更多的React組件時(shí)，整體效果會(huì)顯現(xiàn)出來(lái)

為了更好地理解這種影響，讓我們看看為什么取消與React.createElement的依賴關(guān)系對(duì)JSX很重要。

刪除createElement的好處

首先做個(gè)總結(jié)的話，有幾個(gè)點(diǎn):

減少捆綁文件的大小

減少動(dòng)態(tài)屬性查詢

Props、Args和KeyRef相關(guān)的改進(jìn)

減少捆綁文件的大小

首先，可以想到的一點(diǎn)是：減少捆綁文件的大小。

隨著React導(dǎo)入的刪除，你的編譯捆綁輸出的大小將變得稍微小一些。我希望這一點(diǎn)變得很明顯，因?yàn)槲覀冃枰诰幾g器將其替換為React中的子模塊的每個(gè)組件中刪除React導(dǎo)入，如下所示：

import {jsx as _jsx} from 'react/jsx-runtime'; 

減少動(dòng)態(tài)屬性查詢

由于React 17不再為JSX使用React.createElement，因此消除了對(duì)動(dòng)態(tài)屬性查找的需要。正如前面所討論的，你可以在前端代碼庫(kù)的編譯版本中找到這個(gè)。

然而，這里的性能改進(jìn)是非常小的，在這里你幾乎不會(huì)注意到差異 這是因?yàn)楝F(xiàn)代的JavaScript引擎主要是針對(duì)動(dòng)態(tài)屬性查詢進(jìn)行優(yōu)化的。

Props、Args和KeyRef相關(guān)的改進(jìn)

好吧，我只是想告訴你，這些改進(jìn)存在于React 17中。然而，這些改進(jìn)太過(guò)技術(shù)性，無(wú)法詳述。如果你有興趣，你可以在Motivation部分的create-element-changes中閱讀它們。

需要用React17嗎

如果你在JSX之外創(chuàng)建動(dòng)態(tài)元素，你仍然需要React.createElement方法。

如果你需要在你的代碼中手動(dòng)創(chuàng)建元素，你應(yīng)該繼續(xù)使用React.createElement。

此外，你可能會(huì)想，我們不是還在使用react/jsx-runtime來(lái)替代React 17的React.createElement的JSX嗎，這些問(wèn)題在那里得到了解決嗎?簡(jiǎn)而言之，是的!

當(dāng)我們看新的react/jsx-runtime時(shí)，它帶來(lái)了一些設(shè)計(jì)上的變化，以避免React.createElement方法中出現(xiàn)的瓶頸問(wèn)題。

其中一些變化的引入是為了在未來(lái)的架構(gòu)中有所發(fā)展。

你可以在詳細(xì)設(shè)計(jì)部分下的同一鏈接create-element-changes中閱讀這些內(nèi)容。鏈接:

https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md#motivation

你還應(yīng)該知道什么?

嗯，這不是別的，而是廢棄通知。

在React 17 JSX的變化中，有幾個(gè)通知是你應(yīng)該注意的。

廢除 "模塊模式 "組件

const Foo = (props) => { 
  return { 
    onClick() { 
      //... 
    } 
    render() { 
      return <div onClick={this.onClick.bind(this)} />; 
    } 
  } 
}; 

 然而，通過(guò)做下面提到的兩個(gè)改變，升級(jí)會(huì)更容易。

function Foo(props) { 
  return { 
    onClick() { 
      //... 
    } 
    render() { 
      return <div onClick={this.onClick.bind(this)} />; 
    } 
  } 
}; 
Foo.prototype = { isReactComponent: true};