我明白你想要把能正常工作的类组件代码改成Hooks版本，而且需要最简示例方便你试错扩展。下面就是完全对应原类组件功能的Hooks实现，每一步都做了清晰的注释：

import React, { useState, useRef, useEffect } from 'react'
import fire from './fire'
import './App.css'

const App = () => {
  // 管理消息列表状态，对应类组件的this.state.messages
  const [messageList, setMessageList] = useState([])
  // 使用useRef获取输入框DOM元素，对应类组件的this.inputEl
  const inputRef = useRef(null)

  // 替代类组件的componentWillMount，在组件挂载时监听Firebase数据变化
  useEffect(() => {
    // 创建Firebase数据库引用
    const messagesRef = fire.database().ref('messages').orderByKey().limitToLast(100)
    
    // 监听新消息添加事件
    const handleChildAdded = (snapshot) => {
      const message = { text: snapshot.val(), id: snapshot.key }
      // 更新消息列表，把新消息放在最前面
      setMessageList(prevMessages => [message].concat(prevMessages))
    }

    messagesRef.on('child_added', handleChildAdded)

    // 组件卸载时解绑监听，防止内存泄漏
    return () => {
      messagesRef.off('child_added', handleChildAdded)
    }
  }, []) // 空依赖数组确保只在组件挂载和卸载时执行

  // 处理表单提交，对应类组件的addMessage方法
  const handleSubmit = (e) => {
    e.preventDefault()
    const inputValue = inputRef.current.value.trim()
    if (!inputValue) return // 空内容不提交

    // 把输入内容推送到Firebase数据库
    fire.database().ref('messages').push(inputValue)
    // 清空输入框
    inputRef.current.value = ''
  }

  return(
    <section>
      <form onSubmit={handleSubmit}>
        {/* 绑定ref到输入框 */}
        <input type="text" ref={inputRef} />
        <button type="submit">Test</button>
      </form>
      {/* 渲染消息列表 */}
      <ul>
        {messageList.map(message => (
          <li key={message.id}>{message.text}</li>
        ))}
      </ul>
    </section>
  )
}

export default App;

关键部分说明 #

• useState：用来管理消息列表的状态，和类组件的this.state.messages作用完全一致，更新状态时用函数式更新setMessageList(prevMessages => ...)确保拿到最新的状态值。
• useRef：获取输入框的DOM元素，替代类组件里的ref={el => this.inputEl = el}，通过inputRef.current访问DOM节点。
• useEffect：替代类组件的componentWillMount，空依赖数组[]保证只在组件挂载时执行一次监听逻辑，同时返回一个清理函数，在组件卸载时解绑Firebase的监听，避免内存泄漏。
• handleSubmit：处理表单提交逻辑，和类组件的addMessage功能一样，获取输入值、推送到Firebase、清空输入框。

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