如何在 React Hooks 中使用 componentWillMount（） ？

不能在挂接中使用任何现有的生命周期方法（、等）。它们只能在类组件中使用。使用Hooks，您只能在功能组件中使用。下面的一行来自 React 文档：componentDidMountcomponentDidUpdatecomponentWillUnmount

如果你熟悉 React 类生命周期方法，你可以将 Hook 视为 、 和 组合。useEffectcomponentDidMountcomponentDidUpdatecomponentWillUnmount

建议是，你可以从类组件中模仿这些生命周期方法中的一个功能组件。

组件内部的代码在组件装入时运行一次。 此行为的钩子等效值为useEffect

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

请注意此处的第二个参数（空数组）。此操作将仅运行一次。

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

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

componentWillUnmount用于清理（如删除事件侦听器，取消计时器等）。假设您正在 中添加一个事件侦听器并将其删除，如下所示。componentDidMountcomponentWillUnmount

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

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

钩子相当于上面的代码将如下所示

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

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

使用组件威尔蒙特钩子

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

    if (willMount.current) cb()

    willMount.current = false
}

当存在序列问题（例如在另一个脚本之前运行）时，此挂接可能是一个保护程序。如果不是这种情况，请使用与 React hooks 范式更一致的 useComnponentDidMount。

useComponentDidMount hook

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

如果您知道您的效果在开始时只能运行一次，请使用此解决方案。在组件装入后，它只会运行一次。

使用有效的范式

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

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

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

  ...
}

在上面的示例中，该效果涉及获取帖子的内容。而不是某个时间点，它有一个它所依赖的值 - 。每次获得新值（包括初始化）时，它都会重新运行。postIDpostID

组件将装载讨论

在类组件中，组件WillMount被认为是遗留的（源1，源2）。它是遗留的，因为它可能会运行多次，并且还有另一种选择 - 使用构造函数。这些注意事项与功能组件无关。