概念

React 合成事件是 React 提供的一種統(tǒng)一的事件系統(tǒng)，它可以在不同瀏覽器中使用同一套 API 以及一致的行為。它把瀏覽器提供的原生事件封裝成了一組高層次的合成事件，支持各種鼠標(biāo)，鍵盤和觸摸事件。

syntheticEvent.png

具體的合成事件

1. Clipboard Events：

復(fù)制、剪切和粘貼事件。在React 中可以通過使用 useClipboard hook 來處理 Clipboard 事件。例如，你可以使用它來實(shí)現(xiàn)一個(gè)復(fù)制功能：

import React from 'react';
import { useClipboard } from 'react-use';

function MyComponent() {
  const [text, setText] = React.useState('');
  const { copy, text: copiedText } = useClipboard(text);
 
  return (
    <div>
      <input
        value={text}
        onChange={event => setText(event.target.value)}
      />
      <button onClick={copy}>復(fù)制</button>
      {copiedText && <span>已復(fù)制：{copiedText}</span>}
    </div>
  );
}

2. Composition Events：

文本輸入組合事件。它是React提供的一組特殊的事件，用于處理輸入字符、粘貼和拖放。它們可以幫助開發(fā)者更容易地操作文本輸入框以及其他使用文本輸入的組件。例如，使用Composition events可以讓開發(fā)者為輸入框添加監(jiān)聽器，以捕獲用戶輸入的字符：

class MyComponent extends React.Component {
  render() {
    return (
      <input 
        onCompositionStart={() => console.log("Composition start")}
        onCompositionUpdate={(e) => console.log("Composition update", e.data)}
        onCompositionEnd={() => console.log("Composition end")}/>
    );
  }
}

上面的代碼中，當(dāng)用戶開始輸入字符時(shí)，onCompositionStart 函數(shù)就會(huì)被調(diào)用；當(dāng)用戶繼續(xù)輸入字符時(shí)，onCompositionUpdate 函數(shù)就會(huì)被調(diào)用，并且可以獲取已輸入的字符數(shù)據(jù)；當(dāng)用戶輸入完成時(shí)，onCompositionEnd 函數(shù)就會(huì)被調(diào)用。

3. Keyboard Events：

鍵盤事件。在 React 中，可以使用onKeyDown、onKeyPress 和onKeyUp 事件處理器來響應(yīng)鍵盤事件。例如：

<input
  type="text"
  onKeyDown={e => {
    if (e.key === 'Enter') {
      // Do something
    }
  }}
/>

上面的例子中，我們使用onKeyDown事件處理器來監(jiān)聽按下“Enter”鍵的事件，如果按下“Enter”鍵，就會(huì)執(zhí)行后續(xù)的處理邏輯。

4. Focus Events：

聚焦事件，F(xiàn)ocus Events 是一組可以幫助我們監(jiān)聽用戶和輸入控件之間的交互行為的事件，它們包括: onFocus, onBlur, onFocusChange 以及 onFocusVisibleChange。
下面是一個(gè)示例，當(dāng)用戶聚焦在一個(gè)文本框上時(shí)，會(huì)執(zhí)行函數(shù)handleFocus：

<input type="text" onFocus={handleFocus} />

function handleFocus(){
  console.log('You have focused on the textbox');
}

5. Form Events：

表單事件，F(xiàn)orm Events 是 React 中的一種特殊的事件，用于處理表單元素的操作。React 支持以下幾種常見的 Form Events：

1. onChange：當(dāng)表單元素中的內(nèi)容發(fā)生變化時(shí)觸發(fā)，例如輸入框中的文本、下拉框中的選項(xiàng)等。
2. onSubmit：當(dāng)表單元素中的內(nèi)容提交時(shí)觸發(fā)，常用于處理表單提交事件。
3. onFocus：當(dāng)表單元素獲得焦點(diǎn)時(shí)觸發(fā)，例如輸入框獲得焦點(diǎn)時(shí)觸發(fā)。
4. onBlur：當(dāng)表單元素失去焦點(diǎn)時(shí)觸發(fā)，例如輸入框失去焦點(diǎn)時(shí)觸發(fā)。
   例如，我們可以使用 onChange 事件來實(shí)現(xiàn)一個(gè)文本輸入框：

<input type="text" onChange={handleChange} />

其中，handleChange 是一個(gè)處理函數(shù)，用來處理文本輸入框中文本變化后的事件：

const handleChange = (event) => {
  console.log('The value of the input is ' + event.target.value);
}

6. Mouse Events：

鼠標(biāo)事件，在 React 中，可以使用 Mouse Events 來處理鼠標(biāo)事件。下面是一個(gè)例子：

class MyComponent extends React.Component {
  handleMouseMove(e) {
    console.log('The mouse moved!', e);
  }
  
  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        Move the mouse around!
      </div>
    );
  }
}

在上面的代碼中，我們?cè)?MyComponent 的 render 方法中添加了一個(gè) onMouseMove 屬性，值為 this.handleMouseMove，它指向一個(gè)處理鼠標(biāo)移動(dòng)的函數(shù)，在每次鼠標(biāo)移動(dòng)的時(shí)候，都會(huì)調(diào)用這個(gè)函數(shù)。當(dāng)用戶在 MyComponent 組件中移動(dòng)鼠標(biāo)時(shí)，就會(huì)在控制臺(tái)輸出“The mouse moved!”信息。

7. Selection Events：

選擇事件，React 中的 Selection Events 是包含在 SyntheticEvent 中的一組事件，它們用于監(jiān)聽用戶選擇內(nèi)容的行為。下面是一個(gè)例子：

<input
  type="text"
  onSelect={() => {
    // 當(dāng)用戶選擇輸入框中的文本時(shí)，執(zhí)行以下操作
    console.log('Text was selected!');
  }}
/>

在上面的代碼中，當(dāng)用戶選擇輸入框中的文本時(shí)，控制臺(tái)將會(huì)輸出“Text was selected!”。

8. Touch Events：

觸摸事件，React 中的 Touch Events 可以用來處理手機(jī)或平板的觸摸事件，它們可以用來檢測用戶是否在屏幕上點(diǎn)擊，滑動(dòng)，或者縮放。下面是一個(gè)使用 Touch Events 來判斷用戶是否點(diǎn)擊一個(gè)按鈕的例子：

import React, { useState } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

const App = () => {
  const [isClicked, setIsClicked] = useState(false);

  const handleClick = () => setIsClicked(true);

  return (
    <View>
      <TouchableHighlight onPress={handleClick}>
        <Text>Click me!</Text>
      </TouchableHighlight>
      {isClicked && <Text>You clicked!</Text>}
    </View>
  );
};

在上面的代碼中，我們使用了 TouchableHighlight 組件，用它的 onPress 事件來設(shè)置 isClicked 的狀態(tài)，當(dāng)用戶點(diǎn)擊按鈕時(shí)，isClicked 的狀態(tài)就會(huì)被設(shè)置為 true，然后就會(huì)顯示 You clicked! 的消息。

9. UI Events：

用戶界面事件，React 中的 UI Events 可以讓用戶在頁面上的操作對(duì)應(yīng)到 React 應(yīng)用上的反應(yīng)。例如，當(dāng)用戶點(diǎn)擊按鈕時(shí)，可以使用 onClick 事件處理器來觸發(fā)一個(gè)動(dòng)作：

<button onClick={() => setCounter(counter + 1)}>
  Increase Counter
</button>

此外，React 還支持常用的其他事件，如 onChange、onSubmit、onMouseOver 等。

10. Wheel Events：

滾輪事件，Wheel Events 是一種 React 事件，用來捕獲鼠標(biāo)滾輪滾動(dòng)的動(dòng)作。它可以用于處理滾動(dòng)動(dòng)作的響應(yīng)，如在圖片瀏覽器中實(shí)現(xiàn)圖片放大縮小的功能。

例如：

import React, { useRef, useEffect } from "react";

const ImageViewer = () => {
  const imageRef = useRef(null);
  const handleWheel = e => {
    imageRef.current.style.width = `${imageRef.current.offsetWidth + e.deltaY}px`;
  };
  useEffect(() => {
    imageRef.current.addEventListener("wheel", handleWheel);
    return () => {
      imageRef.current.removeEventListener("wheel", handleWheel);
    };
  }, []);
  return <img ref={imageRef} src="myImage.jpg" alt="My Image" />;
};
export default ImageViewer;

這段代碼中，我們使用 useRef 來獲取圖片 DOM 節(jié)點(diǎn)，然后通過 addEventListener 來監(jiān)聽 wheel 事件，并定義 handleWheel 方法來處理滾動(dòng)事件，在滾動(dòng)時(shí)，調(diào)整圖片的寬度。

合成事件的優(yōu)勢

1. 提供了一致的事件處理接口，使得編寫代碼時(shí)可以更加輕松；
2. 能夠跨多個(gè)瀏覽器保持一致的行為，這樣可以大大減少兼容性問題；
3. 可以在沒有 DOM 的環(huán)境下使用，比如 React Native；
4. 提供了對(duì)事件的統(tǒng)一的管理，可以及時(shí)的取消事件處理器等等。