componentWillMount在初始呈现之前只被调用一次。我做了一个示例代码，请在下面查看

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [mounted, setMounted] = useState(false)

  if(!mounted){
    // Code for componentWillMount here
    // This code is called only one time before intial render
  }

  useEffect(() =>{
    setMounted(true)
  },[])

  return (
    <div className="App">
      
    </div>
  );
}

• 正如您提到的，您希望进行一个API调用，它通常发生在componentDidmount中，您可以简单地使用useEffect钩子和空数组作为函数组件中的依赖项

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [mounted, setMounted] = useState(false)


  useEffect(() =>{
    // This is similar to componentDidMount
    // Call back-end api here
  },[])

  return (
    <div className="App">
      
    </div>
  );
}

实际上，我想在这里添加更多的案例，并且我将创建可重用的定制钩子。

1.注意额外的dom渲染

• • 不会导致额外的dom渲染**

const useOptimizedComponentWillMount = callback => {
  const mounted = useRef(false)
  if (!mounted.current) callback()

  useEffect(() => {
    mounted.current = true
  }, []);
};

注意：您可能需要在 typescript 中使用mounted && mounted.current

2.不关心额外的dom渲染

这就是Tony answer

const useComponentWillMount = callback => {
  const [mounted, setMounted] = useState(false)
  if (!mounted) callback()

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

用法

一个二个一个一个