如何停止reactjs中的重新渲染？

Question

  case 'splitWord': if(this.props.remedStatus){ console.log(this.props.remedStatus) console.log("remed") return( <HotspotRemed xml={this.receivedXML} userXml={this.usersAnswerXML} correctAnswer ={this.ansString} type={this.splitType} /> ) } else { console.log("reurn word") return( <div style ={wrap_style} > {this.forceUpdate} <SplitXMLPreview xml={this.receivedXML} type='w' assignedSplitContentClick={(contentId, selectionType) => { this.handleSplitContentClick(contentId, selectionType, 'w') }} getCorrectAns={(answers) => { this.correctAnswers = answers }} /> </div> ) } break <<<==NOW HERE IS MY RENDER MEHTOD.==>>> render() { console.log("render") return ( <div className="previewtemplate" style ={template}> {this.templateArea(this.state.templateType)} </div> ); } } 

我只是想知道如何停止重新渲染组件。

当我单击一个按钮时，我有三个按钮，它在那里执行操作。

有一个按钮。 在我使用if的情况下，当我单击该按钮时，它返回false和component false调用，这很好用，当再次单击该按钮时，它调用true组件，这对我来说也很好，但是当我再次单击按钮时首先调用渲染，然后调用我的组件。 我不想将其称为渲染。

我读了一些博客，他们建议使用this.forceupdate。 我该怎么办？

Answer 1

您可以实现自定义逻辑，该逻辑确定组件是否应使用shouldComponentUpdate方法进行更新（重新渲染）。

例如：

shouldComponentUpdate () {
    return false // this will lead to never re-render the component
}

注意，将来React可能会将shouldComponentUpdate（）视为提示而不是严格的指令，并且返回false仍可能导致组件的重新呈现。

这是文档中的更详细说明 。