对你最初的问题的简短回答，componentWillMount如何与React Hooks一起使用:

componentWillMount已弃用，被认为是遗留的。反应推荐:

通常，我们建议使用构造函数()来初始化状态。

现在，在Hook FAQ中，你会发现函数组件的类构造函数的等价是:

构造函数:函数组件不需要构造函数。你可以在useState调用中初始化这个状态。如果计算初始状态的开销很大，您可以将一个函数传递给useState。

componentWillMount的用法示例如下所示:

const MyComp = () => {
  const [state, setState] = useState(42) // set initial value directly in useState 
  const [state2, setState2] = useState(createInitVal) // call complex computation

  return <div>{state},{state2}</div>
};

const createInitVal = () => { /* ... complex computation or other logic */ return 42; };

React组件是一个函数?所以只要让componentWillMount moment成为return语句之前的函数体。

function componentWillMountMomentIsHere() {
  console.log('component will mount')
}


function AnyComponent(){
  const [greeting, setGreeting] = useState('Hello')

  componentWillMountMomentIsHere()

  
  return <h1>{greeting}</h1>
}

您可以修改useMemo钩子来模仿componentWillMount生命周期事件。 只做:

const Component = () => {
   useMemo(() => {
     // componentWillMount events
   },[]);
   useEffect(() => {
     // componentDidMount events
     return () => {
       // componentWillUnmount events
     }
   }, []);
};

您需要在任何与您的状态交互之前保留useMemo钩子。这不是它的意图，但它适用于我的所有componentWillMount问题。

这是可行的，因为useMemo并不需要实际返回一个值，你也不必实际使用它作为任何东西，但由于它基于依赖关系记住了一个只会运行一次的值(“[]”)，并且它位于我们的组件之上，它在组件挂载之前运行一次。

只需要简单地在useEffect中添加一个空的依赖数组，它将作为componentDidMount工作。

useEffect(() => {
  // Your code here
  console.log("componentDidMount")
}, []);

考虑到

componentWillMount已弃用(1,2,3)，建议的替换是在构造函数中执行代码 在函数组件的return语句之前执行的代码在呈现之前隐式运行 与挂载类组件大致相当的是函数组件的初始调用 目标是在UI更新之前执行一些代码一次

解决办法是

在函数组件的主体中只运行一次函数。这可以通过useState、useMemo或useEffect来实现，具体取决于用例所需的时间。

由于代码需要在将初始呈现提交给屏幕之前运行，这将取消useEffect的资格，因为“传递给useEffect的函数将在将呈现提交给屏幕之后运行。”4。

因为我们想要保证代码只运行一次，这就使useMemo失去了资格，因为“在未来，React可能会选择“忘记”一些以前记住的值，并在下一次渲染时重新计算它们”5。

useState支持惰性初始状态计算，保证在初始渲染期间只运行一次，这似乎是一个很好的工作候选人。

useState的示例:

const runOnceBeforeRender = () => {};

const Component = () => {
  useState(runOnceBeforeRender);

  return (<></>);
}

作为自定义钩子:

const runOnceBeforeRender = () => {};

const useOnInitialRender = (fn) => {
  useState(fn);
}

const Component = () => {
  useOnInitialRender(runOnceBeforeRender);

  return (<></>);
};

runOnceBeforeRender函数可以选择返回一个在函数第一次呈现时立即可用的状态，不会触发重新呈现。

一个(可能不必要的)NPM包:useOnce钩子

useComponentWillMount钩

const useComponentWillMount = (cb) => {
    const willMount = useRef(true)

    if (willMount.current) cb()

    willMount.current = false
}

当出现顺序问题(比如在另一个脚本之前运行)时，这个钩子可以作为一个保护程序。如果不是这样，请使用useComnponentDidMount，它更符合React钩子的范例。

useComponentDidMount钩

const useComponentDidMount = cb => useEffect(cb, []);

如果你知道你的效果应该只运行一次在开始使用这个解决方案。它只会在组件挂载后运行一次。

useEffect范式

类组件具有生命周期方法，这些方法定义为组件时间轴上的点。钩子不遵循这种范式。相反，效果应该由内容构成。

function Post({postID}){
  const [post, setPost] = useState({})

  useEffect(()=>{
    fetchPosts(postID).then(
      (postObject) => setPost(postObject)
    )
  }, [postID])

  ...
}

在上面的例子中，效果处理的是获取文章的内容。而不是一个特定的时间点，它有一个它所依赖的值- postID。每次postID得到一个新值(包括初始化)，它都会重新运行。

组件将挂载讨论

在类组件中，componentWillMount被认为是遗留的(源1，源2)。它是遗留的，因为它可能运行不止一次，而且还有另一种选择——使用构造函数。这些考虑因素与功能组件无关。