饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

--- 手写简易react_手写系列六 [2023/02/09 10:39]
若愚
+++ 手写简易react_手写系列六 [2023/02/09 10:46] (当前版本)
若愚
@@ 行 1: / 行 1: @@
-# 手写简易React
+# 手写简易React(JSX与虚拟DOM)
@@ 行 18: / 行 18: @@
 ```
-[动手试试看！](https://link.zhihu.com/?target=https%3A//babeljs.io/repl%23%3Fbrowsers%3D%26build%3D%26builtIns%3Dfalse%26spec%3Dfalse%26loose%3Dfalse%26code_lz%3DDYUwLgBAJglgbhAvBAPLBBjYBDAzrgOWwFsREAiACxGyhACdyA-a4YAexQHp0mBuIA%26debug%3Dfalse%26forceAllTransforms%3Dfalse%26shippedProposals%3Dfalse%26circleciRepo%3D%26evaluate%3Dfalse%26fileSize%3Dfalse%26timeTravel%3Dfalse%26sourceType%3Dmodule%26lineWrap%3Dtrue%26presets%3Dreact%26prettier%3Dfalse%26targets%3D%26version%3D7.9.0%26externalPlugins%3D)
+[动手试试看！](https://babeljs.io/repl#?browsers=&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=DYUwLgBAJglgbhAvBAPLBBjYBDAzrgOWwFsREAiACxGyhACdyA-a4YAexQHp0mg&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=false&targets=&version=7.20.15&externalPlugins=&assumptions=%7B%7D)
 上面的代码没法运行，因为目前还不存在React.createElement这个东西。我们补充代码，提前增加一个React对象，里面包含createElement方法。这个方法接收输入参数，返回一个对象。
@@ 行 45: / 行 45: @@
 ```
-在【[这里](https://link.zhihu.com/?target=http%3A//js.jirengu.com/zesuk/1/edit%3Fjs%2Cconsole%2Coutput)】看看控制台的输出。输出的这个div已经变成一个对象，包含原始JSX的全部信息。这个对象就叫做**虚拟DOM**（即：假的，目前还不存在的，但后面要被渲染放到页面变成真实DOM的对象）。
+在【[这里](https://jsbin.com/lezokobamo/edit?js,output)】看看控制台的输出。输出的这个div已经变成一个对象，包含原始JSX的全部信息。这个对象就叫做**虚拟DOM**（即：假的，目前还不存在的，但后面要被渲染放到页面变成真实DOM的对象）。
 ## 虚拟DOM的渲染

饥人谷Wiki

站点工具

用户工具

页面工具