React自定义useSearchInput Hook优化及事件绑定方式问询

原Hook存在可优化点：无依赖数组的useEffect会触发不必要的重复DOM操作、直接操作DOM属性不符合React受控组件设计思路、事件绑定方式混合冗余。以下是更贴合React范式的简洁实现：

import { useState, useCallback } from "react";

export default function useSearchInput(initValue = '') {
  const [value, setValue] = useState(initValue);

  const handleChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  const handleSearch = useCallback((e) => {
    // 点击浏览器默认清除按钮时，search事件会触发，同步更新状态为空
    setValue(e.target.value);
  }, []);

  // 返回input组件所需的props，直接解构使用即可
  return {
    value,
    onChange: handleChange,
    onSearch: handleSearch,
    type: "search"
  };
}

使用示例：

function SearchBar() {
  const searchProps = useSearchInput('初始搜索值');
  return <input {...searchProps} placeholder="请输入搜索内容" />;
}

优化说明：

• 采用受控组件思路，完全通过React状态管理输入值，避免直接操作DOM
• 用useCallback缓存事件处理函数，防止因函数引用变化触发不必要的组件重渲染
• 直接返回input的标准props，符合React组件的使用习惯
• 无需手动绑定/移除事件，React会自动处理事件生命周期

除了清理监听的区别外，二者还有以下关键差异：

• 事件覆盖问题：
  • ref.current.onkeyup = onChange是赋值操作，同一元素的同一事件类型只能保留最后一次赋值的处理函数，之前的会被直接覆盖
  • addEventListener("keyup", onChange)可以绑定多个同类型事件处理函数，所有绑定的函数会按顺序执行
• 事件阶段支持：
  • onkeyup只能在冒泡阶段触发事件
  • addEventListener可通过第三个参数（useCapture: true）指定在捕获阶段触发事件，场景适配更灵活
• 移除灵活性：
  • onkeyup的移除只能通过赋值null实现，无法精准移除某一个特定的处理函数
  • addEventListener绑定的事件可通过removeEventListener精准移除指定处理函数，适合动态添加/移除事件的场景
• 原生环境下的this指向：
  • 普通函数作为onkeyup处理函数时，this指向当前DOM元素
  • addEventListener绑定普通函数时this同样指向DOM元素；若绑定箭头函数，this会继承外层作用域的this（React Hook中通常用箭头函数或useCallback绑定，此差异影响较小）

内容的提问来源于stack exchange，提问作者yszu