search

pomber / didact

A DIY guide to build your own React
https://pomb.us/build-your-own-react/
6.29k stars 531 forks source link

commit deletion #22

Open lxsmnsyc opened 4 years ago

lxsmnsyc commented 4 years ago

Hello, I saw this repo for reverse-engineering or creating your own React library. It was a great project, but I have a question.

In this specific line: https://github.com/pomber/didact/blob/master/didact.js#L136

function commitDeletion(fiber, domParent) {
  if (fiber.dom) {
    domParent.removeChild(fiber.dom)
  } else {
    commitDeletion(fiber.child, domParent)
  }
}

How does commitDeletion perform on sibling fibers of the given child fiber?

pomber commented 4 years ago

Good question. The trick is: if fiber.dom is null it means it's the fiber of a function component, and function components never have more than one child (Didact doesn't have Fragments like React).

lxsmnsyc commented 4 years ago

Oh, I didn't notice it was implemented that way, thanks for the reply!

I'm curious, how would you implement it if it can accept multiple children?

pomber commented 4 years ago

It's more complex because you need to search the different dom nodes that may be at different levels on the subtrees.
See here: https://gist.github.com/pomber/64fb7e63119bef201dd8166b0fce73c4#file-didact-fiber-js-L30 (from https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec)

lxsmnsyc commented 4 years ago

I see, thanks! I had a different implementation by iterating each children and then doing the recursive call to commitDeletion: https://github.com/LXSMNSYC/luact/blob/master/luact/fiber/commit_delete/init.lua

Anyways, big thanks to this DIY React project of yours, I get to learn about React Fiber's internal workings!