react原理部分

一、batchUpdate和setState

核心要点：

setState主流程batchUpdate机制transaction事务机制

 

左边分支对应左边的图，右边分支对应右边的图

注意点：

     this.setState({
             count: this.state.count + 1
         }, () => {
             // 联想 Vue $nextTick - DOM
             // 回调函数中可以拿到最新的 state
             // console.log('count by callback', this.state.count)
             
         })
        // 异步的，拿不到最新值
        console.log('count', this.state.count) 

// setTimeout 中 setState 是同步的
   setTimeout(() => {
        this.setState({
          count: this.state.count + 1
        })
       console.log('count in setTimeout', this.state.count)
    }, 0)

自己定义的 DOM 事件，setState 是同步的。再 componentDidMount 中

      // 一、传入对象，会被合并（类似 Object.assign ）。执行结果只一次 +1
      this.setState({
           count: this.state.count + 1
        })
      this.setState({
           count: this.state.count + 1
       })
      this.setState({
           count: this.state.count + 1
        })
        

        // 二、传入函数，不会被合并。执行结果是 +3
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })

setState异步还是同步？

setState无所谓异步还是同步看是否命中batchUpdate机制判断isBatchingUpdates

那些能命中batchUpdate机制？

生命周期（和它调用的函数）React中注册的事件（和它调用的函数）React可以“管理”的入口

那些不能命中batchUpdate机制？

setTimeout setInterval等（和它调用的函数）自定义的Dom事件（和它调用的函数）React"管不到"的的入口

batchUpdate 即批量更新，即多次修改 state 一次更新，增加性能。

transaction事务机制：

 二、组件渲染和更新机制 jsx即createElement函数执行vnodepath(elem,vnode)和patch(vnode,newVode)

组件渲染过程：

props staterender() 生成vnodepatch(elem,vnode)

更新过程：

setState() => dirtyComponents（可能有子组件）render()  生成newVodepath（vnode,newVnode）

  

三、fiber如何优化性能

更新分为两个阶段：

reconciliation阶段 - 执行diff算法，纯js计算commit阶段 - 将diff结果渲染DOM

JS是单线程，且和DOM渲染共用一个线程，当组件足够复杂的时候，组件更新时计算和渲染压力大。同时再有DOM *** 作需求（动画，鼠标拖拽等），页面将卡顿。fiber是怎么解决的呢？

将reconciliation阶段进行任务拆分（commit阶段无法拆分）Dom需要渲染的时候暂停，空闲时恢复window.requestIdleCallback （有的浏览器支持，有的不支持，fiber利用这个方法去优化性能）