資訊專欄INFORMATION COLUMN
摘要：更新日志應(yīng)對添加以編程方式收集性能測量。在和在將棄用為常見攻擊面。添加對事件的支持。在從調(diào)用時發(fā)出警告，創(chuàng)建循環(huán)。在和從錯誤的渲染器使用時發(fā)出警告。
2019年8月8日，我們發(fā)布了React 16.9。它包含幾個新功能，錯誤修正和新的棄用警告，以幫助準(zhǔn)備未來的主要版本。
新的版本：
重命名不安全的生命周期方法
一年多以前，我們宣布重新命名不安全的生命周期方法：
componentWillMount → UNSAFE_componentWillMount componentWillReceiveProps → UNSAFE_componentWillReceiveProps componentWillUpdate → UNSAFE_componentWillUpdate
React 16.9不包含重大更改，舊版本名稱在此版本中繼續(xù)有效。但是，當(dāng)您使用任何舊名稱時，您將看到警告：
警告：componentWillMount已重命名，不建議使用。
正如警告所示，每種不安全方法通常都有更好的方法。但是，您可能沒有時間遷移或測試這些組件。在這種情況下，我們建議運(yùn)行一個“codemod”腳本，自動重命名它們：
npx react-codemod rename-unsafe-lifecycles
（注意它說npx，不是npm。npx默認(rèn)情況下是Node 6+附帶的實用程序。）
運(yùn)行此codemod將替換舊名稱，如componentWillMount新名稱，如UNSAFE_componentWillMount：
Codemod在行動
新的名字 UNSAFE_componentWillMount 將繼續(xù)在React 16.9和React 17.x中運(yùn)行。但是，新的UNSAFE_前綴將幫助具有問題模式的組件在代碼審查和調(diào)試會話期間脫穎而出。（如果您愿意，可以通過選擇嚴(yán)格模式進(jìn)一步阻止他們在您的應(yīng)用中使用。）
注意
詳細(xì)了解我們的版本政策和對穩(wěn)定性的承諾。
棄用javascript:網(wǎng)址
以...開頭的URL javascript:是一個危險的攻擊面，因為它很容易在標(biāo)簽中意外包含未經(jīng)過類型化的輸出 a標(biāo)簽，并創(chuàng)建一個安全漏洞：
const userProfile = {
website: "javascript: alert("you got hacked")",
};
// This will now warn:
Profile
在React 16.9中，此模式繼續(xù)有效，但它將記錄警告。如果您使用javascript:URL作為邏輯，請嘗試使用React事件處理程序。（作為最后的手段，你可以繞過保護(hù)dangerouslySetInnerHTML，但是它非常氣餒并經(jīng)常導(dǎo)致安全漏洞。）
在未來的主要版本中，如果遇到javascript:URL ， React將拋出錯誤。
棄用“工廠”組件
在使用Babel編譯JavaScript類之前變得流行之前，React支持使用render方法返回對象的“工廠”組件：
function FactoryComponent() {
return { render() { return ; } }
}
這種模式令人困惑，因為它看起來太像一個功能組件 - 但它不是一個。（函數(shù)組件只會
在上面的例子中返回。）這種模式幾乎從未在野外使用，并且支持它會導(dǎo)致React略大且比必要的慢。因此，我們在16.9中棄用此模式，并在遇到警告時記錄警告。如果您依賴它，添加FactoryComponent.prototype = React.Component.prototype可以作為一種解決方法。或者，您可以將其轉(zhuǎn)換為類或函數(shù)組件。
我們不希望大多數(shù)代碼庫受此影響。
新功能 異步act()測試React 16.8引入了一個新的測試實用程序，act()用于幫助您編寫更符合瀏覽器行為的測試。例如，一次act()獲取批量內(nèi)的多個狀態(tài)更新。這與React在處理真實瀏覽器事件時的工作方式相匹配，并有助于為將來React將更頻繁地批量更新的組件做好準(zhǔn)備。
但是，在16.8中act()僅支持同步功能。有時，您可能在測試中看到過類似的警告但無法輕松修復(fù)它：
An update to SomeComponent inside a test was not wrapped in act(...).
在React 16.9中，act()也接受異步函數(shù)，你可以await調(diào)用它：
await act(async () => {
// ...
});
這解決了act()以前無法使用的其余情況，例如狀態(tài)更新在異步函數(shù)內(nèi)部時。因此，您應(yīng)該能夠立即修復(fù)act()測試中的所有剩余警告。
我們聽說沒有足夠的信息來說明如何編寫測試act()。新的“ 測試食譜”指南介紹了常見的場景，以及如何act()幫助您編寫好的測試。這些示例使用vanilla DOM API，但您也可以使用React Testing Library來減少樣板代碼。它的許多方法已在act()內(nèi)部使用。
如果您碰到任何其他不適合您的情況，請告知我們問題跟蹤器act()，我們會盡力提供幫助。
性能測量在React 16.5中，我們?yōu)镈evTools引入了一個新的React Profiler，它可以幫助您找到應(yīng)用程序中的性能瓶頸。在React 16.9中，我們還添加了一種編程方式來收集所謂的測量
該
render();
要了解更多有關(guān)Profiler并傳遞給參數(shù)onRender回調(diào)，檢查出的Profiler文檔。
注意：
分析會增加一些額外的開銷，因此在生產(chǎn)構(gòu)建中禁用它。
為了選擇生產(chǎn)分析，React提供了一個特殊的生產(chǎn)構(gòu)建，并啟用了分析。閱讀有關(guān)如何在fb.me/react-profiling中使用此構(gòu)建的更多信息。
值得注意的錯誤修正
此版本包含一些其他顯著的改進(jìn)：
修復(fù)findDOMNode()了在
保留刪除的子樹導(dǎo)致的內(nèi)存泄漏也已得到修復(fù)。
由setStatein 引起的無限循環(huán)useEffect現(xiàn)在記錄錯誤。（這類似于你看，當(dāng)你調(diào)用錯誤setState中componentDidUpdate的一類。）
我們感謝所有幫助解決這些問題和其他問題的貢獻(xiàn)者。您可以在下面找到完整的更改日志。
路線圖的更新
在2018年11月，我們發(fā)布了16.x版本的路線圖：
帶有React Hooks的小型16.x版本（過去估計：2019年第一季度）
帶有并發(fā)模式的小型16.x版本（過去的估計：2019年第二季度）
帶有Suspense for Data Fetching的未成年人16.x版本（過去估計：2019年中）
這些估計太樂觀了，我們需要調(diào)整它們。
tldr：我們按時發(fā)布了Hooks，但我們正在將Concurrent Mode和Suspense for Data Fetching重新組合成一個我們打算在今年晚些時候發(fā)布的版本。
2月份，我們發(fā)布了一個穩(wěn)定的16.8版本，包括React Hooks，一個月后 React Native支持。但是，我們低估了此版本的后續(xù)工作，包括lint規(guī)則，開發(fā)人員工具，示例和更多文檔。這使時間線改變了幾個月。
現(xiàn)在React Hooks已經(jīng)推出，并行模式和數(shù)據(jù)提取的懸念工作正在全面展開。目前正在積極開發(fā)的新Facebook網(wǎng)站建立在這些功能之上。使用真實代碼對它們進(jìn)行測試有助于在影響開源用戶之前發(fā)現(xiàn)并解決許多問題。其中一些修復(fù)涉及這些功能的內(nèi)部重新設(shè)計，這也導(dǎo)致時間線滑落。
有了這種新的理解，這就是我們計劃下一步做的事情。
一個發(fā)行而不是兩個
Concurrent Mode和Suspense 為正在積極開發(fā)的新Facebook網(wǎng)站提供支持，因此我們有信心他們在技術(shù)上接近穩(wěn)定狀態(tài)。我們現(xiàn)在也更好地了解了它們?yōu)殚_源采用做好準(zhǔn)備之前的具體步驟。
最初我們認(rèn)為我們會將Concurrent Mode和Suspense for Data Fetching分成兩個版本。我們發(fā)現(xiàn)這種排序很難解釋，因為這些特征與我們最初想到的相關(guān)性更大。因此，我們計劃在單個組合版本中發(fā)布對Concurrent Mode和Suspense for Data Fetching的支持。
我們不希望再次過度推銷發(fā)布日期。鑒于我們在生產(chǎn)代碼中依賴于它們，我們希望今年能夠提供16.x版本，并為其提供選擇支持。
數(shù)據(jù)提取的更新
雖然React并未就如何獲取數(shù)據(jù)發(fā)表意見，但數(shù)據(jù)提取的Suspense的第一個版本可能會專注于與固定數(shù)據(jù)提取庫集成。例如，在Facebook，我們正在使用與Suspense集成的即將推出的Relay API。我們將記錄像Apollo這樣的其他自以為是的圖書館如何支持類似的整合。
在第一個版本中，我們不打算關(guān)注我們在早期演示中使用的臨時“觸發(fā)HTTP請求”解決方案（也稱為“React Cache”）。但是，我們希望我們和React社區(qū)將在首次發(fā)布后的幾個月內(nèi)探索該空間。
服務(wù)器渲染的更新
我們已經(jīng)開始研究新的支持Suspense的服務(wù)器渲染器，但是我們不希望它為初始版本的并發(fā)模式做好準(zhǔn)備。但是，此版本將提供一個臨時解決方案，允許現(xiàn)有服務(wù)器呈現(xiàn)器立即為Suspense回退發(fā)出HTML，然后在客戶端上呈現(xiàn)其真實內(nèi)容。這是我們目前在Facebook上使用的解決方案，直到流式渲染器準(zhǔn)備就緒。
為什么需要這么長時間？
我們已經(jīng)發(fā)布了導(dǎo)致Concurrent Mode穩(wěn)定的各個部分，包括新的上下文API，延遲加載Suspense和Hooks。我們也急于釋放其他缺失的部分，但是大規(guī)模地嘗試它們是該過程的重要部分。誠實的回答是，當(dāng)我們開始時，它只需要比我們預(yù)期的更多的工作。與往常一樣，我們感謝您在Twitter和我們的問題跟蹤器中提出的問題和反饋。
安裝
應(yīng)對
Npm注冊表中提供了React v16.9.0。
要使用Yarn安裝React 16，請運(yùn)行：
yarn add react@^16.9.0 react-dom@^16.9.0
要使用npm安裝React 16，請運(yùn)行：
npm install --save react@^16.9.0 react-dom@^16.9.0
我們還通過CDN提供了反應(yīng)的UMD版本：
有關(guān)詳細(xì)的安裝說明，請參閱文檔。
更新日志
應(yīng)對
添加
刪除unstable_ConcurrentMode贊成unstable_createRoot。（@acdlite在＃15532）
反應(yīng)DOM
棄用UNSAFE_*生命周期方法的舊名稱。（@bvaughn在＃15186和@threepointone在＃16103）
將javascript:URL 棄用為常見攻擊面。（@sebmarkbage在＃15047）
棄用不常見的“模塊模式”（工廠）組件。（@sebmarkbage在＃15145）
添加對disablePictureInPicture屬性的支持
歡迎加入我們的SegmentFault前端交流群～
目前人數(shù)太多，只能我邀請入群了哦～
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116268.html
摘要：更新日志應(yīng)對添加以編程方式收集性能測量。在和在將棄用為常見攻擊面。添加對事件的支持。在從調(diào)用時發(fā)出警告，創(chuàng)建循環(huán)。在和從錯誤的渲染器使用時發(fā)出警告。 2019年8月8日，我們發(fā)布了React 16.9。它包含幾個新功能，錯誤修正和新的棄用警告，以幫助準(zhǔn)備未來的主要版本。 showImg(https://segmentfault.com/img/bVbwoB5?w=1728&h=666)...
摘要：在年成為最大贏家，贏得了實現(xiàn)的風(fēng)暴之戰(zhàn)。和他的競爭者位列第二沒有前端開發(fā)者可以忽視和它的生態(tài)系統(tǒng)。他的殺手級特性是探測功能，通過檢查任何用戶的功能，以直觀的方式讓開發(fā)人員檢查所有端點(diǎn)。 2016 JavaScript 后起之秀 本文轉(zhuǎn)載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...
摘要：引言于發(fā)布版本，時至今日已更新到，且引入了大量的令人振奮的新特性，本文章將帶領(lǐng)大家根據(jù)更新的時間脈絡(luò)了解的新特性。其作用是根據(jù)傳遞的來更新。新增等指針事件。 1 引言 于 2017.09.26 Facebook 發(fā)布 React v16.0 版本，時至今日已更新到 React v16.6，且引入了大量的令人振奮的新特性，本文章將帶領(lǐng)大家根據(jù) React 更新的時間脈絡(luò)了解 React1...
摘要：需要注意的是，同樣的行為也適用于。這意味著我們必須重新綁定每個事件。組件的由調(diào)用它的父組件提供，這意味著所有事件都應(yīng)該與父組件相關(guān)聯(lián)。 原文鏈接：Vue.js — Considerations and Tricks showImg(https://segmentfault.com/img/bVbqHOd?w=1600&h=1599); Vue.js 是一個很棒的框架。然而，當(dāng)你開始構(gòu)建...
摘要：前端日報精選實踐總結(jié)掘金第期動畫與動效之四完全指南眾成翻譯個編碼小技巧教程使用瀏覽器開發(fā)者工具檢查動畫性能眾成翻譯中文圖書深入理解譯變量的正確使用方法知乎專欄正式發(fā)布眾成翻譯來了知乎專欄代碼運(yùn)行過程簡述一個人文章的中文 2017-06-21 前端日報 精選 redux-react實踐總結(jié) - 掘金【第972期】HTML5動畫與動效之四flexbox 完全指南 - 眾成翻譯19個Java...
閱讀 2434·2021-11-18 10:02
閱讀 695·2021-10-08 10:04
閱讀 2271·2021-09-03 10:51
閱讀 3552·2019-08-30 15:44
閱讀 2807·2019-08-29 14:09
閱讀 2473·2019-08-29 12:21
閱讀 2070·2019-08-26 13:45
閱讀 1811·2019-08-26 13:25
