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> 
     ) 
    } 
}