react tsx 怎么在页面中请求接口？

Question

下图这是这个页面的所有代码，我想像vue的mounted一样，刚进页面就请求接口，请问我该怎么写？
另外，这应该属于是typescript吧？完全看不懂一脸懵

并且，我的接口不是固定地址，后端那可能会上传到不同的服务器，如何像vue一样配置proxy？
在这里先谢谢各位大哥大姐的解答，小弟感激不尽！

import Contorls from "./component/Contorls/Contorls";
import homeRenderer from "./homeRender";
import styles from './index.module.less';

const Home = () => {
    return (
        <div className={styles.home}>
            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>
            <Contorls />
        </div>
    );
}

export default Home;

Answer 1

用 useEffect，大致如下仅供参考

官方文档也有相关描述
https://zh-hans.react.dev/reference/react/useEffect#fetching-...

import Contorls from "./component/Contorls/Contorls";
import homeRenderer from "./homeRender";
import styles from './index.module.less';

const Home = () => {
    const [data, setData] = useState()

    useEffect(() => {
        fetch(...).then(res => setData(res))
    }, [])

    return (
        <div className={styles.home}>
            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>
            <Contorls />
        </div>
    );
}

export default Home;

Answer 2

这是只是用到了React框架，没有用到typescript，我觉得你有必要先去了解一下React一些基本原理，这个不难。
至于以上问题可以分两步走：
1.如何像vue一样配置proxy，上传到不同的服务器?
1.1 npm i axios 不会就百度一下axios
1.2 创建一个services.tsx文件，如果有多个服务器地址创建多个文件就行services1.tsx， services2.tsx等等，换里面的地址就行
1.3 配置一下axios就可以了

import axios from 'axios';
import Configs from '@/tool/config';
const Instance = axios.create(
    {
        timeout: 30000, // 请求超时
        baseURL: 'https://xxx/api',
    }
);

Instance.defaults.headers.post['Content-Type'] = 'application/json';

export default Instance;

2.刚进页面就请求接口

import React, { useRef, useEffect, useState } from 'react';
import Instance from '@/services';
const Home = () => {
    useEffect(() => { //进入页面就执行
       Instance.get('/test').then(res =>{ //请求后台接口
           ...//
       })
    }, []); 
    return (
        <div className={styles.home}>
            <div ref={dom => homeRenderer.setContainer(dom)} className={styles.container}></div>
            <Contorls />
        </div>
    );
}