React 合成事件的实现

// React中的事件使用
function Button() {
  const handleClick = (e) => {
    console.log(e) // 这是合成事件对象，不是原生事件
    console.log(e.nativeEvent) // 通过nativeEvent获取原生事件
  }
  
  return <button onClick={handleClick}>点击我</button>
}

// React 17+ 的事件绑定位置
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
// 所有事件都委托在root元素上

// 注册不同类型的事件
registerSimpleEvents();   // 注册click、keyup等基础事件
registerEvents$2();       // 注册onMouseEnter等单阶段事件
registerEvents$1();       // 注册onChange相关事件
registerEvents$3();       // 注册onSelect相关事件
registerEvents();         // 注册onBeforeInput等事件

// 简化版的事件分发逻辑
function dispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent) {
  // 找到触发事件的DOM元素对应的fiber节点
  const target = nativeEvent.target
  const targetInst = getClosestInstanceFromNode(target)
  
  // 创建合成事件
  const events = extractEvents(
    domEventName,
    targetInst,
    nativeEvent,
    target
  )
  
  // 按阶段分发事件
  events.forEach(event => {
    runEventsInBatch(event)
  })
}

class EventOrderDemo extends React.Component {
  componentDidMount() {
    // 原生事件监听
    this.refs.button.addEventListener('click', () => {
      console.log('1. 原生事件：子元素')
    })
    
    document.addEventListener('click', () => {
      console.log('4. 原生事件：document')
    })
  }
  
  handleParentClick = () => {
    console.log('3. React事件：父元素')
  }
  
  handleChildClick = () => {
    console.log('2. React事件：子元素')
  }
  
  render() {
    return (
      <div onClick={this.handleParentClick} ref="parent">
        <button onClick={this.handleChildClick} ref="button">
          点击我
        </button>
      </div>
    )
  }
}

// 输出顺序：
// 1. 原生事件：子元素
// 2. React事件：子元素
// 3. React事件：父元素
// 4. 原生事件：document

// React 16 示例
function handleClick(e) {
  console.log(e.target) // 正常输出
  
  setTimeout(() => {
    console.log(e.target) // ❌ null！事件对象已被回收
  }, 100)
}

// 解决方案：使用e.persist()
function handleClickCorrect(e) {
  e.persist() // 从事件池中移除，保留属性
  
  setTimeout(() => {
    console.log(e.target) // ✅ 正常输出
  }, 100)
}

// React 17+，不需要e.persist()
function handleClick(e) {
  setTimeout(() => {
    console.log(e.target) // ✅ 正常输出，事件池已移除
  }, 100)
}

function EventPropertiesDemo() {
  const handleEvent = (e) => {
    // 基础属性
    console.log(e.type)           // 事件类型：click
    console.log(e.target)         // 触发事件的DOM元素
    console.log(e.currentTarget)  // 当前处理事件的DOM元素
    console.log(e.nativeEvent)    // 原生事件对象
    
    // 事件方法
    e.preventDefault()   // 阻止默认行为
    e.stopPropagation()  // 阻止冒泡
    
    // 状态查询
    console.log(e.isDefaultPrevented())  // 是否已阻止默认行为
    console.log(e.isPropagationStopped()) // 是否已阻止冒泡
    
    // 其他属性
    console.log(e.bubbles)     // 是否可冒泡
    console.log(e.cancelable)  // 是否可取消
    console.log(e.timeStamp)   // 事件触发时间戳
  }
  
  return <button onClick={handleEvent}>测试事件</button>
}

// ❌ 不推荐：为每个列表项绑定事件
function BadList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => handleItem(item)}>
          {item.name}
        </li>
      ))}
    </ul>
  )
}

// ✅ 推荐：使用事件委托
function GoodList({ items }) {
  const handleListClick = (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
      const id = target.dataset.id
      console.log('点击了项目：', id)
    }
  }
  
  return (
    <ul onClick={handleListClick}>
      {items.map(item => (
        <li key={item.id} data-id={item.id}>
          {item.name}
        </li>
      ))}
    </ul>
  )
}

// ❌ 危险：混用可能导致事件不执行
function BadMixing() {
  useEffect(() => {
    document.addEventListener('click', (e) => {
      e.stopPropagation() // 阻止了冒泡，React事件可能收不到
    })
  }, [])
  
  return <button onClick={() => console.log('不会执行')}>点击</button>
}

// ✅ 建议：统一使用React事件
function GoodPractice() {
  return <button onClick={() => console.log('正常执行')}>点击</button>
}

function FormDemo() {
  const handleSubmit = (e) => {
    // ✅ 阻止表单提交的默认行为
    e.preventDefault()
    
    // 处理表单逻辑
    submitForm()
  }
  
  const handleButtonClick = (e) => {
    // 只在必要时阻止冒泡
    if (shouldStopPropagation) {
      e.stopPropagation()
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <button onClick={handleButtonClick}>提交</button>
    </form>
  )
}

// React 16及以前：需要用e.persist()
function handleAsync(e) {
  e.persist()
  setTimeout(() => {
    console.log(e.target)
  }, 100)
}

// React 17+：直接使用即可
function handleAsync(e) {
  setTimeout(() => {
    console.log(e.target) // 没问题
  }, 100)
}