DOM重新呈现没有任何更新在reactjs

Question

export default class setState extends React.Component{ 
    constructor(){ 
     super(); 

     this.state = { 
      data:[],`enter code here` 
      'header':'this is header' 
     } 
    } 

    updateState(){ 
     var arr = this.state.data; 
     var temp = 'setState... '; 
     arr.push(temp); 

     this.setState({data:arr}); 
    } 

    render(){ 
     return(
      <div> 
       <h1>Set State</h1> 
       <button onClick={this.updateState.bind(this)} >Update State </button> 
       <p>{this.state.data}</p> 
       <h3>{this.state.header}</h3> 
       <h2>Random value : {Math.random()}</h2> 
      </div> 
     ) 
    } 
} 

我不想更新h2标签的“随机值”。当我在“更新按钮”点击我是数组中的推动价值和做“的setState”。但它也更新我的h2标签。

Answer 1

把Math.random功能渲染功能将导致价值被改变了每个渲染，相反，你可以在初始化构造你的随机值。

export default class setState extends React.Component{ 
    constructor(){ 
     super(); 

     this.state = { 
      data:[], 
      'header':'this is header' 
     } 
     //init random value here 
     this.randomValue = Math.random(); 
    } 

    updateState(){ 
     var arr = this.state.data; 
     var temp = 'setState... '; 
     arr.push(temp); 

     this.setState({data:arr}); 
    } 

    render(){ 
     return(
      <div> 
       <h1>Set State</h1> 
       <button onClick={this.updateState.bind(this)} >Update State </button> 
       <p>{this.state.data}</p> 
       <h3>{this.state.header}</h3> 
       <h2>Random value : {this.randomValue}</h2> 
      </div> 
     ) 
    } 
}