preact源碼分析，有毒

zhangwang 發布于2019-08-22 15:24 / 1374人閱讀

摘要：最近讀了讀源碼，記錄點筆記，這里采用例子的形式，把代碼的執行過程帶到源碼里走一遍，順便說明一些重要的點建議對著源碼看和虛擬結點是對真實元素的一個對象表示由創建方法在根據指定結點名稱屬性子節點來創建之前會對子節點進行處理，包括當前要創建的不是

最近讀了讀preact源碼，記錄點筆記，這里采用例子的形式，把代碼的執行過程帶到源碼里走一遍，順便說明一些重要的點,建議對著preact源碼看

vnode和h()

虛擬結點是對真實DOM元素的一個js對象表示,由h()創建

h()方法在根據指定結點名稱、屬性、子節點來創建vnode之前,會對子節點進行處理，包括

當前要創建的vnode不是組件,而是普通標簽的話，文本子節點是null,undefined，轉成"",文本子節點是number類型，轉成字符串

連續相鄰的兩個子節點都是文本結點，合并成一個

例如：

h("div",{ id: "foo", name : "bar" },[
            h("p",null,"test1"),
            "hello",
            null
            "world", 
            h("p",null,"test2")
        ]
)

對應的vnode={

    nodeName:"div",
    attributes:{
        id:"foo",
        name:"bar"
    },
    [
        {
            nodeName:"p",
            children:["test1"]
        },
        "hello world",
        {
            nodeName:"p",
            children:["test2"]
        }
    ]

}

render()

render()就是react中的ReactDOM.render(vnode,parent,merge),將一個vnode轉換成真實DOM,插入到parent中，只有一句話，重點在diff中

return diff(merge, vnode, {}, false, parent, false);

diff

diff主要做三件事

調用idff()生成真實DOM

掛載dom

在組件及所有子節點diff完成后，統一執行收集到的組件的componentDidMount()

重點看idiff

idiff(dom,vnode)處理vnode的三種情況

vnode是一個js基本類型值,直接替換dom的文本或dom不存在,根據vnode創建新的文本返回

vnode.nodeName是function 即當前vnode表示一個組件

vnode.nodeName是string 即當前vnode表示一個對普通html元素的js表示

一般我們寫react應用，最外層有一個類似的組件，渲染時ReactDOM.render(>,root),這時候diff走的就是第二步，根據vnode.nodeName==="function"來構建組件,執行buildComponentFromVNode(),實例化組件，子組件等等

第三種情況一般出現在組件的定義是以普通標簽包裹的，組件內部狀態發生改變了或者初次實例化時，要render組件了，此時，要將當前組件現有的dom與執行compoent.render()方法得到的新的vnode進行Diff,來決定當前組件要怎么更新DOM

class Comp1 extends Component{

    render(){
        return 
                {
                    list.map(x=>{
                        return {x.txt}
                    })
                }
            
        
    }
    //而不是
    //render(){
    //    return 
    //}

}

普通標簽元素及子節點的diff

我們以一個真實的組件的渲染過程來對照著走一下表示普通dom及子節點的vnode和真實dom之間的diff過程

假設現在有這樣一個組件

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      change: false,
      data: [1, 2, 3, 4]
    };
  }

 change(){
    this.setState(preState => {
        return {
            change: !preState.change,
            data: [11, 22, 33, 44]
        };
    });
 }

  render(props) {
    const { data, change } = this.state;
    return (
      
        
        {data.map((x, index) => {
          if (index == 2 && this.state.change) {
            return {x};
          }
          return {x};
        })}
        {!change ? hello world : null}
      
    );
  }
}

初次渲染

App組件初次掛載后的DOM結構大致表示為

dom = {
       tageName:"DIV",
       childNodes:[
           
           1,
           2,
           3,
           4,
           hello world
       ]
}

更新

點擊一下按鈕，觸發setState,狀態發生變化,App組件實例入渲染隊列，一段時間后(異步的),渲染隊列中的組件被渲染，實例.render執行,此時生成的vnode結構大致是

vnode= {
    nodeName:"div"
    children:[
        { nodeName:"button", children:["change"] },
        { nodeName:"p", attributes:{key:"0"}, children:[11]},
        { nodeName:"p", attributes:{key:"1"}, children:[22]},
         { nodeName:"h2", attributes:{key:"2"}, children:[33]},
        { nodeName:"p", attributes:{key:"3"}, children:[44]},
    ]
 }

//少了最后的h1元素，第三個p元素變成了h2

然后在renderComponent方法內diff上面的dom和vnode diff(dom,vnode),此時在diff內部調用的idff方法內，執行的就是上面說的第三種情況vnode.nodeType是普通標簽,關于renderComponent后面介紹

首先dom和vnode標簽名是一樣的，都是div(如果不一樣,要通過vnode.nodeName來創建一個新元素，并把dom子節點復制到這個新元素下),并且vnode有多個children，所以直接進入innerDiffNode(dom,vnode.children)函數

innerDiffNode(dom,vchildren)工作流程

對dom結點下的子節點遍歷，根據是否有key，放入兩個數組keyed和children(那些沒有key放到這個里)

遍歷vchildren，為當前的vchild找一個相對應的dom下的子節點child，例如，key一樣的，如果vchild沒有key，就從children數組中找標簽名一樣的

child=idiff(child, vchild); 遞歸diff,根據vchild來得到處理后的child,將child應用到當前父元素dom下

接著看上面的例子

dom子節點遍歷得到兩個數組

keyed=[
    1,
       2,
       3,
       4
]
children=[
    ,
    hello world
]

迭代vnode的children數組

存在key相等的

vchild={ nodeName:"p", attributes:{key:"0"}, children:[11]},
child=keyed[0]=1

存在標簽名改變的

vchild={ nodeName:"h2", attributes:{key:"2"}, children:[33]},
child=keyed[2]=3,

存在標簽名相等的

vchild={ nodeName:"button", children:["change"] },
child=,

然后對vchild和child進行diff

child=idff(child,vchild)

看一組子元素的更新

看上面那組存在keys相等的子元素的diff,vchild.nodeName=="p"是個普通標簽，所以還是走的idff內的第三種情況。

但這里vchild只有一個后代元素，并且child只有一個文本結點，可以明確是文本替換的情況，源碼中這樣處理,而不是進入innerDiffNode,算是一點優化

let fc = out.firstChild,
        props = out[ATTR_KEY],
        vchildren = vnode.children;

    if (props == null) {
        props = out[ATTR_KEY] = {};
        for (let a = out.attributes, i = a.length; i--;) props[a[i].name] = a[i].value;
    }

    // Optimization: fast-path for elements containing a single TextNode:
    if (!hydrating && vchildren && vchildren.length === 1 && typeof vchildren[0] === "string" && fc != null && fc.splitText !== undefined && fc.nextSibling == null) {
        if (fc.nodeValue != vchildren[0]) {
            fc.nodeValue = vchildren[0];
        }
    }

所有執行child=idiff(child,vchild)后

child=11
//文本值更新了

然后將這個child放入當前dom下的合適位置，一個子元素的更新就完成了

如果vchild.children數組有多個元素，又會進行vchild的子元素的迭代diff

至此，diff算是說了一半了，另一半是vnode表示一個組件的情況，進行組件渲染或更新diff

組件的渲染、diff與更新

和組件的渲染，diff相關的方法主要有三個，依次調用關系

buildComponentFromVNode

組件之前沒有實例化過，實例化組件，為組件應用props，setComponentProps()

組件已經實例化過，屬于更新階段，setComponentProps()

setComponentProps

在setComponentProps(compInst)內部進行兩件事

根據當前組件實例是首次實例化還是更新屬性來調用組件的componentWillMount或者componentWillReceiveProps

判斷是否時強制渲染，renderComponent()或者把組件入渲染隊列，異步渲染

renderComponent

renderComponent內會做這些事:

判斷組件是否更新，更新的話執行componentWillUpdate(),

判斷shouldComponentUpdate()的結果，決定是否跳過執行組件的render方法

需要render,執行組件render(),返回一個vnode,diff當前組件表示的頁面結構上的真實DOM和返回的這個vnode，應用更新.(像上面說明的那個例子一樣)

依然從例子入手，假設現在有這樣一個組件

class Welcom extends Component{

    render(props){
        return {props.text}
    }

}

class App extends Component {

    constructor(props){
        super(props) 
        this.state={
            text:"hello world"
        }
    }

    change(){
        this.setState({
            text:"now changed"
        })
    }

    render(props){

        return 
                
                preact
                
            

    }

}

render(,root)

vnode={
    nodeName:App,
}

首次render

render(,root)執行，進入diff(),vnode.nodeName==App,進入buildComponentFromVNode(null,vnode)

程序首次執行,頁面還沒有dom結構，所以此時buildComponentFromVNode第一個參數是null，進入實例化App組件階段

c = createComponent(vnode.nodeName, props, context);
if (dom && !c.nextBase) {
    c.nextBase = dom;
    // passing dom/oldDom as nextBase will recycle it if unused, so bypass recycling on L229:
    oldDom = null;
}
setComponentProps(c, props, SYNC_RENDER, context, mountAll);
dom = c.base;

在setComponentProps中，執行component.componentWillMount(),組件入異步渲染隊列，在一段時間后，組件渲染，執行
renderComponent()

rendered = component.render(props, state, context);

根據上面的定義，這里有

rendered={
    nodeName:"div",
    children:[
        {
            nodeName:"button",
            children:["change"]
        },
        {
            nodeName:"h1",
            children:["preact"]
        },{
            nodeName:Welcom,
            attributes:{
                text:"hello world"
            }
        }
    ]
}

nodeName是普通標簽，所以執行

base = diff(null, rendered) 
//這里需要注意的是,renderd有一個組件child，所以在diff()-->idiff()[**走第三種情況**]---->innerDiffNode()中,對這個組件child進行idiff()時,因為是組件，所以走第二種情況,進入buildComponentFromVNode,相同的流程

component.base=base //這里的baes是vnode diff完成后生成的真實dom結構，組件實例上有個base屬性，指向這個dom

base大體表示為

base={
    tageName:"DIV",
       childNodes:[
        
           preact
        hello world
       ]
}

然后為當前dom元素添加一些組件的信息

base._component = component;
base._componentConstructor = component.constructor;

至此，初始化的這次組件渲染就差不多了,buildComponentFromVNode返回dom，即實例化的App的c.base,在diff()中將dom插入頁面

更新

然后現在點擊按鈕,setState()更新狀態，setState源碼中

let s = this.state;
if (!this.prevState) this.prevState = extend({}, s);
extend(s, typeof state==="function" ? state(s, this.props) : state);
/**
* _renderCallbacks保存回調列表
*/
if (callback) (this._renderCallbacks = (this._renderCallbacks || [])).push(callback);
enqueueRender(this);

組件入隊列了，延遲后執行renderComponent()

這次,在renderComponent中，因為當前App的實例已經有一個base屬性,所以此時實例屬于更新階段isUpdate = component.base =true,執行實例的componentWillUpdate()方法，如果實例的shouldComponentUpdate()返回true，實例進入render階段。

這時候根據新的props，state

rendered = component.render(props, state, context);

rendered={
    nodeName:"div",
    children:[
        {
            nodeName:"button",
            children:["change"]
        },
        {
            nodeName:"h1",
            children:["preact"]
        },{
            nodeName:Welcom,
            attributes:{
                text:"now changed" //這里變化
            }
        }
    ]
}

然后，像第一次render一樣，base = diff(cbase, rendered),但這時候，cbase是上一次render后產生的dom，即實例.base,然后頁面引用更新后的新的dom.rendered的那個組件子元素(Welcom)同樣執行一次更新過程,進入buildComponentFromVNode(),走一遍buildComponentFromVNode()-->setComponentProps()--->renderComponent()--->render()--->diff(),直到數據更新完畢

總結

preact src下只有15個js文件，但一篇文章不能覆蓋所有點，這里只是記錄了一些主要的流程，最后放一張有毒的圖

github

云服務器 GPU云服務器 Preact 服務器有毒源碼分析 nginx源碼分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93440.html

幫你讀懂preact的源碼（一）

摘要：是一個最小的庫，但由于其對尺寸的追求，它的很多代碼可讀性比較差，市面上也很少有全面且詳細介紹的文章，本篇文章希望能幫助你學習的源碼。建議與源碼一起閱讀本文。作為一名前端，我們需要深入學習react的運行機制，但是react源碼量已經相當龐大，從學習的角度，性價比不高，所以學習一個react mini庫是一個深入學習react的一個不錯的方法。 preact是一個最小的react mi...

XboxYan 2019-08-22 17:24 評論0 收藏0
從Preact了解一個類React的框架是怎么實現的(二): 元素diff

摘要：本系列文章將重點分析類似于的這類框架是如何實現的，歡迎大家關注和討論。作為一個極度精簡的庫，函數是屬于本身的。前言　　首先歡迎大家關注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵。　　之前分享過幾篇關于React的文章: React技術內幕: key帶來了什么 React技術內幕: setState的秘密...

張巨偉 2019-08-21 16:42 評論0 收藏0
幫你讀懂preact源碼（三）

摘要：對回收的處理在中，回收調用了兩個方法，節點的回收一般會調用，組件的回收會調用。個人理解從以上源碼閱讀中我們可以看到，最大的性能問題在于遞歸的，中的與也是為了緩解這個問題。為不同類型的更新分配優先級。對回收的處理在preact中，回收調用了兩個方法，dom節點的回收一般會調用recollectNodeTree，組件的回收會調用unmountComponent。 preact復用dom...

yuanxin 2019-08-22 17:24 評論0 收藏0
幫你讀懂preact源碼（二）

摘要：最后刪除新的樹中不存在的節點。而中會記錄對其做了相應的優化，節點的的情況下，不做移動操作。這種情況，在中得到了優化，通過四個指針，在每次循環中先處理特殊情況，并通過縮小指針范圍，獲得性能上的提升。上篇文章已經介紹過idff的處理邏輯主要分為三塊，處理textNode，element及component，但具體怎么處理component還沒有詳細介紹，接下來講一下preact是如何處理...

Warren 2019-08-22 17:24 評論0 收藏0
Luy 1.0 ：一個React-like輪子的誕生

摘要：司徒正美的一款了不起的化方案，支持到。行代碼內實現一個胡子大哈實現的作品其實就是的了源碼學習個人文章源碼學習個人文章源碼學習個人文章源碼學習個人文章這幾片文章的作者都是司徒正美，全面的解析和官方的對比。前言在過去的一個多月中，為了能夠更深入的學習，使用React，了解React內部算法，數據結構，我自己，從零開始寫了一個玩具框架。截止今日，終于可以發布第一個版本，因為就在昨天，我...

codecook 2019-08-21 17:05 評論0 收藏0