ahooks处理dom

ahooks也提供了不少操作原生DOM的钩子函数

1. 使用useEventListener

useEventListener和addEventListener不同点在于useEventListener不会向DOM重复注册事件：

import { Row, Col, Button } from 'antd'
import { useState,useRef  } from 'react'
import { useEventListener } from 'ahooks'

function App() {
  const [count, setCount] = useState(1)
  const ref = useRef(null)

  useEventListener(
    'click',
    () => {
      setCount(count + 1);
    },
    { target: ref },
  )

  return (
    <>
      <Row>
        <Col span={24}>
          {count}, {Date.now()}
        </Col>
        <Col span={24}>
          <Button type='primary' ref={ref} >点击</Button>
        </Col>
      </Row>
    </>
  )
}
export default App

运行效果：
此外第二个参数还支持类似Vue中的事件修饰符：

参数	说明	类型	默认值
target	DOM 节点或者 ref	(() => Element)	Element
capture	可选项，listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。	boolean	false
once	可选项，listener 在添加之后最多只调用一次。如果是 true，listener 会在其被调用之后自动移除。	boolean	false
passive	可选项，设置为 true 时，表示 listener 永远不会调用 preventDefault() 。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。	boolean	false
enable	可选项，是否开启监听。	boolean	true

2. 使用useEventTarget

常见表单控件(通过e.target.value获取表单值)的onChange跟value逻辑封装，支持自定义值转换和重置功能。

import React from 'react'
import { useEventTarget } from 'ahooks'

export default () => {
  const [value, { reset, onChange }] = useEventTarget({ initialValue: 'this is initial value' })

  return (
    <div>
      <input value={value} onChange={onChange} style={{ width: 200, marginRight: 20 }} />
      <button type="button" onClick={reset}>
        reset
      </button>
    </div>
  );
};