react老项目使用类组件(Class Component)和函数组件(Function Component) 完成父组件引用子组件方法代码示例 Antd3.x版本

类组件、函数组件核心区别

特性	函数组件 (FC)	类组件 (Class)
语法	使用函数和 Hooks（如 `useState`）	使用 `class` 和生命周期方法
状态管理	`useState`/`useReducer`	`this.state` 和 `setState`
生命周期	`useEffect` 替代	明确的生命周期方法（如 `componentDidMount`）
Ref 访问	`useRef` + `forwardRef`	`React.createRef()` 或回调 Ref
Antd 表单兼容性	需配合 `Form.useForm`（Antd 4+）	直接支持 `Form.create()`（Antd 3）
性能优化	默认更轻量，依赖 Hooks 优化	需手动实现 `shouldComponentUpdate`
代码复杂度	更简洁，逻辑聚合	更冗长，生命周期分散逻辑

选择建议

Antd 3.x 项目：
- 优先使用类组件（尤其是表单场景）。
- 若需函数组件，需自行处理 Ref 和表单兼容性问题（如通过 HOC 包装）。
Antd 4.x 项目：
- 优先使用函数组件 + Hooks，性能更优且代码更简洁。
- 类组件仅用于复杂生命周期控制的场景。

类组件代码示例(Class Component)

父组件

/**
 * 父组件
 */
import * as React from 'react';
import Test2 from './test2'
import { Form } from 'antd';

class Test1 extends React.Component<any> {
  childRef = React.createRef<Test2>(); // 创建 ref 指定类型
  constructor(props: any) {
    super(props);
    this.state = {};
  }

  click = () => {
    if (this.childRef.current?.childMethod) {
      const result = this.childRef.current.childMethod('参数');
      console.log('调用结果', result);
    }
  };
  render() {
    return <div onClick={this.click} style={{ height: 100, width: 100, backgroundColor: '#999' }}>
      夫组件
      <Test2
        // wrappedComponentRef={this.childRef}
        ref={this.childRef}
      ></Test2>
    </div>
  }
}

export default Test1;
// export default Form.create<any>()(Test1);

子组件

/**
 * 子组件
 */
import * as React from 'react';

class Test2 extends React.Component<any> {
  constructor(props: any) {
    super(props);
    this.state = {};
  }

  childMethod = (param: any) => {
    console.log('子组件方法被调用', param);
    return '返回值';
  }
  render() {
    return <div>子组件</div>
  }
}
export default Test2;

函数组件代码示例(Function Component)

父组件

/**
 * @Author 孜然卷
 * @Description 父组件
 */
import React, { useState, useRef, useEffect, } from 'react';
import { Layout, Row, Col, Button, Form, Select, Table, Tooltip, Icon, message, Tag, } from 'antd';
import Test2 from './test2'

const HomePage: React.FC = () => {
  // 用于保存表单搜索参数的 ref（避免闭包问题）

  const filterFormRef = useRef<any>(null);

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

  const click = () => {
    filterFormRef.current.refreshStatus(); //  子组件方法调用
  }

  return (
    <div style={{}} onClick={click}>
      父组件111
      <Test2 wrappedComponentRef={filterFormRef}></Test2>
    </div>
  );
};

export default HomePage;

子组件

/**
 * @Author 孜然卷
 * @Description 子组件
 */
import React, { useEffect, useState, forwardRef, useImperativeHandle, useCallback, } from 'react';
import { Form, } from 'antd';

const FilterForm = forwardRef<any>(
  ({ }, ref) => {

    // 暴露给父组件的方法
    const refreshStatus = useCallback(async () => {
      console.log('子组件方法调用成功！')
    }, []);

    // 把方法暴露给父组件
    useImperativeHandle(ref, () => ({
      refreshStatus,
    }), [refreshStatus]);

    return (
      <div>函数组件——子组件</div>
    );
  });

export default Form.create<any>()(FilterForm);

// export default FilterForm;