手写简易React-Fiber

1、首先创建createElement函数

function createElement (
    type,
    config,
    ...children
) {
    
    const props = {
        ...config,
        children: children.map(child => typeof child === 'object' ? child : createTextNode(child))
    }
    
    return {
        type,
        props
    }
}

function createTextNode (text) {
    
    return {
        type: 'TEXT',
        props:{
            children:[],
            nodeValue: text
        }
    }
}

2、然后创建react-dom,即render函数

function render(vnode, container) {
    //vnode -> node
    const node = createNode(vnode)
    //node 插入container
    console.log(node);
    node && container && container.appendChild(node)
}

function createNode (vnode) {
    const {
        type,
        props
    } = vnode
    let node;
    
    //根据节点类型生成dom节点
    if(type === 'TEXT'){
        //文本
        node  = document.createTextNode('')
    } else if(typeof type === 'string') {
        node = document.createElement(type)
    }
    //遍历children
    
    reconcileChildren(node, props ?  props.children : [])
    
    //更新属性
    updateNode(node, props)
    return node
    
}

function updateNode(node, nextVal) {
    if(nextVal){
        Reflect.ownKeys(nextVal).filter(ck => ck !== 'children').forEach(k => {
            node[k] = nextVal[k]
        })
    }
}

function reconcileChildren(node, children) {
    children.forEach(child => {
        render(child,node)
    })
}

3、Fiber实现:

function render(vnode, container) {
    //vnode -> node
    // const node = createNode(vnode)
    //node 插入container
    // console.log(node);
    // node && container && container.appendChild(node)
    // workLoop
    wipRoot = {
        stateNode: container,
        props:{
            children:[vnode]
        }
    }
    nextUnitOfWork = wipRoot
}

function createNode (vnode) {
    const {
        type,
        props
    } = vnode
    let node;
    
    //根据节点类型生成dom节点
    if(type === 'TEXT'){
        //文本
        node  = document.createTextNode('')
    } else if(typeof type === 'string') {
        node = document.createElement(type)
    }
    //遍历children
    
    reconcileChildren(node, props ?  props.children : [])
    
    //更新属性
    updateNode(node, props)
    return node
    
}

function updateNode(node, nextVal) {
    if(nextVal){
        Reflect.ownKeys(nextVal).filter(ck => ck !== 'children').forEach(k => {
            node[k] = nextVal[k]
        })
    }
}

// function reconcileChildren(node, children) {
//     children.forEach(child => {
//         render(child,node)
//     })
// }
/* fiber */
//next work fiber
let nextUnitOfWork = null
// work in progress 正在工作红的fiber  root
let wipRoot = null

function reconcileChildren(workInProgress,children){
    let prevNewFiber = null
    children.forEach((child,i) => {
        //FiberNode 节点
        let newFiber = {
            type: child.type,
            key: child.key,
            props:child.props,
            stateNode: null,
            child: null,
            sibling: null,
            return:workInProgress
        }
        
        if(i === 0){
            workInProgress.child = newFiber
        } else {
            prevNewFiber.sibling = newFiber
        }
        
        prevNewFiber = newFiber
    })
}

function updateHostComponent(workInProgress){
    if(!workInProgress.stateNode){
        workInProgress.stateNode = createNode(workInProgress)
    }
    
    reconcileChildren(workInProgress,workInProgress.props.children)
}

function performUnitOfWork(workInProgress) {
    //1 处理当前fiber
    //原生标签
    updateHostComponent(workInProgress)
    
    //2 返回下一个要处理的fiber
    if(workInProgress.child){
        return workInProgress.child
    }
    
    let next = workInProgress
    
    while(next){
        if(next.sibling){
            return next.sibling
        }
        next = next.return
    }
}

//更新Fiber
function workLoop (idleDeadline) {
    console.log(idleDeadline);
    while(nextUnitOfWork && idleDeadline.timeRemaining() > 1) {
        //处理当前fiber 并返回下个fiber
        nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
    }    
    //comnitRoot
    if(!nextUnitOfWork && wipRoot){
        //vnode - node 更新到container中
        commitRoot()
    }
}    

requestIdleCallback(workLoop,{ timeout: 2000 })

function commitRoot() {
    commitWorker(wipRoot.child)
    wipRoot = null
}

function commitWorker(workInProgress){
    if(!workInProgress){
        return
    }
    //提交workInProgress
    let parentNodeFiber = workInProgress.return
    let parentNode = parentNodeFiber.stateNode
    if(workInProgress.stateNode){
        parentNode.appendChild(workInProgress.stateNode)
    }
    //提交 workInProgress.child
    commitWorker(workInProgress.child)
    //提交 workInProgress.sibling
    commitWorker(workInProgress.sibling)
}
// export default { render }

 

4、最后演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>手写React</title>
        <script src="main.js" type="text/javascript" charset="utf-8"></script>
        <script src="treact-dom.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript">
            let rot = createElement(
               "div",
                null,
                createElement(
                  "h1",
                  null,
                  "慢 慢 慢"
                ),
                createElement(
                  "p",
                  null,
                  "Terry"
                ),
                createElement(
                  "a",
                  { href: "https://www.kaikeba.com/" },
                  "Terry"
                ),
                "哈哈哈哈"
            )
            render(rot, document.getElementById("root"))
        </script>
    </body>
</html>

5、结果