如何将React类组件转换为函数组件？附完整实现代码示例

import React, { useRef, useEffect } from 'react'
import ReactDOM from 'react-dom'
import ScrollSnap from 'scroll-snap'

import './styles.css'

function App() {
  const container = useRef(null)

  const bindScrollSnap = () => {
    const element = container.current
    new ScrollSnap(element, {
      snapDestinationY: '90%',
    }).bind()
  }

  useEffect(() => {
    bindScrollSnap()
  }, [])

  return (
    <div ref={container}>
    </div>
  )
}

核心改动说明 #

• 从React包引入useRef和useEffect两个Hook，分别对应类组件的ref创建和生命周期逻辑
• 用useRef(null)替代React.createRef()，两者作用完全一致，都用于存储DOM节点引用，修改ref值不会触发组件重渲染
• 用依赖数组为空的useEffect替代componentDidMount生命周期，空依赖数组会保证副作用函数仅在组件首次挂载完成后执行一次，和原类组件执行时机完全匹配
• 移除类组件的this指向相关逻辑，函数组件内可直接访问定义的变量和方法

可选优化（避免内存泄漏） #

如果scroll-snap库提供了实例销毁方法，建议在useEffect中返回清理回调，组件卸载时自动销毁实例：

useEffect(() => {
  const element = container.current
  if (!element) return
  const snapInstance = new ScrollSnap(element, {
    snapDestinationY: '90%',
  })
  snapInstance.bind()
  // 组件卸载时执行清理
  return () => snapInstance.unbind?.()
}, [])

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