2023年1月14日，React Native官方發(fā)布了0.71版本，此版本帶來了很多重磅和突破性的更新，同時，感謝70多位貢獻(xiàn)者帶來的了1000多次提交。下面是0.71版本帶來的主要更新內(nèi)容：
- 默認(rèn)開發(fā)語言為TypeScript
- 使用Flexbox Gap使布局更加簡單
- 開發(fā)者體驗提升
- 有關(guān)新架構(gòu)內(nèi)容的升級
- 引入的部分web開發(fā)標(biāo)準(zhǔn)的屬性，樣式及事件
- 恢復(fù)PropTypes
- 其他更新
TypeScript成為默認(rèn)開發(fā)語言
從0.71版本開始，我們將React Native的默認(rèn)開發(fā)語言從JavaScript變成TypeScript，在新建的項目的時候會有所體現(xiàn)，與此同時項目根目錄會增加一個tsconfig.json文件用于輔助開發(fā)者編寫語法正確的Ts代碼。另外0.71版本因本身已支持ts，所以不需要再package.json文件中添加@types/react-native依賴。
有關(guān)TypeScript，我們可以將它理解為是增強(qiáng)版JavaScript。TypeScript 由微軟開發(fā)的自由和開源的編程語言，是 JavaScript 的一個超集，支持 ECMAScript 6 標(biāo)準(zhǔn)（ES6 教程）。TypeScript 設(shè)計的初衷就是為了應(yīng)對大型應(yīng)用開發(fā)，它可以編譯成純 JavaScript，最終運(yùn)行在瀏覽器環(huán)境中。
Flexbox Gap讓布局更加簡單
此版本引入了web開發(fā)標(biāo)準(zhǔn)的屬性gap、rowGap、columnGap，使用這些屬性可以很方便的設(shè)置組件間隔。并且，在未來的版本中，我們還會增加百分比布局。
那gap、rowGap、columnGap屬性究竟有什么用呢？比如設(shè)置組件之間間隔為margin: 10，其效果如下圖。
margin的作用就是用在所有子元素的外邊緣，并且在Flexbox布局中下不會失效，主要用于設(shè)置元素外部的間距。同時，我們還可以通過設(shè)置非均勻邊距、在父元素上使用負(fù)邊距等來使得布局開發(fā)變得更加容易。
比如，使用gap屬性，我們還可以在容器上設(shè)置gap: 10來實現(xiàn)卡片內(nèi)部邊距，如下圖所示:
如果想要了解更多Flexbox gaps的內(nèi)容，可以參考 blogpost from CSS Tricks。
Web屬性支持
此版本添加了很多Web屬性的支持，使得React Native的api和Web平保持一致，比如 accessibility, behavior和style props等。這些新屬性都是是附加的，因此對于等效的可訪問性、行為或樣式，不會出現(xiàn)什么異常影響，比如Image和TextInput組件。
Accessibility
比如，我們引入ARIA屬性作為React Native的基礎(chǔ)屬性。事實上，這些屬性存在我們幾乎所有的React Native組件中，比如aria-label, aria-labelledby,aria-modal, id, aria-busy, aria-checked, aria-disabled, aria-expanded, aria-selected, aria-valuemax, aria-valuemin, aria-valuenow, and aria-valuetext。
并且，我們即將在未來的版本中引入其他一些行為屬性，比如aria-hidden, aria-live, role和 tabIndex等。如果想要了解更多關(guān)于Accessibility的內(nèi)容，可以打開Web Props umbrella issue。
Specific Behavior
未來，為了對齊Web標(biāo)準(zhǔn)，我們還會再基礎(chǔ)組件中引入更多的可訪問性、行為或樣式等屬性，比如Image和TextInput組件。
- Image: alt, tintColor, crossOrigin, height, referrerPolicy, src, srcSet, and width.
- TextInput: autoComplete, enterKeyHint, inputMode, readOnly, and rows.
Styles
為了與Web平臺的css樣式保持一致，我們在React Native中添加了如下的樣式支持。
- aspectRatio：現(xiàn)在支持字符串類型的值
- fontVariant：現(xiàn)在支持空格分隔的字符串值
- fontWeight：現(xiàn)在支持?jǐn)?shù)值類型的值
- transform：現(xiàn)在支持字符串類型的值
同時，以下樣式屬性也被添加到現(xiàn)有React Native樣式中。
- objectFit
- pointerEvents
- userSelect
- verticalAlign
想要了解更多的Styles屬性，可以參考Web Styles umbrella issue。
Events
最后，我們還添加了PointerEvents可選擇項，一旦開啟這一特性，處理View視圖上的以下事件時將支持懸停。
- onPointerOver, onPointerOut
- onPointerEnter, onPointerLeave
當(dāng)然，上面的事件對于 React Native的Pressability也同樣適用。如果要開啟這一特性，需要將下面的內(nèi)容設(shè)置為true。
import ReactNativeFeatureFlags from 'react-native/Libraries/ReactNative/ReactNativeFeatureFlags';
// enable the JS-side of the w3c PointerEvent implementation
ReactNativeFeatureFlags.shouldEmitW3CPointerEvents = () => true;
// enable hover events in Pressibility to be backed by the PointerEvent implementation.
// shouldEmitW3CPointerEvents should also be true
ReactNativeFeatureFlags.shouldPressibilityUseW3CPointerEventsForHover =
() => true;
恢復(fù)PropTypes
React Native的prop，如ViewPropTypes和Text.propTypes，在0.66版本中被棄用，如果直接使用它們會輸出過時的警告，并且在0.68版本中我們移除了對prop的支持，如果在0.68及以上版本中使用它將會遇到錯誤。
不過，最近的一些調(diào)查讓我們意識到棄用這一特性是錯誤的。首先，棄用警告并不總是可行的，這導(dǎo)致人們忽視了它們（比如issue one， issue two） 。其次，LogBox.ignoreLogs錯誤地過濾了棄用警告。不過，現(xiàn)在這兩個問題都已經(jīng)得到修復(fù)。
因此，在這個版本中，我們將重新添加了React Native的propTypes，以便開發(fā)者更容易的升級和遷移代碼。同時，我們在0.71版本中更新了之前棄用的deprecated-react-native-prop-types插件包。不過，我們?nèi)匀挥媱澰谖磥項売貌h除props。我們期望當(dāng)我們重新移除時，社區(qū)不會出現(xiàn)之前那么多的問題。
開發(fā)者體驗改善
React DevTools
在這個版本中，我們增加了兩個比較好用的調(diào)試代碼工具，即點(diǎn)擊元素檢查和組件高亮。 這對于我們開發(fā)中調(diào)試布局頁面來說更加友好，也更加容易讓我們定位組件元素，下面是演示圖。
Hermes
在0.70版本中，我們將Hermes作為了React Native的默認(rèn)引擎。在0.71版本中，我們對Hermes引擎做了進(jìn)一步的升級，包括如下：
- JSON.parse性能提升30%
- 增加對String, TypedArray, and Array屬性at()的支持
- 在Metro中通過網(wǎng)絡(luò)實現(xiàn)加載source maps
新架構(gòu)
當(dāng)然，在這個版本中，我們也帶來了諸多關(guān)于新架構(gòu)體驗及性能方面的升級。
- 大幅度減少了Android平臺的編譯時間，并解決了諸多Window平臺的編譯問題
- 現(xiàn)在可以啟用新體系結(jié)構(gòu)，而無需在應(yīng)用程序中添加任何C++代碼，并且CLI應(yīng)用程序模板已清除所有C++代碼和CMake文件。
- 在iOS平臺設(shè)置開啟新架構(gòu)支持更加簡介
- 在iOS平臺，在podspec中新增了
install_module_dependencies函數(shù)用于管理所有需要的依賴項。
其他重大修復(fù)
- 更好的堆棧幀管理：我們已經(jīng)更新了React Native的內(nèi)部幀列表，因此調(diào)用LogBox將將會更加頻繁，可以幫助開發(fā)者更快地調(diào)試問題。
- 構(gòu)建時間改進(jìn)：我們將assets部分代碼遷移到Maven Central中，以改善Hermes在當(dāng)前和新架構(gòu)下的構(gòu)建時間(iOS和Android)。
- Android模板改進(jìn)：Android模板被清理，現(xiàn)在完全依賴于React Native Gradle插件，開發(fā)者可以直接在React Native Gradle Plugin中找到配置說明。
其他重大更新
除了上面的介紹的更新外，此版本還帶來了如下一些重大更新。
- 更改控制臺日志：現(xiàn)在直接使用LogBox.ignoreLog不再過濾控制臺日志，這意味著會在控制臺中看到LogBox中靜默的日志。有關(guān)更多細(xì)節(jié)，請參閱LogBox.isIgnoredLog() 。
- 移除AsyncStorage和MaskedViewIOS：這些組件在0.59版本已被棄用，所以是時候完全刪除它們了。對于替代方案，請查看React Native社區(qū)的替換方案。
- JSCRuntime移到react-jsc： react-jsi現(xiàn)在分為react-jsc和react-jsi兩部分。如果需要使用JSCRuntime，只需要添加react-jsc作為依賴項即可。
