如何停止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仍可能導致組件的重新呈現。

這是文檔中的更詳細說明 。