函数组件&class组件

let number=0
let onClickButton=()=>{
  number+=1
  render()
}

let onClickButton2=()=>{
  number-=1
  render()
}

function Box1(){
return (

       {number}
       +
       -
     

)
}
function Box2(){
return (

       {number}
       +
       -
     
  )
}
function App(){
  return(
     

        
        
     
   )
}
render()


function render(){        
    ReactDOM.render( 
     ,
      document.querySelector('#root')
  )
}

注意 组件的名称得大写 如上面的App Box1 Box2
我第一次用的时候没注意用的小写执行不了
上述代码发现的一个问题

函数并不足够组件化

因为一旦render 就是整个页面进行render

转用class

function App(props){
  return (
    

      
      
    
  )
}

class Box1 extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      number: 0
    }
  }
  add(){
    this.setState({
      number: this.state.number + 1
    })
  }
  minus(){
    this.setState({
      number: this.state.number - 1
    })
    
    this.state.number -= 1
    render()
  }
  render(){
    return (
      

        {this.state.number}
        +
        -
        {this.props.name}
      
    )
  }
}

class Box2 extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      number: 0
    }
  }
  add(){
    console.log(this,'2222222')

    this.setState({
      number: this.state.number + 2
    })
  }
  minus(){
    this.setState({
      number: this.state.number - 2
    })
  }
  render(){
    return (
      

        {this.state.number}
        +2
        -2
        {this.props.name}
      
    )
  }
}


render()



function render(){
  ReactDOM.render(
    ,  // React.createElement(App)
    document.querySelector('#root')
  )
}

1. 用class必须要extend React.Componen
2. constructor 要接受props
3. constructor 中必须写一个 super(props)（JS规定的）
4. 在constructor 中初始化this.state 里面的内容为你规定的变量
5. 出发的事件可以写在constructor外面
6. render 函数返回具有一个根元素的标签
   且 里面要使用变量和被传入的值需要 this.state.number this.props.name
   绑定事件要bind this

为什么要用setState?

setState会将大批量的更新合并成一次更新

代码连接