React【基础2】

一、随机数效果

最终效果

index.js页面

import React, {
    Component } from 'react';
import ReactDOM from 'react-dom';

class Parent extends Component{
   
  state={
   
    number:0
  }
  changeNumber(){
   
    this.setState({
   
      number:Math.floor(Math.random()*10)
    })
  }
  render(){
   
    return(
      <div>
        计数器：{
   this.state.number}
        <button onClick={
   this.changeNumber.bind(this)}>change</button>
      </div>
    )
  }
}

ReactDOM.render(
    <Parent />,
  document.getElementById('root')
);

其他问题效果

最终效果

不切换数字不执行render里面的代码，为的是加快页面执行速度

index.js文件

import React, {
    Component } from 'react';
import ReactDOM from 'react-dom';

class Parent extends Component{
   
  state={
   
    number:0
  }
  changeNumber(){
   
    this.setState({
   
      number:Math.floor(Math.random()*2)
    })
  }
  shouldComponentUpdate(nextprops,nextState){
   
    if(this.state.number !== nextState.number){
   
      return true
    }
    return false