Question

在Components类中，我们使用componentDidMount，componentDidUpdate生命周期方法来更新状态。例如）

componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
}

componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
}

它在包括第一个render（componentDidMount）的每个render（componentDidUpdate）之后运行。在useEffect挂钩中，我们可以实现此功能

useEffect(() => {
    document.title = `You clicked ${count} times`;
});

这两种方法效果相同吗？

我阅读了Reactjs.org这一节，并在React.js vs 16上进行了尝试。我认为这两种方法具有相同的效果。

useEffect(() => {
    document.title = `You clicked ${count} times`;
});

Answer 1

是的，它们是相同的。

最初，class based components仅支持生命周期方法。

功能组件是纯粹的无状态组件。但是在React 16.8中，他们添加了Hooks。可以在state和lifecycle methods处使用钩子。

是，您可以将useEffect Hook视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。

Answer 2

在使用基于类的组件时，在反应中，您可以访问生命周期方法（例如componentDidMount，componentDidUpdat等）。但是，当您要使用功能组件并且还想使用生命周期方法时，则可以使用useEffect来实现这些生命周期方法。

关于您的问题，当您使用基于类的组件时，您已经预定义了所有生命周期方法，并且它们均被相应地触发，但是使用useEffect时，还需要使其根据您要实现的生命周期方法起作用。请参见下面的示例。

//--------Using a class based component.

import React, { Component } from 'react'
export default class SampleComponent extends Component {
  componentDidMount() {
    // code to run on component mount
  }
render() {
    return (<div>foo</div>)
  }
}

//-----------Using a functional component

import React, { useEffect } from 'react'
const SampleComponent = () => {
  useEffect(() => {
    // code to run on component mount
  }, [])
return (<div>foo</div>)
}
export SampleComponent

它们几乎相同，但是实现上有很大的不同，（基于类的组件）您具有使用生命周期方法的自定义函数，但是在此处（基于函数的组件）中，您使用useEffect来实现要手动使用的每个函数。但是开发人员选择功能组件而不是基于类，因为功能组件被认为比CBC更快。（45% Faster React Functional Components）

生命周期方法和useEffect挂钩之间有什么区别？

2 个答案: