build-your-own-react

function createElement(type, props, ...children) {

children: children.map(child =>

typeof child === "object"

: createTextElement(child)

function createTextElement(text) {

function createDom(fiber) {

fiber.type == "TEXT_ELEMENT"

? document.createTextNode("")

: document.createElement(fiber.type)

updateDom(dom, {}, fiber.props)

const isEvent = key => key.startsWith("on")

const isProperty = key =>

key !== "children" && !isEvent(key)

const isNew = (prev, next) => key =>

const isGone = (prev, next) => key => !(key in next)

function updateDom(dom, prevProps, nextProps) {

isNew(prevProps, nextProps)(key)

.filter(isGone(prevProps, nextProps))

.filter(isNew(prevProps, nextProps))

dom[name] = nextProps[name]

.filter(isNew(prevProps, nextProps))

deletions.forEach(commitWork)

commitWork(wipRoot.child)

function commitWork(fiber) {

const domParent = fiber.parent.dom

fiber.effectTag === "PLACEMENT" &&

domParent.appendChild(fiber.dom)

fiber.effectTag === "UPDATE" &&

} else if (fiber.effectTag === "DELETION") {

domParent.removeChild(fiber.dom)

commitWork(fiber.sibling)

function render(element, container) {

let nextUnitOfWork = null

function workLoop(deadline) {

while (nextUnitOfWork && !shouldYield) {

nextUnitOfWork = performUnitOfWork(

shouldYield = deadline.timeRemaining() < 1

if (!nextUnitOfWork && wipRoot) {

requestIdleCallback(workLoop)

requestIdleCallback(workLoop)

function performUnitOfWork(fiber) {

fiber.dom = createDom(fiber)

const elements = fiber.props.children

reconcileChildren(fiber, elements)

nextFiber = nextFiber.parent

function reconcileChildren(wipFiber, elements) {

wipFiber.alternate && wipFiber.alternate.child

index < elements.length ||

const element = elements[index]

element.type == oldFiber.type

if (element && !sameType) {

if (oldFiber && !sameType) {

oldFiber.effectTag = "DELETION"

oldFiber = oldFiber.sibling

wipFiber.child = newFiber

prevSibling.sibling = newFiber

return <h1>Hi {props.name}h1>

const element = <App name="foo" />

const container = document.getElementById("root")

Didact.render(element, container)

Leave a Reply

Your email address will not be published. Required fields are marked *