探一下底层

实现按钮点击加减

1.原生js逻辑
原理：先取dom上的元素，再添加事件
过程都要经过先取得dom上的元素再进行操作

2. React
   思路：干掉取dom这一环

let number=0
let span=React.createElement('span',{className:'red'},number)

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

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


function render(){
  let span=React.createElement('span',{className:'red'},number)
    
  let button =React.createElement('button',{onClick:onClickButton},'+')
  
  let button2 =React.createElement('button',{onClick:onClickButton2},'-')

    let div=React.createElement('div',{className:'parent'},
                                span,button,button2)

  ReactDOM.render(div,document.querySelector('#root'))

}

且react可以进行局部更新，上面只会更新span里的number

优化render

let h=React.createElement

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

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


function render(){

    let div=
        h('div',{className:'parent'},
          h('span',{className:'red'},number),
          h('button',{onClick:onClickButton},'+'),
          h('button',{onClick:onClickButton2},'-')
         )

  ReactDOM.render(div,document.querySelector('#root'))

}

发现：下面的有点像html标签
则引入了JSX的语法

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

可以用webpack下的babel进行转译
最终

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

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


function render(){        
    ReactDOM.render( 
     <div class='parent'>
       <span class="red">{number}</span>
       <button onClick={onClickButton}>+</button>
       <button onClick={onClickButton2}>-</button>
     </div>,
      document.querySelector('#root')
  )
}