组件优化

减轻state,与渲染无关的不要放在state中.

避免不必要的重新渲染.

钩子函数 shouldComponentUpdate(nextProps,nextState)
根据返回值判断是否需要渲染该值. 触发时机:更新阶段的钩子函数,组件重新渲染前执行(shouldComponentUpdate->render) 或者使用纯组件

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算法

初次渲染是,React会根据初始state(Model),创建一个虚拟DOM对象(树)
根据虚拟DOM生成真正的DOM,渲染到页面中
当数据变化后(setState),重新根据新的数据,创建新的虚拟DOM对象树
与上一次得到的虚拟DOM对象,使用Diff算法对比(找不同),得到需要更新的内容
最终,React只将变化的内容(patch)到DOM中,重新渲染到页面.

1.9 KiB Raw Blame History