>[danger]介紹下React的合成事件和事件委托機制，混用合成事件和原生事件誰會先執行？ React 使用了合成事件（SyntheticEvent）來處理瀏覽器中的原生事件。合成事件是對原生事件的封裝，它提供了跨瀏覽器的一致性，并且具有更好的性能和可擴展性。 合成事件的特點包括： 1. **跨瀏覽器兼容性**：合成事件在不同瀏覽器之間提供了一致的行為，解決了瀏覽器兼容性問題。 2. **合并事件處理程序**：React 通過合并多個事件處理程序，減少了事件處理函數的創建和銷毀的次數，提高了性能。 3. **自動綁定 this**：在使用類組件時，合成事件會自動將事件處理程序綁定到組件實例上，無需手動綁定。 4. **事件委托機制**：合成事件利用事件冒泡機制實現事件委托，通過在頂層監聽事件，將事件交由合適的組件進行處理，減少了事件處理函數的數量。 **事件委托機制是指將事件處理委托給其父組件或更高層級組件來處理**。在 React 中，事件從子組件傳遞到父組件時，React 會利用事件冒泡機制（由底層 DOM 實現）將事件委托給父組件處理。這樣可以減少事件處理函數的數量，簡化代碼結構，并提高性能。 **當在 React 中混用合成事件和原生事件時，合成事件會先執行，然后再執行原生事件**。這是因為 React 通過監聽瀏覽器的原生事件來實現合成事件，所以合成事件會先于原生事件執行。這種順序保證了 React 的事件系統可以正常工作，并且可以在業務邏輯中使用合成事件和原生事件的組合。 **需要注意的是，使用合成事件時應遵循 React 的事件系統，不應直接操作 DOM 或使用原生事件處理函數**。而對于一些特殊的需求，如與第三方庫的交互或訪問底層 DOM API，可以使用 ref 來獲取 DOM 節點，并在 componentDidMount 和 componentWillUnmount 生命周期方法中手動綁定和解綁原生事件處理函數。