React函数组件如何保留类组件继承父类的功能？

因为函数组件本身不支持类继承语法，要复用TheBigBoy的逻辑同时使用Hook特性，自定义Hook是最佳方案——既避免了HOC的嵌套问题，又能精准复用所需的状态、方法和生命周期逻辑。

具体实现步骤 #

1. 拆解TheBigBoy的核心逻辑

先把TheBigBoy类组件里的状态、生命周期方法、实例方法逐一梳理出来，比如原类组件可能是这样：

class TheBigBoy extends React.Component {
  state = {
    data: null,
    loading: false
  };

  async componentDidMount() {
    this.setState({ loading: true });
    const res = await fetch(this.props.apiUrl);
    const data = await res.json();
    this.setState({ data, loading: false });
  }

  refreshData = async () => {
    this.setState({ loading: true });
    const res = await fetch(this.props.apiUrl);
    const data = await res.json();
    this.setState({ data, loading: false });
  };
}

2. 将类逻辑转换为自定义Hook

把上面的类逻辑用React Hook重写，封装成useTheBigBoy Hook：

import { useState, useEffect } from 'react';

function useTheBigBoy(props) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  // 对应componentDidMount的逻辑
  useEffect(() => {
    fetchData();
  }, []);

  // 封装原实例方法
  const fetchData = async () => {
    setLoading(true);
    const res = await fetch(props.apiUrl);
    const resData = await res.json();
    setData(resData);
    setLoading(false);
  };

  const refreshData = fetchData; // 直接复用fetchData逻辑

  // 返回需要的状态和方法，供函数组件使用
  return { data, loading, refreshData };
}

3. 在函数组件中使用自定义Hook

重构后的MyLittleComponent可以直接调用useTheBigBoy，获取原TheBigBoy的所有核心能力，同时自由添加自己的Hook逻辑：

export default function MyLittleComponent(props) {
  // 复用TheBigBoy的状态和方法
  const { data, loading, refreshData } = useTheBigBoy(props);
  // 自己的组件状态
  const [localState, setLocalState] = useState('');

  return (
    <div>
      {loading ? <p>加载中...</p> : <pre>{JSON.stringify(data)}</pre>}
      <button onClick={refreshData}>刷新数据</button>
      <input 
        value={localState} 
        onChange={(e) => setLocalState(e.target.value)} 
        placeholder="本地输入"
      />
    </div>
  );
}

关键注意点 #

• 如果TheBigBoy依赖this.props或上下文，可以直接把props或useContext的结果传入自定义Hook；
• 生命周期的清理逻辑（比如componentWillUnmount）可以放在useEffect的返回函数中；
• 原类组件的实例方法，直接转换成Hook内部的普通函数即可，利用闭包访问状态。

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