用 Meteor js 语法描述 React componentDidMount()

Question

如何在不创建 class extends react 组件的情况下声明 componentDidMount？例如 render() 用 react-dom 包声明，也许存在另一个 componentDidMount 包？

class App extends Component {
  constructor(){
    // do something
  }
  componentDidMount(){
    // js code must run after page loaded
  }
  render(){
    return(
      <div className="app">

      </div>
    );
  }
}
export {App};

与组件构造函数()相同

const App = () => {

  // constructor and componentDidMount does not work here

  // js code must run after page loaded

  return (
    <div className="app">

    </div>
  );
};
export {App};

Answer 1

首先，你要实现的是完全独立于Meteor。这是一个纯粹的 React 问题，可能存在于任何后端。您可以使用 useEffect() 挂钩来实现您想要实现的目标，您可以在此处找到相关文档：

https://reactjs.org/docs/hooks-reference.html#useeffect

这里有一篇很棒的文章解释了如何用钩子替换生命周期方法：

https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n

对于您的情况，对于 componentDidMount，您必须执行以下操作：

useEffect(() => {
     // js code must run after page loaded
}, []);

在最后一个数组中，您必须放置将在需要时重新触发挂钩的依赖项。要模仿一个简单的 componentDidMount，一个空数组通常是解决方案。

用 Meteor js 语法描述 React componentDidMount()

Describing React componentDidMount() in Meteor js syntax

meteor

reactjs