从0实现一个tiny react（三）生命周期

时间 2019-11-08

原文原文链接

从0实现一个tiny react（三）生命周期

在给tinyreact加生命周期以前，先考虑组件实例的复用这个前置问题html

复用组件实例

render函数只能返回一个根node

class A extends Component{
    render() {
        return (<B>...</B>)  
    }
}
class C extends Component {
    render() {
        return (
            <div>
               <C1>...</C1>
               <C2>...</C2>
               <C3>...</C3>
            </div>
        )
    }
}

因此最终的组件树必定是相似这种的 (首字母大写的表明组件， div／span／a...表明原生DOM类型)
react

是绝对不可能出现下图这种树结构 (与render函数返回单根的特性矛盾)git

注意 __rendered引用指向了一个inst／dom。因此能够经过__rendered来复用实例。
下面咱们讨论怎么根据__rendered 复用instgithub

假如在 Father里面调用 setState？按照如今render 函数的作法:npm

else if (typeof vnode.nodeName == "function") {
    let func = vnode.nodeName
    let inst = new func(vnode.props)
    ...
}

新建 Son 实例
新建 Grandson 实例
diff 渲染 div

再次setState呢? 好吧，再来一次：segmentfault

新建 Son 实例
新建 Grandson 实例
diff 渲染 div

第 3步就是 (二) 讨论的内容，会用"最少"的dom操做，来更新dom到最新的状态。
对于1， 2 每次setState的时候都会新建inst，在这里是能够复用以前建立好的inst实例的。数组

可是若是一个组件初始渲染为 '<A/>', setState 以后渲染为 '<B/>' 这种状况呢？那inst就不能复用了，类比一下 DOM 里的 div --> span
。把render 第四个参数 old ---> olddomOrComp ，经过这个参数来判断 dom 或者inst 是否能够复用：app

//inst 是否能够复用
function render (vnode, parent, comp, olddomOrComp) {
    ...
    } else if(typeof vnode.nodeName === "string") {
        if(!olddomOrComp || olddomOrComp.nodeName !== vnode.nodeName.toUpperCase()) { // <--- dom 能够复用
             createNewDom(vnode, parent, comp, olddomOrComp, myIndex)
         }
    ...     
    } else if (typeof vnode.nodeName == "function") {
        let func = vnode.nodeName
        let inst
        if(olddomOrComp && olddomOrComp instanceof func) { // <--- inst 能够复用 
            inst = olddomOrComp
            olddomOrComp.props = vnode.props 
        }
        ....
        
        render(innerVnode, parent, inst, inst.__rendered)

这里在最后的 render(innerVnode, parent, inst, olddom) 被改成了： render(innerVnode, parent, inst, inst.__rendered)。这样是符合 olddomOrComp定义的。
可是 olddom 实际上是有2个做用的dom

判断dom是否能够复用
parent.replaceChild(dom, olddom), olddom肯定了新的dom的位置
而 olddomOrComp 是作不到第二点。即便： parent.replaceChild(dom, getDOM(olddomOrComp)) 也是不行的。缘由是：

假如初始 CompA --> <Sub1/> setState后 CompA --> <Sub2/>，那么inst 不能够复用， inst.__rendered 是undefined，就从replaceChild变成了appendChild

怎么解决呢？引入第5个参数 myIndex: dom的位置问题都交给这个变量。 olddomOrComp只负责决定复用的问题

so, 加入myIndex的代码以下：

/**
 * 替换新的Dom， 若是没有在最后插入
 * @param parent
 * @param newDom
 * @param myIndex
 */
function setNewDom(parent, newDom, myIndex) {
    const old =  parent.childNodes[myIndex]
    if (old) {
        parent.replaceChild(newDom, old)
    } else {
        parent.appendChild(newDom)
    }
}

function render(vnode, parent, comp, olddomOrComp, myIndex) {
    let dom
    if(typeof vnode === "string" || typeof vnode === "number" ) {
        ...
        } else {
           
            dom = document.createTextNode(vnode)
            setNewDom(parent, dom, myIndex)              // <--- 根据myIndex设置 dom
        }
    } else if(typeof vnode.nodeName === "string") {
        if(!olddomOrComp || olddomOrComp.nodeName !== vnode.nodeName.toUpperCase()) {
            createNewDom(vnode, parent, comp, olddomOrComp, myIndex)
        } else {
            diffDOM(vnode, parent, comp, olddomOrComp, myIndex)
        }
    } else if (typeof vnode.nodeName === "function") {
        ...
        let innerVnode = inst.render()
        render(innerVnode, parent, inst, inst.__rendered, myIndex) // <--- 传递 myIndex
    }
}

function createNewDom(vnode, parent, comp, olddomOrComp, myIndex) {
    ...
    setAttrs(dom, vnode.props)

    setNewDom(parent, dom, myIndex)         // <--- 根据myIndex设置 dom

    for(let i = 0; i < vnode.children.length; i++) {
        render(vnode.children[i], dom, null, null, i)  // <--- i 就是myIndex
    }
}

function diffDOM(vnode, parent, comp, olddom) {
    ...
    for(let i = 0; i < vnode.children.length; i++) {
        render(vnode.children[i], olddom, null, renderedArr[i], i)  // <--- i 就是myIndex
    }
    ...
}

从新考虑 Father里面调用 setState。此时已经不会建立新实例了。

那么假如如今对 Grandson调用setState呢？很不幸，咱们须要建立Granssonson1, Granssonson2, Granssonson3，调用几回，咱们就得跟着新建几回。
上面的复用方式并无解决这个问题, 以前 __rendered 引用链到 dom就结束了。
<br/>把__rendered这条链完善吧！！

首先对__rendered 从新定义以下:

当X 是组件实例的时候， __rendered 为X渲染出的组件实例或者 dom元素
当X 是dom元素的时候， __rendered 为一个数组，是X的子组件实例或者子dom元素

Father --__rendered--> Son  --__rendered--> Grandson --__rendered--> div --__rendered--> [Granssonson1,  Granssonson2, Granssonson3,]

在dom 下建立 "直接子节点" 的时候。须要把这个纪录到dom.__rendered 数组中。或者说，若是新建的一个dom元素／组件实例是dom的 "直接子节点"，那么须要把它纪录到
parent.__rendered 数组中。那怎么判断建立出来的是 "直接子节点" 呢？答案是render 第3个参数 comp为null的，很好理解， comp的意思是 "谁渲染了我"
很明显，只有 dom下的 "直接子节点" comp才是null，其余的状况， comp确定不是null，好比 Son的comp是Father， Gsss1
的comp是Grandsonson1。。。

而且当setState从新渲染的时候，若是老的dom／inst没有被复用，则应该用新的dom／inst 替换

建立dom的时候。

function createNewDom(vnode, parent, comp, olddomOrComp, myIndex) {
    ...
    if (comp) {
        comp.__rendered = dom
    } else {
        parent.__rendered[myIndex] = dom
    }
    ...
}

组件实例

else if (typeof vnode.nodeName == "function") {
    ...
    if(olddomOrComp && olddomOrComp instanceof func) {
        inst = olddomOrComp
    } else {
        inst = new func(vnode.props)

        if (comp) {
            comp.__rendered = inst
        } else {
            parent.__rendered[myIndex] = inst
        }
    }
    ...
}

diffDOM 的时候： a. remove多余的节点； b. render子节点的时候olddomOrComp = olddom.__rendered[i]

function diffDOM(vnode, parent, comp, olddom) {
    ...
    olddom.__rendered.slice(vnode.children.length)  // <--- 移除多余 子节点
        .forEach(element => {
            olddom.removeChild(getDOM(element))
        })

    olddom.__rendered = olddom.__rendered.slice(0, vnode.children.length)
    for(let i = 0; i < vnode.children.length; i++) {
        render(vnode.children[i], olddom, null, olddom.__rendered[i], i)
    }
    olddom.__vnode = vnode
}

因此完整的代码：

function render(vnode, parent, comp, olddomOrComp, myIndex) {
    let dom
    if(typeof vnode === "string" || typeof vnode === "number" ) {
        if(olddomOrComp && olddomOrComp.splitText) {
            if(olddomOrComp.nodeValue !== vnode) {
                olddomOrComp.nodeValue = vnode
            }
        } else {
            dom = document.createTextNode(vnode)
            parent.__rendered[myIndex] = dom //comp 必定是null

            setNewDom(parent, dom, myIndex) 
        }
    } else if(typeof vnode.nodeName === "string") {
        if(!olddomOrComp || olddomOrComp.nodeName !== vnode.nodeName.toUpperCase()) {
            createNewDom(vnode, parent, comp, olddomOrComp, myIndex)
        } else {
            diffDOM(vnode, parent, comp, olddomOrComp)
        }
    } else if (typeof vnode.nodeName === "function") {
        let func = vnode.nodeName
        let inst
        if(olddomOrComp && olddomOrComp instanceof func) {
            inst = olddomOrComp
            inst.props = vnode.props
        } else {
            inst = new func(vnode.props)

            if (comp) {
                comp.__rendered = inst
            } else {
                parent.__rendered[myIndex] = inst    
            }
        }

        let innerVnode = inst.render()
        render(innerVnode, parent, inst, inst.__rendered, myIndex)
    }
}

function createNewDom(vnode, parent, comp, olddomOrComp, myIndex) {
    let dom = document.createElement(vnode.nodeName)

    dom.__rendered = []  // 建立dom的 设置 __rendered 引用
    dom.__vnode = vnode

    if (comp) {
        comp.__rendered = dom
    } else {
        parent.__rendered[myIndex] = dom
    }

    setAttrs(dom, vnode.props)

    setNewDom(parent, dom, myIndex) 
            
    for(let i = 0; i < vnode.children.length; i++) {
        render(vnode.children[i], dom, null, null, i)
    }
}

function diffDOM(vnode, parent, comp, olddom) {
    const {onlyInLeft, bothIn, onlyInRight} = diffObject(vnode.props, olddom.__vnode.props)
    setAttrs(olddom, onlyInLeft)
    removeAttrs(olddom, onlyInRight)
    diffAttrs(olddom, bothIn.left, bothIn.right)


    olddom.__rendered.slice(vnode.children.length)
        .forEach(element => {
            olddom.removeChild(getDOM(element))
        })

    const __renderedArr = olddom.__rendered.slice(0, vnode.children.length)
    olddom.__rendered = __renderedArr
    for(let i = 0; i < vnode.children.length; i++) {
        render(vnode.children[i], olddom, null, __renderedArr[i], i) 
    }
    olddom.__vnode = vnode
}

class Component {
    constructor(props) {
        this.props = props
    }

    setState(state) {
        setTimeout(() => {
            this.state = state

          
            const vnode = this.render()
            let olddom = getDOM(this)
            const myIndex = getDOMIndex(olddom)
            render(vnode, olddom.parentNode, this, this.__rendered, myIndex)
        }, 0)
    }
}
function getDOMIndex(dom) {
    const cn = dom.parentNode.childNodes
    for(let i= 0; i < cn.length; i++) {
        if (cn[i] === dom ) {
            return i
        }
    }
}

如今 __rendered链完善了， setState触发的渲染, 都会先去尝试复用组件实例。在线演示

生命周期

前面讨论的__rendered 和生命周期有什么关系呢？生命周期是组件实例的生命周期，以前的工做起码保证了一点: constructor 只会被调用一次了吧。。。
后面讨论的生命周期都是基于 "组件实例"的复用才有意义。tinyreact 将实现如下的生命周期：

componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
他们和 react同名函数含义相同

componentWillMount, componentDidMount, componentDidUpdate

这三个生命周期是如此之简单： componentWillMount紧接着建立实例的时候调用；渲染完成以后，若是
组件是新建的componentDidMount ，不然：componentDidUpdate

else if (typeof vnode.nodeName === "function") {
        let func = vnode.nodeName
        let inst
        if(olddomOrComp && olddomOrComp instanceof func) {
            inst = olddomOrComp
            inst.props = vnode.props
        } else {
            inst = new func(vnode.props)
            inst.componentWillMount && inst.componentWillMount()


            if (comp) {
                comp.__rendered = inst
            } else {
                parent.__rendered[myIndex] = inst
            }
        }

        let innerVnode = inst.render()
        render(innerVnode, parent, inst, inst.__rendered, myIndex)

        if(olddomOrComp && olddomOrComp instanceof func) {
            inst.componentDidUpdate && inst.componentDidUpdate()
        } else {
            inst.componentDidMount && inst.componentDidMount()
        }
    }

componentWillReceiveProps， shouldComponentUpdate， componentWillUpdate

当组件获取新的props的时候，会调用componentWillReceiveProps，参数为newProps，而且在这个方法内部this.props 仍是值向oldProps,
因为 props的改变由只能由父组件触发。因此只用在 render函数里面处理就ok。不过要在 inst.props = vnode.props 以前调用componentWillReceiveProps:

else if (typeof vnode.nodeName === "function") {
        let func = vnode.nodeName
        let inst
        if(olddomOrComp && olddomOrComp instanceof func) {
            inst = olddomOrComp
            inst.componentWillReceiveProps && inst.componentWillReceiveProps(vnode.props) // <-- 在 inst.props = vnode.props 以前调用
            
            inst.props = vnode.props
        } else {
            ...
        }
    }

当组件的 props或者state发生改变的时候，组件必定会渲染吗？shouldComponentUpdate说了算！！若是组件没有shouldComponentUpdate这个方法，默认是渲染的。
不然是基于 shouldComponentUpdate的返回值。这个方法接受两个参数 newProps, newState 。
另外因为 props和 state(setState) 改变都会引发 shouldComponentUpdate调用，因此:

function render(vnode, parent, comp, olddomOrComp, myIndex) {
    ...
    else if (typeof vnode.nodeName === "function") {
            let func = vnode.nodeName
            let inst
            if(olddomOrComp && olddomOrComp instanceof func) {
                inst = olddomOrComp
                inst.componentWillReceiveProps && inst.componentWillReceiveProps(vnode.props) // <-- 在 inst.props = vnode.props 以前调用
                
                let shoudUpdate
                if(inst.shouldComponentUpdate) {
                    shoudUpdate = inst.shouldComponentUpdate(vnode.props, olddomOrComp.state) // <-- 在 inst.props = vnode.props 以前调用
                } else {
                    shoudUpdate = true
                }
    
                inst.props = vnode.props   
                if (!shoudUpdate) {   // <-- 在 inst.props = vnode.props  以后
                    return // do nothing just return
                }
                

            } else {
                ...
            }
        }
     ...
}


setState(state) {
    setTimeout(() => {
        let shoudUpdate
        if(this.shouldComponentUpdate) {
            shoudUpdate = this.shouldComponentUpdate(this.props, state)
        } else {
            shoudUpdate = true
        }
        this.state = state
        if (!shoudUpdate) {  // <-- 在  this.state = state  以后
            return // do nothing just return
        }

        const vnode = this.render()
        let olddom = getDOM(this)
        const myIndex = getDOMIndex(olddom)
        render(vnode, olddom.parentNode, this, this.__rendered, myIndex)
        this.componentDidUpdate && this.componentDidUpdate() // <-- 须要调用下： componentDidUpdate
    }, 0)
}

当 shoudUpdate 为false的时候呢，直接return 就ok了，可是shoudUpdate 为false 只是代表不渲染，可是在 return以前， newProps和newState必定要设置到组件实例上。
<br/>注 setState render以后也是须要调用： componentDidUpdate

当 shoudUpdate == true 的时候。会调用： componentWillUpdate，参数为newProps和newState。这个函数调用以后，就会把nextProps和nextState分别设置到this.props和this.state中。

function render(vnode, parent, comp, olddomOrComp, myIndex) {
    ...
    else if (typeof vnode.nodeName === "function") {
    ...
    let shoudUpdate
    if(inst.shouldComponentUpdate) {
        shoudUpdate = inst.shouldComponentUpdate(vnode.props, olddomOrComp.state) // <-- 在 inst.props = vnode.props 以前调用
    } else {
        shoudUpdate = true
    }
    shoudUpdate && inst.componentWillUpdate && inst.componentWillUpdate(vnode.props, olddomOrComp.state)   // <-- 在 inst.props = vnode.props 以前调用   
    inst.props = vnode.props   
    if (!shoudUpdate) {   // <-- 在 inst.props = vnode.props  以后
        return // do nothing just return
    }
                
    ...
}


setState(state) {
    setTimeout(() => {
        ...
        shoudUpdate && this.componentWillUpdate && this.componentWillUpdate(this.props, state) // <-- 在 this.state = state 以前调用
        this.state = state
        if (!shoudUpdate) {  // <-- 在  this.state = state  以后
            return // do nothing just return
        }
        ...
}

componentWillUnmount

当组件要被销毁的时候，调用组件的componentWillUnmount。 inst没有被复用的时候，要销毁。 dom没有被复用的时候，也要销毁，并且是树形结构
的递归操做。有点像 render的递归，直接看代码：

function recoveryComp(comp) {
    if (comp instanceof Component) {  // <--- component
        comp.componentWillUnmount && comp.componentWillUnmount()
        recoveryComp(comp.__rendered)
    } else if (comp.__rendered instanceof Array) { // <--- dom like div/span
        comp.__rendered.forEach(element => {
            recoveryComp(element)
        })
    } else {       // <--- TextNode
        // do nothing
    }
}

recoveryComp 是这样的一个递归函数：

当domOrComp 为组件实例的时候，首先调用：componentWillUnmount，而后 recoveryDomOrComp(inst.__rendered) 。这里的前后顺序关系很重要
当domOrComp 为DOM节点（非文本 TextNode）, 遍历 recoveryDomOrComp(子节点)
当domOrComp 为TextNode，nothing...
与render同样，因为组件最终必定会render html的标签。因此这个递归必定是可以正常返回的。

哪些地方须要调用recoveryComp ？

全部olddomOrComp 没有被复用的地方。由于一旦olddomOrComp 不被复用，必定有一个新的取得它，它就要被销毁
多余的子节点。 div 起初有3个子节点， setState以后变成了2个。多出来的要被销毁

function diffDOM(vnode, parent, comp, olddom) {
    const {onlyInLeft, bothIn, onlyInRight} = diffObject(vnode.props, olddom.__vnode.props)
    setAttrs(olddom, onlyInLeft)
    removeAttrs(olddom, onlyInRight)
    diffAttrs(olddom, bothIn.left, bothIn.right)


    const willRemoveArr = olddom.__rendered.slice(vnode.children.length)
    const renderedArr = olddom.__rendered.slice(0, vnode.children.length)
    olddom.__rendered = renderedArr
    for(let i = 0; i < vnode.children.length; i++) {
        render(vnode.children[i], olddom, null, renderedArr[i], i)
    }

    willRemoveArr.forEach(element => {
        recoveryComp(element)
        olddom.removeChild(getDOM(element))
    })

    olddom.__vnode = vnode
}

到这里， tinyreact 就有生命周期了

以前的代码因为会用到 dom.__rendered。因此：

const root = document.getElementById("root")
root.__rendered = []
render(<App/>, root)

为了避免要在调用render以前设置：__rendered 作个小的改动：

/**
 * 渲染vnode成实际的dom
 * @param vnode 虚拟dom表示
 * @param parent 实际渲染出来的dom，挂载的父元素
 */
export default function render(vnode, parent) {
    parent.__rendered =[]  //<--- 这里设置 __rendered
    renderInner(vnode, parent, null, null, 0)
}

function renderInner(vnode, parent, comp, olddomOrComp, myIndex) {
    ...
}

其余

tinyreact 未实现功能：

context
事件代理
多吃调用setState，只render一次
react 顶层Api
。。。

tinyreat 有些地方参考了preact

npm包:

npm install tinyreact --save

全部代码托管在git example 目录下有blog中的例子

经典的TodoList。项目代码