你是否遇到過(guò)這樣的場(chǎng)景：在瀏覽器中使用谷歌翻譯功能后，網(wǎng)頁(yè)突然崩了，控制臺(tái)錯(cuò)誤：

這一切的罪魁禍?zhǔn)?，其?shí)是谷歌翻譯悄悄修改了你的頁(yè)面結(jié)構(gòu)！下面就來(lái)簡(jiǎn)單解釋原因和解決方案。

谷歌翻譯如何“搞破壞”？

我們先看看谷歌翻譯是如何工作的。

下面是未翻譯的文字的 HTML 結(jié)構(gòu)：

翻譯之后文字的 HTML 結(jié)構(gòu)是這樣的：

翻譯引擎將純文本節(jié)點(diǎn)包裹在<font>標(biāo)簽中，這種看似無(wú)害的操作，卻為現(xiàn)代前端框架埋下了定時(shí)炸彈。

兩大致命場(chǎng)景

場(chǎng)景1：狀態(tài)更新失效

對(duì)于像React這樣的現(xiàn)代前端框架，它們依賴(lài)虛擬DOM來(lái)提高性能。當(dāng)組件的狀態(tài)或?qū)傩园l(fā)生變化時(shí)，React會(huì)基于虛擬DOM的狀態(tài)來(lái)操作真實(shí)DOM。然而，當(dāng)真實(shí)DOM被谷歌翻譯修改后，原節(jié)點(diǎn)的位置和狀態(tài)與React的預(yù)期不一致，導(dǎo)致更新操作無(wú)法執(zhí)行，頁(yè)面因此無(wú)法正確更新。

例如，在以下計(jì)數(shù)器組件中：

import React, { useState } from"react";

const Counter = () => {
const [count, setCount] = useState(0);

const increment = () => {
    setCount(count + 1);
  };

const decrement = () => {
    setCount(count - 1);
  };

return (
    <div>
      <h1>example</h1>
      <p>count：{count}</p>
      <p>{count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
};

exportdefault Counter;

在這段代碼中，兩種顯示方式在操作時(shí)的結(jié)果完全不同：

可以看到，使用<p>count：{count}</p>顯示時(shí)，當(dāng)頁(yè)面使用翻譯功能后，點(diǎn)擊按鈕將不會(huì)再更新，而<p>{count}</p>在使用谷歌翻譯前后都是正常更新。

• 對(duì)于第一種情況：谷歌翻譯將原始文本拆分為多個(gè)嵌套的 <font> 節(jié)點(diǎn)，破壞了 React 原本控制的文本結(jié)構(gòu)。當(dāng) count 更新時(shí)，React 嘗試直接修改原始文本節(jié)點(diǎn)的內(nèi)容，但此時(shí)該節(jié)點(diǎn)已被替換為 <font> 節(jié)點(diǎn)，導(dǎo)致更新失效。
• 對(duì)于第二種情況：即使谷歌翻譯包裹了 <font> 標(biāo)簽，但 整個(gè) <p> 的唯一子節(jié)點(diǎn)仍然是動(dòng)態(tài)值 {count} 對(duì)應(yīng)的 <font>。React 在更新時(shí)可以通過(guò)對(duì)比虛擬 DOM 發(fā)現(xiàn) <font> 內(nèi)部的文本變化，從而正確更新內(nèi)容。

場(chǎng)景2：應(yīng)用崩潰

谷歌翻譯的干擾還可能導(dǎo)致應(yīng)用崩潰。當(dāng)應(yīng)用試圖從DOM中移除一個(gè)已被谷歌翻譯修改的文本節(jié)點(diǎn)時(shí)，會(huì)拋出一個(gè)NotFoundError錯(cuò)誤。這是因?yàn)楫?dāng)應(yīng)用試圖從 DOM 中移除一個(gè)條件渲染的文本節(jié)點(diǎn)時(shí)，這個(gè)節(jié)點(diǎn)已被谷歌翻譯卸載。

下面來(lái)看一個(gè)例子：

import React, { useState } from "react";

const ToggleText = () => {
  const [showText, setShowText] = useState(true);

  return (
    <div>
      <button onClick={() => setShowText(!showText)}>切換文本</button>
      {showText && "Hello, World!"}
    </div>
  );
};

export default ToggleText;

翻譯后的文本被<font>標(biāo)簽包裹后，不再是父元素的直接子節(jié)點(diǎn)。當(dāng)狀態(tài)切換觸發(fā)DOM卸載時(shí)，React會(huì)因找不到原始節(jié)點(diǎn)而拋出NotFoundError，最終導(dǎo)致組件樹(shù)崩潰。

如何解決？

盡管這個(gè)問(wèn)題在 React 社區(qū)中早已被提出，但官方至今都沒(méi)有提供完美的解決方案。Dan 給出了一個(gè)方法來(lái)修復(fù)，但是會(huì)犧牲一定的性能，需要開(kāi)發(fā)者根據(jù)實(shí)際情況來(lái)權(quán)衡是否有必要添加這段代碼，并且這段代碼也并沒(méi)有解決本質(zhì)問(wèn)題。

https://github.com/facebook/react/issues/11538

圖片

其實(shí)，對(duì)于上面提到的例子，只需要添加標(biāo)簽來(lái)分離文本和動(dòng)態(tài)內(nèi)容，這樣 React 就不會(huì)直接刪除和插入文本節(jié)點(diǎn)，就可以避免這個(gè)問(wèn)題。但這只是其中一種情況，我們很難避開(kāi)所有導(dǎo)致應(yīng)用崩潰的情況。

有以下解決方案可供參考：

• 阻止部分翻譯 ：可以通過(guò)給需要保持原樣的部分添加 notranslate 屬性來(lái)防止谷歌翻譯對(duì)其進(jìn)行操作。

<p translate="no"></p>

• 完全禁用翻譯 ：如果希望整個(gè)頁(yè)面都不被谷歌翻譯，可以在 HTML 頭部加入以下meta標(biāo)簽：

<meta name="google" cnotallow="notranslate">

• 使用 Error Boundary 隔離錯(cuò)誤： 對(duì)每個(gè)組件使用 Error Boundary，防止錯(cuò)誤擴(kuò)散到整個(gè)應(yīng)用，導(dǎo)致應(yīng)用崩潰。

<ErrorBoundary>
  <ToggleText />
</ErrorBoundary>

• 必要時(shí)進(jìn)行國(guó)際化：如果應(yīng)用需要支持多種語(yǔ)言，可以考慮實(shí)現(xiàn)應(yīng)用的多語(yǔ)言支持，而不是依賴(lài)谷歌翻譯。這樣可以更好地控制文本的顯示和更新，告別第三方翻譯插件的 DOM 污染。