https://reactjs.org/docs/hooks-reference.html#usememo

记住，传递给useMemo的函数在呈现期间运行。 不要在那里做渲染时通常不会做的事情。 例如，副作用属于useEffect，而不是useMemo。

根据reactjs.org的说法，componentWillMount在未来将不受支持。 https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

不需要使用componentWillMount。

如果你想在组件挂载之前执行一些操作，只需在构造函数()中执行即可。

如果你想做网络请求，不要在componentWillMount中做。这是因为这样做会导致意想不到的错误。

网络请求可以在componentDidMount中完成。

希望能有所帮助。

---

2019年8月3日更新

你请求componentWillMount的原因可能是因为你想在呈现之前初始化状态。

就在我们的地盘上做吧。

const helloWorld=()=>{
    const [value,setValue]=useState(0) //initialize your state here
    return <p>{value}</p>
}
export default helloWorld;

或者你想在componentWillMount中运行一个函数，例如，如果你的原始代码看起来像这样:

componentWillMount(){
  console.log('componentWillMount')
}

使用hook，你所需要做的就是删除生命周期方法:

const hookComponent=()=>{
    console.log('componentWillMount')
    return <p>you have transfered componeWillMount from class component into hook </p>
}

我只是想对第一个关于useEffect的答案补充一些东西。

useEffect(()=>{})

useEffect运行在每次渲染上，它是componentDidUpdate, componentDidMount和ComponentWillUnmount的组合。

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

如果我们在useEffect中添加一个空数组，它只在组件挂载时运行。这是因为useEffect将比较您传递给它的数组。 所以它不一定是空数组。它可以是一个不变的数组。例如，它可以是[1,2,3]或['1,2']。useEffect仍然只在组件挂载时运行。

这取决于你是想让它只运行一次，还是在每次渲染后运行。如果您忘记添加数组，只要您知道自己在做什么，这并不危险。

我为hook创建了一个示例。请查看一下。

https://codesandbox.io/s/kw6xj153wr

---

2019年8月21日更新

我写上面的答案已经有一段时间了。有件事我觉得你需要注意。 当你使用

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

当react比较传递给数组[]的值时，它使用Object.is()进行比较。 如果您将一个对象传递给它，例如

useEffect(()=>{},[{name:'Tom'}])

这和:

useEffect(()=>{})

每次都会重新呈现，因为object .is()比较对象时比较的是对象的引用，而不是值本身。这和为什么{}==={}返回false是一样的，因为它们的引用不同。 如果你仍然想比较对象本身而不是引用，你可以这样做:

useEffect(()=>{},[JSON.stringify({name:'Tom'})])

---

2021年7月9日更新:

关于依赖关系的一些更新:

一般来说，如果你使用一个函数或一个对象作为依赖项，它总是会重新呈现。但是react已经为您提供了解决方案:useCallback和useMemo

useCallback能够记住一个函数。 useMemo能够记住一个对象。

请看这篇文章:

https://javascript.plainenglish.io/5-useeffect-infinite-loop-patterns-2dc9d45a253f

你不能在钩子中使用任何现有的生命周期方法(componentDidMount, componentDidUpdate, componentWillUnmount等)。它们只能在类组件中使用。而Hooks只能用于功能组件。下面这句话来自React文档:

如果你熟悉React类的生命周期方法，你可以把useEffect Hook看作componentDidMount、componentDidUpdate和componentWillUnmount的组合。

建议是，可以在功能组件中从类组件中模拟这些生命周期方法。

componentDidMount中的代码在组件挂载时运行一次。useEffect钩子等价于此行为是

useEffect(() => {
  // Your code here
}, []);

注意这里的第二个参数(空数组)。这将只运行一次。

如果没有第二个参数，useEffect钩子将在组件的每次渲染时被调用，这可能是危险的。

useEffect(() => {
  // Your code here
});

componentWillUnmount用于清理(比如删除事件监听器，取消定时器等)。假设您正在componentDidMount中添加一个事件侦听器，并在componentWillUnmount中删除它，如下所示。

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

与上述代码等价的钩子如下所示

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

这可能不是componentWillMount方法的确切替代方法，但这里有一个方法可以用来实现同样的目标，但要使用useEffect:

首先初始化检索数据的对象为空值，并定义useEffect方法:

const [details, setDetails] = useState("")

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

const retrieveData = () => {       
       getData()                  // get data from the server 
      .then(response => {
        console.log(response.data);
        setDetails(response.data)
      })
      .catch(e => {
        console.log(e);
      })
  }

在JSX中，我们返回一个三元操作符

*return(
  <div>
    { 
   details ? (
   <div class="">
   <p>add Your Jsx Here</p>
</div>
): (
  <div>
<h4>Content is still Loading.....</h4>
</div>
)
}
  </div>
)*

这将确保在对象'details'中有数据之前，terenary操作符的第二部分会被加载，该操作符会触发useEffect方法，该方法导致在'details'对象中设置从服务器接收到的数据，从而呈现主JSX

我写了一个自定义钩子，它将在第一次渲染之前运行一个函数。

useBeforeFirstRender.js

import { useState, useEffect } from 'react'

export default (fun) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    fun()
  }
}

用法:

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'


export default () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

正如react文档中所述:

您可能会认为我们需要一个单独的效果来执行 清理。但是添加和删除订阅的代码非常紧凑 useEffect的设计是为了将它们放在一起。如果你的效果 返回一个函数，React会在清理的时候运行它:

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

所以我们唯一需要在钩子中使用componentWillUnmount的是在useEffect中返回一个函数，如上所述。