创建元素(原生 与 react)

原生

image.png

react 17 & react 18

两个版本有些许不同 （上17 下18）

image.png
image.png

优化

jsx & babel

这种对象写法太复杂，希望以更加符合HTML的方式编写

image.png

<script>标签中默认type="text/javescript" ,不能识别该脚本, 需要使用jsx并使用bable将jsx内容转义为react能够识别的代码进行渲染

使用方法

1.引入babel 2.将script改为对应的type

image.png

转换效果

babel转换后插入到head标签中 供react进行识别渲染

image.png

使用变量动态换入属性&节点

将id & class & 子节点数据 作为子节点、属性插入 react把DOM中的子节点使用chidren传入

image.png

react允许将children也放到标签中

image.png

将id & class & 子节点作为一个对象传入 如果要覆盖id 则需要想element5一样写到后边 4不会覆盖

image.png

组件的方式传入到标签中

使用函数的形式传参

image.png

不人性化 希望使用HTML标签一样的方式传入 使用开头大写，React默认为组件，想div一样传入数据 有prors接收

image.png