一、新棄用

重命名 Unsafe 生命周期方法

一年前，我們宣布 unsafe 生命周期方法重命名為：

• componentWillMount → UNSAFE_componentWillMount

• componentWillReceiveProps → UNSAFE_componentWillReceiveProps

• componentWillUpdate → UNSAFE_componentWillUpdate

React v16.9 不包含破壞性更改，而且舊的生命周期方法在此版本依然沿用。但是，當你在新版本中使用舊的生命周期方法時，會提示如下警告：

Warning:componentWillMount has been renamed,and is not recommended for use.

正如警告所示，對于每種 unsafe 的方法，通常有更好的解決方案。但你可能沒有過多時間去遷移或測試這些組件。在這種情況下，我們建議運行一個自動重命名它們的 codemod 腳本：

cd your_project

npx react-codemod rename-unsafe-lifecycles

（注意：這里使用的是 npx，不是 npm ，npx 是 Node 6+ 默認提供的實用程序。）

運行 codemod 將會替換舊的生命周期，如 componentWillMount 將會替換為 UNSAFE_componentWillMount :

Codemode in action

新命名的生命周期（例如：UNSAFE_componentWillMount）在 React 16.9 和 React 17.x 繼續(xù)使用，但是，新的 UNSAFE_ 前綴將幫助具有問題的組件在代碼 review 和 debugging 期間脫穎而出。（如果你不喜歡，你可以引入 嚴格模式（Strict Mode）來進一步阻止開發(fā)人員使用它 。）

點擊此鏈接，學習更多關(guān)于 版本策略以及穩(wěn)定性承諾

棄用：javascript: URLs

以 javascript: 開頭的 URL 很容易遭受攻擊，因為它很容易意外在標簽中（<a href>）引入未經(jīng)處理的輸出，造成安全漏洞。

const userProfile = {

  website: "javascript: alert('you got hacked')",

};

// This will now warn:

<a href={userProfile.website}>Profile</a>

在 React 16.9 中，這種模式將繼續(xù)有效，但它將輸出一個警告，如果你邏輯上需要使用 javascript: 開頭的 URL，請嘗試使用 React 事件處理程序代替。（萬不得已，你可以使用 dangerouslySetInnerHTML 來規(guī)避保護，但仍然是不鼓勵使用的并且往往會導(dǎo)致安全漏洞。）

在未來的主要版本中，如果遇到 javascript: 形式的 URL，React 將拋出錯誤。

棄用 “Factory” 組件

在用 Babel 編譯 JavaScript 類流行前，React 支持 “factory” 組件，它使用 render 方法返回一個對象。

function FactoryComponent() {

  return { render() { return <div />; } }

}

這種模式令人困惑，因為它看起來太像一個函數(shù)組件，但它不是一個。(函數(shù)組件只會返回像上述示例中的 <div /> ）。

這種模式幾乎從未在外部使用過，并且支持它會導(dǎo)致 React 變大、變慢。因此，我們在 16.9 中棄用此模式，并且遇到時，輸出警告。如果你在項目中依賴此組件，可以添加 FactoryComponent.prototype = React.Component.prototype 作為解決方法。或者，你可以將它轉(zhuǎn)換為 class 組件或函數(shù)組件。

我們預(yù)計大多數(shù)代碼庫不會受此影響。

二、新特性

用于測試的一部函數(shù) `act()`

React 16.8 引入了名為 act() 的新測試實用程序來幫助你編寫更匹配瀏覽器行為的測試代碼。例如，對單個 act() 中的多個狀態(tài)更新進行批處理。這與 React 已有的處理真實瀏覽器事件時的工作方式相匹配，并有助于為將來 React 組件更頻繁地批處理更新做準備。

然而，React v16.8 中的 act() 僅支持同步函數(shù)，有時，你可能在測試環(huán)境下看到以下警告，但無法輕易修復(fù)：

An update to SomeComponent inside a test was not wrapped in act(...).

在 React 16.9 中 act() 支持異步函數(shù) ，你可以在調(diào)用它時，使用 await ：

await act(async () => {

  // ...

});

這將解決以前無法使用 act() 的情況，例如當 state 更新位于異步函數(shù)中時。因此，你現(xiàn)在應(yīng)該能夠測試中修復(fù)所有關(guān)于 act() 的警告了 。

我們聽說，現(xiàn)在還沒有足夠的信息關(guān)于如何使用 act() 編寫測試用例。新的測試技巧指南介紹了一些常見方案，以及 act() 如何幫助您編寫良好的測試。這些示例使用原生 DOM API，但您也可以使用 React Testing Library 來減少樣板代碼。它的許多方法已經(jīng)在內(nèi)部使用 act() 。

如果你遇到 act() 的相關(guān)問題，請在問題跟蹤器上告知我們，我們會盡力提供幫助。

使用 <React.Profiler> 進行性能評估

在 React 16.5 中，我們介紹了新的 React Profiler for DevTools 來幫助開發(fā)人員發(fā)現(xiàn)項目中的性能瓶頸。在 React 16.9 中，我們提供了一種編程的方式來收集測量你的代碼，這就是 <React.Profiler> ，我們預(yù)計大多數(shù)較小的應(yīng)用不會使用它，但在大型應(yīng)用中跟蹤性能回歸會很方便。

<Profiler> 測量 React 應(yīng)用程序渲染的頻率以及渲染的 "成本" 。其目的是幫助識別應(yīng)用程序中渲染緩慢的部分，并且可能更益與 memoization 等優(yōu)化 。

可以將 <Profiler> 添加到 React 項目中的任意一個子樹上，來測量該子樹的渲染成本。它需要兩個 props ：id (string) 和 onRender 回調(diào)(function)，當樹中的組件"提交"更新時，React 將調(diào)用它。

render(

  <Profiler id="application" onRender={onRenderCallback}>

    <App>

      <Navigation {...props} />

      <Main {...props} />

    </App>

  </Profiler>

);

要了解關(guān)于 Profiler 和傳遞給 onRender 回調(diào)的參數(shù)的更多詳細信息，請查看 Profiler 文檔。

注意：

Profiling 會增加一些額外的開銷，因此在生產(chǎn)構(gòu)建中禁止使用它。

如果想要在生產(chǎn)環(huán)境中進行性能分析，React 提供了特殊的生產(chǎn)構(gòu)建，并啟用了分析模式。在 fb.me/react-profiling 閱讀更多關(guān)于如何使用此構(gòu)建的更多信息。

三、顯著的 bug 修復(fù)

此版本包含一些一些其他顯著的提升：

• 在  組件中調(diào)用 findDOMNode()  造成崩潰，已修復(fù)

• 保存已刪除的子樹導(dǎo)致內(nèi)存泄漏，已修復(fù)

• 在 useEffect 中，使用 setState 引起的循環(huán)引用，現(xiàn)在會輸出錯誤（這與在 class 組件中的 componentDidUpdate 使用 setState 導(dǎo)致的錯誤一致）

感謝所有幫助解決這些問題的貢獻者，你可以在此處找到完整的日志。

本文翻譯自：https://reactjs.org/blog/2019/08/08/react-v16.9.0.html