React Component 不支持生命周期方法？

Posted 2023-04-11

【中文标题】React Component 不支持生命周期方法？

【英文标题】：React Component not support lifecycle methods?

【发布时间】：2019-03-02 11:23:07

【问题描述】：

如何在下面的函数中使用生命周期方法，例如 ComponentDidMount？

var React = require('react');

module.exports = function SectionalSquareComponent(props) 


  return (
    <div .....

【问题讨论】：

生命周期是组件/类的一部分，而不是功能组件

ReactJS lifecycle method inside a functional Component 可能重复

【参考方案1】：

如果你想使用生命周期功能，你需要扩展 React.Component 类。正如@xadm 提到的，您不能使用功能组件和生命周期挂钩。

使用问题中的 ES5 语法，可能如下所示：

var createReactClass = require('create-react-class');
module.exports = createReactClass(
  componentDidUpdate: function(prevProps, prevState) 
  ,
  render: function() 
    return (<div>...</div>);
  
);

【参考方案2】：

正如其他人所说，如果您想挂钩生命周期方法，则需要使用 react.component。

如果您完全专注于功能组件，一个有趣的替代方法是使用recompose.lifecycle 方法，因此您可以这样做（来自文档）：

    const PostsList = ( posts ) => (
      <ul>posts.map(p => <li>p.title</li>)</ul>
    )

    const PostsListWithData = lifecycle(
      componentDidMount() 
        fetchPosts().then(posts => 
          this.setState( posts );
        )
      

)(PostsList);

【讨论】：

为什么要导入额外的依赖项来实现这一点，而不是遵循 React 的“方式”让有状态/类组件挂钩到生命周期方法而不是无状态/功能组件？

你不会的，它只是一个有趣的替代品和相对有用的库