02-使用 jsx

snakeshe1010
84 阅读1分钟

目标:让之前的mini-react使用jsx

  • 安装vite
pnpm create vite
命名vite-runner
选择vanilla,javascript
  • 将之前的App.js，core文件夹，main.js拷贝进去，并将App.js修改成App.jsx
  • 修改index.html中的路径和id
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
  • 运行pnpm install，然后启动，pnpm dev
  • 可以发现已经可以将jsx转成js

修改app.jsx写法,可以正常运行，也可以通过打印看到React.createElement

  • 我们也可以在/core/React.js中的进行打印发现确实调用了
// App.jsx
import React from './core/React.js';
​
// const App = React.createElement("div", { id: "app" }, 'aaa->', 'bbbb');
function AppOne() {
  return <div id="xxx">aaa-bbbb</div>
}
const App = <div>aaa-bbbb</div>
​
console.log(AppOne); 
​
export default App;
​
// /core/React.js
function createTextNode(text) {
    console.log("createTextNode", text);
    return {
        type: "TEXT_ELEMENT",
        props: {
            nodeValue: text,
            children: []
        }
    }
}
​

遗留问题1: main.js期望App写成<App/>

// 目前无法实现我们目前代码不支持function Component
ReactDOM.createRoot(document.querySelector("#root")).render(App)  

遗留问题2: 目前render函数用递归实现

  • 假设dom树非常庞大浏览器会有卡顿，原因是什么，如何解决
avatar
文章
阅读
粉丝