需要将ComponentDidMount添加到无状态功能

问题描述

我需要添加它，但是由于下面的组件是无状态的，因此我无法识别componentDidMount（），我不确定如何扩展它或这里是否有最佳实践？

下面是我的组件-

export default ({ children,meta,title }) => {
  
  return (
    <StaticQuery
      query={graphql`
        query IndexLayoutQuery {
          settingsYaml {
            siteTitle
            siteDescription
            googleTrackingId
            socialMediaCard {
              image
            }
          }
          allPosts: allMarkdownRemark(
            filter: { fields: { contentType: { eq: "postCategories" } } }
            sort: { order: DESC,fields: [frontmatter___date] }
          ) {
            edges {
              node {
                fields {
                  slug
                }
                frontmatter {
                  title
                }
              }
            }
          }
        }
      `}
      render={data => {
        const { siteTitle,socialMediaCard,googleTrackingId } =
            data.settingsYaml || {},subNav = {
            posts: data.allPosts.hasOwnProperty('edges')
              ? data.allPosts.edges.map(post => {
                  return { ...post.node.fields,...post.node.frontmatter }
                })
              : false
          }

          

        return (
          
          <Fragment>
            <Helmet
              defaultTitle={siteTitle}
              titleTemplate={`%s | ${siteTitle}`}
            >
              {title}
              <link href="https://ucarecdn.com" rel="preconnect" crossorigin />
              <link rel="dns-prefetch" href="https://ucarecdn.com" />
              {/* Add font link tags here */}
            </Helmet>

            <Meta
              googleTrackingId={googleTrackingId}
              absoluteImageUrl={
                socialMediaCard &&
                socialMediaCard.image &&
                socialMediaCard.image
              }
              {...meta}
              {...data.settingsYaml}
            />

            <GithubCorner url="https://github.com/thriveweb/yellowcake" />

            <Nav subNav={subNav} />

            <Fragment>{children}</Fragment>
            <Footer />
          </Fragment>
        )
      }}
    />
  )
}

我需要添加它，但是由于上面的组件是无状态的，因此我无法识别componentDidMount（），我不确定如何扩展它，或者什么最佳实践在这里？

谢谢！

async componentDidMount() {
    try {
        const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
        await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
    } catch (err) {
        console.error(err);
    }
}

解决方法

您可以使用react挂钩使功能组件变为有状态，请查看reactjs文档以获取更多信息。以下代码可以完成componentDidMount在类组件中的作用

useEffect(()=>{
//your code here...

},[])

,

在功能组件中，您可以使用挂钩访问反应生命周期。对于副作用，使用useEffect钩子，使用useEffect可以使代码看起来像这样。

编辑：应该是这个

import { useEffect } from 'react'

useEffect(() => {
    async function loader() {
        try {
            const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
            await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
        } catch (err) {
            console.error(err);
        }
    }
    loader();
},[])

,

您可以在react-hook中使用useEffect

示例：

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