Blog 10

examples/hello-world/src/App.tsx

@@ -1,13 +1,20 @@
 import {useState} from 'react'
 
+let n = 0
+
 function App() {
-    const [name, setName] = useState(() => 'ayou')
-    setTimeout(() => {
-        setName('ayouayou')
-    }, 1000)
-    return (
-        <div><Comp>{name}</Comp></div>
-    )
+    const [name, setName] = useState(() => false)
+    const [age, setAge] = useState(() => 10)
+    if (n === 0) {
+        let tid = setTimeout(() => {
+            n++
+            setName(true)
+            setAge(11)
+            clearTimeout((tid))
+        }, 1000)
+    }
+
+    return name ? <Comp>{name + age}</Comp> : 'N/A'
 }
 
 function Comp({children}) {

examples/hello-world/src/main.tsx

@@ -2,5 +2,7 @@ import {createRoot} from 'react-dom'
 import App from './App.tsx'
 
 const root = createRoot(document.getElementById("root"))
+const a = <App/>
+console.log(a)
 root.render(<App/>)
 

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "build": "node scripts/build.js",
     "build:test": "node scripts/build.js --test",
-    "test": "jest"
+    "test": "npm run build:test && jest"
   },
   "author": "",
   "license": "ISC",

packages/react-dom/src/host_config.rs

@@ -1,7 +1,7 @@
 use std::any::Any;
 use std::rc::Rc;
 
-use web_sys::{window, Node};
+use web_sys::{Node, window};
 
 use react_reconciler::HostConfig;
 use shared::log;
@@ -38,4 +38,20 @@ impl HostConfig for ReactDomHostConfig {
     fn append_child_to_container(&self, child: Rc<dyn Any>, parent: Rc<dyn Any>) {
         self.append_initial_child(parent, child)
     }
+
+    fn remove_child(&self, child: Rc<dyn Any>, container: Rc<dyn Any>) {
+        let p = container.clone().downcast::<Node>().unwrap();
+        let c = child.clone().downcast::<Node>().unwrap();
+        match p.remove_child(&c) {
+            Ok(_) => {
+                log!("remove_child successfully {:?} {:?}", p, c);
+            }
+            Err(_) => todo!(),
+        }
+    }
+
+    fn commit_text_update(&self, text_instance: Rc<dyn Any>, content: String) {
+        let text_instance = text_instance.clone().downcast::<Node>().unwrap();
+        text_instance.set_node_value(Some(content.as_str()));
+    }
 }

packages/react-dom/src/renderer.rs

@@ -23,6 +23,6 @@ impl Renderer {
 impl Renderer {
     pub fn render(&self, element: &JsValue) -> JsValue {
         self.reconciler
-            .update_container(Rc::new(element.clone()), self.root.clone())
+            .update_container(element.clone(), self.root.clone())
     }
 }

packages/react-reconciler/src/begin_work.rs

@@ -26,17 +26,32 @@ pub fn begin_work(
 fn update_function_component(
     work_in_progress: Rc<RefCell<FiberNode>>,
 ) -> Result<Option<Rc<RefCell<FiberNode>>>, JsValue> {
-    let next_children = Rc::new(render_with_hooks(work_in_progress.clone())?);
+    let next_children = render_with_hooks(work_in_progress.clone())?;
     reconcile_children(work_in_progress.clone(), Some(next_children));
     Ok(work_in_progress.clone().borrow().child.clone())
 }
 
 fn update_host_root(work_in_progress: Rc<RefCell<FiberNode>>) -> Option<Rc<RefCell<FiberNode>>> {
-    process_update_queue(work_in_progress.clone());
-    let next_children = work_in_progress.clone().borrow().memoized_state.clone();
+    let work_in_progress_cloned = work_in_progress.clone();
+
+    let base_state;
+    let update_queue;
+    {
+        let work_in_progress_borrowed = work_in_progress_cloned.borrow();
+        base_state = work_in_progress_borrowed.memoized_state.clone();
+        update_queue = work_in_progress_borrowed.update_queue.clone();
+    }
+
+    {
+        work_in_progress.clone().borrow_mut().memoized_state =
+            process_update_queue(base_state, update_queue, work_in_progress.clone());
+    }
+
+    let next_children = work_in_progress_cloned.borrow().memoized_state.clone();
     if next_children.is_none() {
         panic!("update_host_root next_children is none")
     }
+
     if let MemoizedState::JsValue(next_children) = next_children.unwrap() {
         reconcile_children(work_in_progress.clone(), Some(next_children));
     }
@@ -50,22 +65,25 @@ fn update_host_component(
 
     let next_children = {
         let ref_fiber_node = work_in_progress.borrow();
-        derive_from_js_value(ref_fiber_node.pending_props.clone().unwrap(), "children")
+        derive_from_js_value(&ref_fiber_node.pending_props, "children")
     };
 
     {
-        reconcile_children(work_in_progress.clone(), next_children);
+        reconcile_children(work_in_progress.clone(), Some(next_children));
     }
     work_in_progress.clone().borrow().child.clone()
 }
 
-fn reconcile_children(work_in_progress: Rc<RefCell<FiberNode>>, children: Option<Rc<JsValue>>) {
+fn reconcile_children(work_in_progress: Rc<RefCell<FiberNode>>, children: Option<JsValue>) {
     let work_in_progress = Rc::clone(&work_in_progress);
     let current = { work_in_progress.borrow().alternate.clone() };
     if current.is_some() {
         // update
-        work_in_progress.borrow_mut().child =
-            reconcile_child_fibers(work_in_progress.clone(), current.clone(), children)
+        work_in_progress.borrow_mut().child = reconcile_child_fibers(
+            work_in_progress.clone(),
+            current.clone().unwrap().clone().borrow().child.clone(),
+            children,
+        )
     } else {
         // mount
         work_in_progress.borrow_mut().child =

packages/react-reconciler/src/child_fiber.rs

@@ -9,70 +9,156 @@ use shared::{derive_from_js_value, log, REACT_ELEMENT_TYPE};
 use crate::fiber::FiberNode;
 use crate::fiber_flags::Flags;
 use crate::work_tags::WorkTag;
+use crate::work_tags::WorkTag::HostText;
+
+fn use_fiber(fiber: Rc<RefCell<FiberNode>>, pending_props: JsValue) -> Rc<RefCell<FiberNode>> {
+    let clone = FiberNode::create_work_in_progress(fiber, pending_props);
+    clone.borrow_mut().index = 0;
+    clone.borrow_mut().sibling = None;
+    clone
+}
 
 fn place_single_child(
     fiber: Rc<RefCell<FiberNode>>,
     should_track_effect: bool,
 ) -> Rc<RefCell<FiberNode>> {
-    if should_track_effect {
+    if should_track_effect && fiber.clone().borrow().alternate.is_none() {
         let fiber = fiber.clone();
         let mut fiber = fiber.borrow_mut();
         fiber.flags |= Flags::Placement;
     }
     return fiber;
 }
 
+fn delete_child(
+    return_fiber: Rc<RefCell<FiberNode>>,
+    child_to_delete: Rc<RefCell<FiberNode>>,
+    should_track_effect: bool,
+) {
+    if !should_track_effect {
+        return;
+    }
+
+
+    let deletions = {
+        let return_fiber_borrowed = return_fiber.borrow();
+        return_fiber_borrowed.deletions.clone()
+    };
+    if deletions.is_none() {
+        return_fiber.borrow_mut().deletions = Some(vec![child_to_delete.clone()]);
+        return_fiber.borrow_mut().flags |= Flags::ChildDeletion;
+    } else {
+        let mut del = return_fiber.borrow_mut().deletions.clone().unwrap();
+        del.push(child_to_delete.clone());
+    }
+}
+
 fn reconcile_single_element(
     return_fiber: Rc<RefCell<FiberNode>>,
     current_first_child: Option<Rc<RefCell<FiberNode>>>,
-    element: Option<Rc<JsValue>>,
+    element: Option<JsValue>,
+    should_track_effect: bool,
 ) -> Rc<RefCell<FiberNode>> {
-    let mut fiber = FiberNode::create_fiber_from_element(element.unwrap());
+    if element.is_none() {
+        panic!("reconcile_single_element, element is none")
+    }
+
+    let element = element.as_ref().unwrap();
+    let key = derive_from_js_value(&(*element).clone(), "key");
+    if current_first_child.is_some() {
+        let current_first_child_cloned = current_first_child.clone().unwrap().clone();
+        // Be careful, it is different with ===
+        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness#same-value_equality_using_object.is
+        if Object::is(&current_first_child_cloned.borrow().key, &key) {
+            if derive_from_js_value(&(*element).clone(), "$$typeof") != REACT_ELEMENT_TYPE {
+                panic!("Undefined $$typeof");
+            }
+
+            if Object::is(
+                &current_first_child_cloned.borrow()._type,
+                &derive_from_js_value(&(*element).clone(), "type"),
+            ) {
+                // type is the same, update props
+                let existing = use_fiber(
+                    current_first_child.clone().unwrap().clone(),
+                    derive_from_js_value(&(*element).clone(), "props"),
+                );
+                existing.clone().borrow_mut()._return = Some(return_fiber);
+                return existing;
+            }
+            delete_child(
+                return_fiber.clone(),
+                current_first_child.clone().unwrap().clone(),
+                should_track_effect,
+            );
+        } else {
+            delete_child(
+                return_fiber.clone(),
+                current_first_child.clone().unwrap().clone(),
+                should_track_effect,
+            );
+        }
+    }
+
+    let mut fiber = FiberNode::create_fiber_from_element(element);
     fiber._return = Some(return_fiber.clone());
     Rc::new(RefCell::new(fiber))
 }
 
 fn reconcile_single_text_node(
     return_fiber: Rc<RefCell<FiberNode>>,
     current_first_child: Option<Rc<RefCell<FiberNode>>>,
-    content: Option<Rc<JsValue>>,
+    content: Option<JsValue>,
+    should_track_effect: bool,
 ) -> Rc<RefCell<FiberNode>> {
     let props = Object::new();
     Reflect::set(&props, &JsValue::from("content"), &content.unwrap().clone())
         .expect("props panic");
-    let mut created = FiberNode::new(WorkTag::HostText, Some(Rc::new(Object::into(props))), None);
+
+    if current_first_child.is_some() && current_first_child.as_ref().unwrap().borrow().tag == HostText {
+        let existing = use_fiber(current_first_child.as_ref().unwrap().clone(), (*props).clone());
+        existing.borrow_mut()._return = Some(return_fiber.clone());
+        return existing;
+    }
+
+    if current_first_child.is_some() {
+        delete_child(return_fiber.clone(), current_first_child.clone().unwrap(), should_track_effect);
+    }
+
+
+    let mut created = FiberNode::new(WorkTag::HostText, (*props).clone(), JsValue::null());
     created._return = Some(return_fiber.clone());
     Rc::new(RefCell::new(created))
 }
 
 fn _reconcile_child_fibers(
     return_fiber: Rc<RefCell<FiberNode>>,
     current_first_child: Option<Rc<RefCell<FiberNode>>>,
-    new_child: Option<Rc<JsValue>>,
+    new_child: Option<JsValue>,
     should_track_effect: bool,
 ) -> Option<Rc<RefCell<FiberNode>>> {
     if new_child.is_some() {
-        let new_child = Rc::clone(&new_child.unwrap());
+        let new_child = &new_child.unwrap();
 
         if new_child.is_string() {
             return Some(place_single_child(
                 reconcile_single_text_node(
                     return_fiber,
                     current_first_child,
                     Some(new_child.clone()),
+                    should_track_effect,
                 ),
                 should_track_effect,
             ));
         } else if new_child.is_object() {
-            if let Some(_typeof) =
-                Rc::clone(&derive_from_js_value(new_child.clone(), "$$typeof").unwrap()).as_string()
-            {
+            if let Some(_typeof) = derive_from_js_value(&new_child, "$$typeof").as_string() {
                 if _typeof == REACT_ELEMENT_TYPE {
                     return Some(place_single_child(
                         reconcile_single_element(
                             return_fiber,
                             current_first_child,
                             Some(new_child.clone()),
+                            should_track_effect,
                         ),
                         should_track_effect,
                     ));
@@ -87,15 +173,15 @@ fn _reconcile_child_fibers(
 pub fn reconcile_child_fibers(
     return_fiber: Rc<RefCell<FiberNode>>,
     current_first_child: Option<Rc<RefCell<FiberNode>>>,
-    new_child: Option<Rc<JsValue>>,
+    new_child: Option<JsValue>,
 ) -> Option<Rc<RefCell<FiberNode>>> {
     _reconcile_child_fibers(return_fiber, current_first_child, new_child, true)
 }
 
 pub fn mount_child_fibers(
     return_fiber: Rc<RefCell<FiberNode>>,
     current_first_child: Option<Rc<RefCell<FiberNode>>>,
-    new_child: Option<Rc<JsValue>>,
+    new_child: Option<JsValue>,
 ) -> Option<Rc<RefCell<FiberNode>>> {
     _reconcile_child_fibers(return_fiber, current_first_child, new_child, false)
 }