在 React 中正確使用 jQuery

1. 在 React 中你能使用 jQuery
2. 在 React 中使用 jQuery 的正確方法
3. 在 React 中你應該使用 jQuery

jQuery 是 JavaScript 開發人員使用的最知名的庫之一。

該庫提供了一種簡單的方法來執行 DOM 操作和動畫，僅舉幾例。由於它的流行，許多 Web 開發人員都熟悉它，並且在可能的情況下更喜歡使用 jQuery。

React 是 Facebook 開發的另一個流行的庫。在過去的幾年裡，它贏得了使用最廣泛的 JavaScript 框架的稱號。

可以說它比 jQuery 更現代並且具有更多功能。雖然你可以在單個應用程式中使用這兩個庫，但在 React 應用程式中使用 jQuery 有一些規則。

在 React 中你能使用 jQuery

可以在 React 應用程式中使用 jQuery，只要你正確使用它並仔細選擇它的位置。同樣，你可以將 React 嵌入到 jQuery 中。

React 中 jQuery 的侷限性是什麼

在 React 中使用 jQuery 的主要限制是 jQuery 手動更新 DOM。另一方面，React 有其對 DOM 進行更改的系統。

它在內部確定 React 應用程式或元件何時應該重新渲染。它還計算出 UI 的哪些部分需要更新。

因此，當你使用 jQuery 操作 DOM 時，React 會感到困惑。這就是為什麼在正常情況下，在 React 中使用 jQuery 被認為是一種不好的做法，但也有例外。

在 React 中使用 jQuery 的正確方法

首先，你需要安裝 jQuery 庫，然後將其匯入，如下所示：

import $ from 'jquery';

正如我們已經提到的，jQuery 和 React 是兩個與 DOM 操作有關的庫。為了確保 jQuery 不會干擾 React，我們需要建立一個永遠不會被 React 更新的元件。

我們應該怎麼做？你可能知道，React 元件在它們的 state 或 props 更改時會重新渲染。所以我們必須構建一個沒有任何狀態或 props 的元件。

讓我們看一個例子：

class App extends Component {
  componentDidMount(){
        $("p").hide()
  }
  render() {
    return <div>
              <p>Hi! Try edit me</p>
           </div>;
  }
}

為了確保 React 永遠不會更新 App 元件的 DOM，我們不會啟動任何狀態或使用任何 prop 值。我們的 return 語句由靜態包裝器和段落元素組成。

這樣，我們就可以為 jQuery 外掛直接操作 DOM 和隱藏所有段落元素掃清障礙了。

另一個直接選擇 DOM 元素的好方法是使用 ref。

在 React 中你應該使用 jQuery

React 具有內建功能，允許你在大多數情況下操作 DOM。在 React 元件的框架內工作使你能夠控制應用程式的行為和外觀。

如果你確定需要使用 jQuery 並保持在上述限制範圍內，那麼你可以自由地這樣做。然而，jQuery 在 React 中有一組有限的應用程式。