函数组件&class组件

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

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

function Box1(){
return (
<div class='parent'>
       <span class="red">{number}</span>
       <button onClick={onClickButton}>+</button>
       <button onClick={onClickButton2}>-</button>
     </div>

)
}
function Box2(){
return (
<div class='parent'>
       <span class="red">{number}</span>
       <button onClick={onClickButton}>+</button>
       <button onClick={onClickButton2}>-</button>
     </div>
  )
}
function App(){
  return(
     <div>
        <Box1/>
        <Box2/>
     </div>
   )
}
render()


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

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

函数并不足够组件化

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

转用class

function App(props){
  return (
    <div>
      <Box1 name="frank"/>
      <Box2 name="jack"/>
    </div>
  )
}

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 (
      <div className="red">
        <span>{this.state.number}</span>
        <button onClick={this.add.bind(this)}>+</button>
        <button onClick={this.minus.bind(this)}>-</button>
        {this.props.name}
      </div>
    )
  }
}

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 (
      <div className="red">
        <span>{this.state.number}</span>
        <button onClick={this.add.bind(this)}>+2</button>
        <button onClick={this.minus.bind(this)}>-2</button>
        {this.props.name}
      </div>
    )
  }
}


render()



function render(){
  ReactDOM.render(
    <App/>,  // 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会将大批量的更新合并成一次更新

代码连接