Question

我被迫使用基于类的组件，因此如何在我的React组件中用组件生命周期（例如componentDidMount，componentDidUpdate和componentWillUnmount）替换useEffect。请帮助

const App = () => {
  useEffect(() => {
    store.dispatch(loadUser());
  }, []);

Answer 1

正如doc

中提到的React团队

挂钩是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。

因此，如果要使用生命周期，则必须使用class

使用扩展Component的类，它必须像这样：

import React from 'react';

class App extends React.Component {
  //you can use components lifecycle here for example : 

  componentDidMount() {
    store.dispatch(loadUser());
  }
}

Answer 2

在考虑了构造函数之后，应将componentDidMount方法放在前面，如下所示：

class yourComponent extends Component {
   constructor(props){
      // constructor taks...
   }

   componentDidMount() {
      // what you want to do when the component mount
   }
}

如何用组件生命周期替换useEffect挂钩？

2 个答案: