componentWillMount已弃用(正如在其他评论中提到的)，原因是我认为它很容易被一个简单的HOC处理。

const withComponentWillMount = (WrappedComponent, handler) => {
  return (props) => {
    return handler(props) ? <WrappedComponent {...props} /> : null;
  }
}

我通常在我的项目中实现这个解决方案。使用此HOC，如果处理程序返回false，则组件内部不运行任何内容，包括钩子。

So for React hooks, I think declaring your logic before the return statement can work. You should have a state that is set to true by default. In my case, I called the state componentWillMount. Then a conditional to run a block of code when this state is true (the block of code contains the logic you want executed in your componentWillMount), the last statement in this block should be resetting the componentWillMountState to false (This step is important because if it is not done, infinite rendering will occur) Example

// do your imports here

const App = () =>  {
  useEffect(() => {
    console.log('component did mount')
  }, [])
  const [count, setCount] = useState(0);
  const [componentWillMount, setComponentWillMount] = useState(true);
  if (componentWillMount) {
    console.log('component will mount')
    // the logic you want in the componentWillMount lifecycle
    setComponentWillMount(false)
  }
  
  return (
    <div>
      <div>
      <button onClick={() => setCount(count + 1)}> 
        press me
      </button>
      <p>
        {count}
      </p>
      
      </div>
    </div>
  )
}

根据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', () => {})
  }
}, [])

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

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

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

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

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