jsx语法->createElement()->React元素
父组件更新,子组件跟着更新.
# 组件优化
### 减轻state,与渲染无关的不要放在state中.
### 避免不必要的重新渲染.
钩子函数 shouldComponentUpdate(nextProps,nextState)  
根据返回值判断是否需要渲染该值.
触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate->render)
或者使用纯组件
```html
class StateApp extends React.Component{
    constructor(){
      super()
      this.state= {
        count:0
      }
    }
    shouldComponentUpdate(nextProps,nextState){
        console.info('最新是内容'+nextState.count)
        console.info('上次是内容'+this.state.count)
        return nextState.count!==this.setState.count
    }
    onIncrement=()=>{
      console.info('事件处理this'+this)
        this.setState((state,props)=> {
            return {
                count:state.count+1
            }
        })
        console.info(this.state.count)
    }
    render(){
      return (
        <div>有状态组件,{this.state.count}
        <button onClick={this.onIncrement}>+1</button>
        </div>
      )
    }
  }
```

## 纯组件 PureComponent
比较props和state,只有这两者变化才会更新.
纯组件内部的对比是shallow compare 浅层对比
对于引用类型来说:只比较对象地址.
# 虚拟DOM和Diff算法
虚拟DOM=state+jsx
虚拟DOM:本质上就是一个js对象,用来描述你希望在屏幕上看到的内容(UI)
虚拟DOM让react脱离了浏览器的束缚
## diff算法
1. 初次渲染是,React会根据初始state(Model),创建一个虚拟DOM对象(树)
2. 根据虚拟DOM生成真正的DOM,渲染到页面中
3. 当数据变化后(setState),重新根据新的数据,创建新的虚拟DOM对象树
4. 与上一次得到的虚拟DOM对象,使用Diff算法对比(找不同),得到需要更新的内容
5. 最终,React只将变化的内容(patch)到DOM中,重新渲染到页面.