为什么我的React组件会不断重新渲染?

时间:2020-08-02 08:05:27

标签: javascript reactjs lifecycle

我试图在我正在构建的React项目中将防皱压延机嵌入到组件中。我应该注意,我正在使用一个名为react-script-tag的库,该库允许我在组件中使用<script/>标签。 无论如何,压延机正在渲染-但随后继续进行重新渲染,就好像它陷入了某种循环中一样。我觉得我需要实现某种生命周期方法。有什么建议?代码如下:

import React from 'react'
import Nav from './Nav'
import ScriptTag from 'react-script-tag'

class Events extends React.Component {

    render() {
    return (
        <div>
            <Nav/>
             <div data-tockify-component="calendar" data-tockify-calendar="hzevents2"></div>
            <ScriptTag isHydrating={false} data-cfasync="false" data-tockify-script="embed" src="https://public.tockify.com/browser/embed.js"></ScriptTag> 
        </div>
    )
    }
}

export default Events

2 个答案:

答案 0 :(得分:1)

'react-script-tag'文档说

建议将Script标记放置在以下组件中: 在您的应用的整个生命周期内只能渲染一次。否则,一个新的

每次再次安装组件时,都会添加标记。 目前有计划来防止这种情况。

您可能希望使用纯组件来防止重新渲染。

编辑:不管我的回答如何,您都应显示其余代码,以便能够发现问题。

答案 1 :(得分:1)

使用React.PureComponent代替React.Component,因为React.PureComponent会在不需要或更新时阻止重新渲染。