save

Author: bubucuo

src/App.js

@@ -1,16 +1,18 @@
-import * as React from "react";
+// import * as React from "react";
+import {React, Component, useState} from "./CONST";
+
 // import {useState, useEffect} from "react";
-import UseMemoPage from "./pages/UseMemoPage";
+// import UseMemoPage from "./pages/UseMemoPage";
 // import CommentListPage from "./pages/CommentListPage";
 // import PureComponentPage from "./pages/PureComponentPage";
 // import ReactMemoPage from "./pages/ReactMemoPage";
-import UseCallbackPage from "./pages/UseCallbackPage";
+// import UseCallbackPage from "./pages/UseCallbackPage";
 // import ExamplePage from "./pages/ExamplePage";
 // import ContextPage from "./pages/ContextPage";
-// import SetStatePage from "./pages/SetStatePage";
+import SetStatePage from "./pages/SetStatePage";
 // import RefPage from "./pages/RefPage";
 // import SuspensePage from "./pages/SuspensePage";
-// import DiffPage from "./pages/DiffPage";
+import DiffPage from "./pages/DiffPage";
 // import ClassFunctionComponent from "./pages/ClassFunctionComponent";
 // import UseReducerPage from "./pages/UseReducerPage";
 
@@ -20,14 +22,18 @@ export default function App(props) {
       {/* <CommentListPage /> */}
       {/* <PureComponentPage /> */}
       {/* <ReactMemoPage /> */}
-      <UseCallbackPage />
+      {/* <UseCallbackPage /> */}
       {/* <UseMemoPage /> */}
       {/* <ExamplePage /> */}
       {/* <ContextPage /> */}
+
       {/* <SetStatePage /> */}
+
       {/* <RefPage /> */}
       {/* <SuspensePage /> */}
-      {/* <DiffPage /> */}
+
+      <DiffPage />
+
       {/* <ClassFunctionComponent /> */}
       {/* <UseReducerPage /> */}
     </div>

src/index.js

@@ -1,45 +1,18 @@
-import * as React from "react";
-import {Component} from "react";
-import * as ReactDOM from "react-dom";
+// import * as React from "react";
+// import {Component} from "react";
+// import * as ReactDOM from "react-dom";
+
+import {React, ReactDOM, Component, useState} from "./CONST";
 
 // import React from "./kreact/";
 // import ReactDOM, {useState} from "./kreact/react-dom";
 // import Component from "./kreact/Component";
 
 import "./index.css";
 
-class ClassCoomponent extends Component {
-  render() {
-    return (
-      <div className="border">
-        <p>{this.props.name}</p>
-      </div>
-    );
-  }
-}
-
-function FunctionComponent(props) {
-  return (
-    <div className="border">
-      <p>{props.name}</p>
-    </div>
-  );
-}
-
-const jsx = (
-  <div className="border">
-    <h1>全栈</h1>
-    <a href="https://www.kaikeba.com/">kkb</a>
-    <FunctionComponent name="函数组件" />
-    <ClassCoomponent name="类组件" />
-    <>
-      <li>omg</li>
-      <li>omg2</li>
-    </>
-  </div>
-);
+import App from "./App";
 
-ReactDOM.render(jsx, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById("root"));
 
 // console.log("React", React.version); //sy-log
 

src/kreact/index.js

@@ -1,4 +1,4 @@
-import {TEXT} from "./const";
+import {TEXT} from "./CONST";
 
 // 如果是原生标签节点, type是字符串，如div、span
 // 如果是文本节点， type就没有，这里我们为了方便简单自己定义成了TEXT，（源码中没有这么做）

src/kreact/react-dom.js

@@ -1,4 +1,4 @@
-import {TEXT, PLACEMENT, UPDATE, DELETION} from "./const";
+import {TEXT, PLACEMENT, UPDATE, DELETION} from "./CONST";
 
 // 下一个单元任务  fiber
 let nextUnitOfWork = null;
@@ -23,20 +23,14 @@ let deletions = null;
  * return： 父fiber
  * stateNode： 真实dom节点
  * props：属性值
- * base: 上次的节点 fiber
- * effectTag: 标记要执行的操作类型（删除、插入、更新）
+ * base: 上次的节点 fiber (alternate)
+ * effectTag: 标记要执行的操作类型（删除、插入、更新） (flags)
  */
 
 // ! vnode  虚拟dom对象
 // ! node  真实dom
 
 function render(vnode, container) {
-  // // vnode->node
-  // const node = createNode(vnode);
-  // // 再把node插入container
-  // container.appendChild(node);
-  // console.log("vnode", vnode, container); //sy-log
-
   // 初始值
   wipRoot = {
     stateNode: container,

src/pages/DiffPage.jsx

@@ -1,8 +1,5 @@
 import {React, ReactDOM, useState} from "../CONST";
 
-// import React from "../kreact/";
-// import {useState} from "../kreact/ReactDOM";
-
 export default function DiffPage(props) {
   const [count, setCount] = useState(0);
   return (

src/pages/SetStatePage.jsx

@@ -28,7 +28,7 @@ export default class SetStatePage extends Component {
           count: count + v
         },
         nextState => {
-          console.log("nex", this.state); //sy-log
+          console.log("SetStatePage next", this.state); //sy-log
         }
       );
     } else {