如何在 React Hooks 中使用 componentWillMount()？

Question

在 React 的官方文档中它提到 -

如果你熟悉 React 类生命周期方法，你可以认为

useEffect Hook 为 componentDidMount、componentDidUpdate 和

componentWillUnmount 组合。

我的问题是 - 我们如何在挂钩中使用 componentWillMount() 生命周期方法？

原文由 Abrar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

componentDidMount 中的代码在安装 componentDidMount 时运行一次。此行为的 useEffect 钩子等效项是

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

注意这里的第二个参数（空数组）。这只会运行一次。

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

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

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

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

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

上面代码的钩子等效如下

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

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

原文由 Bhaskar Gyan Vardhan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

useComponentWillMount 钩子

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

    if (willMount.current) cb()

    willMount.current = false
}

当出现顺序问题时（例如在另一个脚本之前运行），此挂钩可能是一个保护程序。如果不是这种情况，请使用更符合 React hooks 范例的 useCompnponentDidMount。

useComponentDidMount 钩子

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

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

使用效果范式

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

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

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

  ...
}

在上面的示例中，效果处理获取帖子的内容。它不是某个时间点，而是具有依赖于 - postID 的值。每次 postID 获得一个新值（包括初始化），它将重新运行。

组件将安装讨论

在类组件中，componentWillMount 被认为是遗留的（ source 1 ， source2 ）。它是遗留的，因为它可能运行不止一次，并且有一个替代方案 - 使用构造函数。这些注意事项与功能组件无关。

原文由 Ben Carp 发布，翻译遵循 CC BY-SA 4.0 许可协议