27、React事件处理与组件生命周期和解

React事件处理与组件生命周期和解

1. React事件处理

在React中，事件处理是一个重要的功能。事件具有捕获、目标和冒泡三个阶段，这些阶段的顺序可以通过相关消息得到确认。例如：

App: Type: click Target: BUTTON CurrentTarget: DIV
App: Type: click Target: BUTTON CurrentTarget: DIV

1.1 停止事件传播

如果想要中断事件的正常传播序列并阻止元素接收事件，理解事件阶段就变得十分重要。以下是一个修改后的 ThemeButton 组件示例，它在捕获阶段拦截点击事件并阻止其到达目标元素：

import React, { Component } from "react";
export class ThemeButton extends Component {
    handleClick = (event, capturePhase = false) => {
        console.log(`ThemeButton: Type: ${event.type} `
            + `Target: ${event.target.tagName} `
            + `CurrentTarget: ${event.currentTarget.tagName}`);
        if (capturePhase) {