reactjs:如何在ES6常量中定义componentDidMount？

Question

我有一个不是ES6 class的react组件。这是一个const，就像这样：

import React from 'react';
import Dashboard from './components/Dashboard';

const Home = (props) => {

    const componentDidMount = () => {
        console.log('component mounted'); // not working
    }


    return <Dashboard />;
}

在这个const中，我如何像在普通的ES6 class中那样定义componentDidMount函数？我之前就是这么做的。

import React from 'react';
import Dashboard from './components/Dashboard';

class Dashboard extends React.Component {

    componentDidMount() {
        console.log('component mounted');
    }

    render() {
        return <Dashboard />;
    }

}

Answer 1

无状态功能组件不支持生命周期方法。

您可以将其转换为有状态组件，也可以将其包装在有状态容器中。

包装获取生命周期方法的一个很好的例子：

https://egghead.io/lessons/javascript-redux-fetching-data-on-route-change

Answer 2

对于其他像我一样学习React并在未来偶然发现这一点的人来说，这里可以接受的答案已经过时了。请查看此问题：componentDidMount equivalent on a React function/Hooks component?

如果使用React 16.8.0+，则可以使用钩子useEffect创建componentDidMount的效果

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