[譯]React v16.9 新特性

今天咱們發佈了 React 16.9。它包含了一些新特性、bug修復以及新的棄用警告，以便與籌備接下來的主要版本。

1、新棄用

重命名 Unsafe 生命週期方法

一年前，咱們宣佈 unsafe 生命週期方法重命名爲：

• componentWillMount → UNSAFE_componentWillMount
• componentWillReceiveProps → UNSAFE_componentWillReceiveProps
• componentWillUpdate → UNSAFE_componentWillUpdate

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

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

cd your_project
npx react-codemod rename-unsafe-lifecycles

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

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

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

點擊此連接，學習更多關於 版本策略以及穩定性承諾

棄用：javascript: URLs

以 javascript: 開頭的 URL 很容易遭受攻擊，由於它很容易意外在標籤中（<a href>）引入未經處理的輸出，形成安全漏洞。

const userProfile = {
  website: "javascript: alert('you got hacked')",
};
// This will now warn:
<a href={userProfile.website}>Profile</a>

在 React 16.9 中，這種模式將繼續有效，但它將輸出一個警告，若是你邏輯上須要使用 javascript: 開頭的 URL，請嘗試使用 React 事件處理程序代替。（萬不得已，你可使用 dangerouslySetInnerHTML 來規避保護，但仍然是不鼓勵使用的而且每每會致使安全漏洞。）

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

棄用 「Factory」 組件

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

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

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

這種模式幾乎從未在外部使用過，而且支持它會致使 React 變大、變慢。所以，咱們在 16.9 中棄用此模式，而且遇到時，輸出警告。若是你在項目中依賴此組件，能夠添加 FactoryComponent.prototype = React.Component.prototype 做爲解決方法。或者，你能夠將它轉換爲 class 組件或函數組件。

咱們預計大多數代碼庫不會受此影響。

2、新特性

用於測試的一部函數 act()

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

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

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

在 React 16.9 中 act() 支持異步函數 ，你能夠在調用它時，使用 await ：

await act(async () => {
  // ...
});

這將解決之前沒法使用 act() 的狀況，例如當 state 更新位於異步函數中時。所以，你如今應該可以測試中修復全部關於 act() 的警告了 。

咱們據說，如今尚未足夠的信息關於如何使用 act() 編寫測試用例。新的測試技巧指南介紹了一些常見方案，以及 act() 如何幫助您編寫良好的測試。這些示例使用原生 DOM API，但您也可使用 React Testing Library 來減小樣板代碼。它的許多方法已經在內部使用 act() 。

若是你遇到 act() 的相關問題，請在問題跟蹤器上告知咱們，咱們會盡力提供幫助。

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

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

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

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

render(
  <Profiler id="application" onRender={onRenderCallback}>
    <App>
      <Navigation {...props} />
      <Main {...props} />
    </App>
  </Profiler>
);

要了解關於 Profiler 和傳遞給 onRender 回調的參數的更多詳細信息，請查看 Profiler 文檔。

注意：

Profiling 會增長一些額外的開銷，所以在生產構建中禁止使用它。

若是想要在生產環境中進行性能分析，React 提供了特殊的生產構建，並啓用了分析模式。在 fb.me/react-profiling 閱讀更多關於如何使用此構建的更多信息。

3、顯著的 bug 修復

此版本包含一些一些其餘顯著的提高：

• 在 <Suspense> 組件中調用 findDOMNode() 形成崩潰，已修復
• 保存已刪除的子樹致使內存泄漏，已修復
• 在 useEffect 中，使用 setState 引發的循環引用，如今會輸出錯誤（這與在 class 組件中的 componentDidUpdate 使用 setState 致使的錯誤一致）

感謝全部幫助解決這些問題的貢獻者，你能夠在此處找到完整的日誌。

本文翻譯自：https://reactjs.org/blog/2019...

走在最後，歡迎關注：前端瓶子君