正如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中返回一个函数，如上所述。

考虑到

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)。它是遗留的，因为它可能运行不止一次，而且还有另一种选择——使用构造函数。这些考虑因素与功能组件无关。

对于大多数人来说，这可能很清楚，但请记住，在函数组件体内调用的函数充当beforeRender。这并没有回答在ComponentWillMount上运行代码的问题(在第一次渲染之前)，但由于它是相关的，可能会帮助其他人，所以我把它留在这里。

const MyComponent = () => {
  const [counter, setCounter] = useState(0)
  
  useEffect(() => {
    console.log('after render')
  })

  const iterate = () => {
    setCounter(prevCounter => prevCounter+1)
  }

  const beforeRender = () => {
    console.log('before render')
  }

  beforeRender()

  return (
    <div>
      <div>{counter}</div>
      <button onClick={iterate}>Re-render</button>
    </div>
  )
}

export default MyComponent

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

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


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

  componentWillMountMomentIsHere()

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

根据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