React类组件转函数组件：如何替换实例属性与获取器？

a) 函数组件可实现类似功能，通过Ref转发暴露属性 #

函数组件本身没有类组件那样的实例，但可以通过React.forwardRef结合useImperativeHandle，将内部状态和计算属性暴露给父组件，实现类组件实例属性的等效功能。

具体实现： #

改造Input组件（暴露属性）

import React, { useState, useCallback, useImperativeHandle, forwardRef } from 'react';

const Input = forwardRef((props, ref) => {
  const [inputData, setInputData] = useState({});
  const [isValid, setIsValid] = useState(false);

  // 原类组件的验证逻辑
  const validate = useCallback((data) => {
    // 替换为你的实际验证规则
    return Object.keys(data).every(key => !!data[key]);
  }, []);

  const handleInputChange = async (newData) => {
    setInputData(newData);
    const valid = validate(newData);
    setIsValid(valid);
    // 触发父组件的计算回调
    if (valid) {
      const result = await props.onCalculate(newData);
      props.onSetChartData(result);
    }
  };

  // 对外暴露isValid和data属性
  useImperativeHandle(ref, () => ({
    get isValid() {
      return isValid;
    },
    get data() {
      return inputData;
    }
  }));

  // 示例输入UI
  return <input type="text" onChange={(e) => handleInputChange({ value: e.target.value })} />;
});

export default Input;

改造Dashboard组件（访问属性）

import React, { useState, useEffect, useRef } from 'react';
import Calculation from './calculation';
import Input from './Input';

export default function Dashboard() {
  const [chartData, setChartData] = useState();
  const inputRef = useRef(null);

  const calculateData = async (inputData) => {
    return await Calculation.calculate(inputData);
  };

  useEffect(() => {
    // 初始化时检查输入有效性并更新图表
    const initChart = async () => {
      if (inputRef.current?.isValid) {
        const result = await calculateData(inputRef.current.data);
        setChartData(result);
      }
    };
    initChart();
  }, []);

  return (
    <>
      <Input 
        onCalculate={calculateData} 
        onSetChartData={setChartData} 
        ref={inputRef} 
      />
      {renderChart(chartData)}
    </>
  );
}

function renderChart(data) {
  // 示例图表渲染逻辑
  return <div>{data ? `图表数据：${JSON.stringify(data)}` : '无有效数据'}</div>;
}

b) 更符合React数据流的重构方案（推荐） #

如果不想使用ref的方式，更推荐通过状态提升重构：将输入的状态和验证状态托管到Dashboard组件，Input仅负责UI渲染和触发输入事件，完全不依赖Calculation，符合职责分离原则。

重构后的Input组件（纯UI+验证） #

import React, { useCallback } from 'react';

const Input = ({ inputData, onInputChange }) => {
  // 仅负责输入验证，不依赖外部计算逻辑
  const validate = useCallback((data) => {
    // 替换为你的实际验证规则
    return Object.keys(data).every(key => !!data[key]);
  }, []);

  const handleChange = (newData) => {
    const isValid = validate(newData);
    // 将输入数据和验证结果同步给父组件
    onInputChange(newData, isValid);
  };

  // 示例输入UI
  return <input type="text" value={inputData.value || ''} onChange={(e) => handleChange({ value: e.target.value })} />;
};

export default Input;

重构后的Dashboard组件（状态托管+计算） #

import React, { useState, useEffect } from 'react';
import Calculation from './calculation';
import Input from './Input';

export default function Dashboard() {
  const [chartData, setChartData] = useState();
  const [inputData, setInputData] = useState({});
  const [isInputValid, setIsInputValid] = useState(false);

  useEffect(() => {
    // 输入数据或验证状态变化时自动更新图表
    const updateChart = async () => {
      if (isInputValid) {
        const result = await Calculation.calculate(inputData);
        setChartData(result);
      }
    };
    updateChart();
  }, [inputData, isInputValid]);

  const handleInputChange = (newData, isValid) => {
    setInputData(newData);
    setIsInputValid(isValid);
  };

  return (
    <>
      <Input 
        inputData={inputData} 
        onInputChange={handleInputChange} 
      />
      {renderChart(chartData)}
    </>
  );
}

function renderChart(data) {
  // 示例图表渲染逻辑
  return <div>{data ? `图表数据：${JSON.stringify(data)}` : '无有效数据'}</div>;
}

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