3.JSX的使用

jsx：JavaScript xml

说明：render方法根据jsx模板生成虚拟DOM,新旧虚拟DOM通过diff算法更新虚拟DOM，然后渲染成真实DOM。

jsx细节：

• 文件名改为jsx,webpack会当成js打包
• 使用{}插入js表达式（有执行结果）
• 不要使用html或body作为根容器
• render只能接收一个根节点，可以使用Fragement<></>包裹,空文档标记标签，渲染时不会占用文档流层级。

 jsx具体使用

• {}内容：

1.   number/string正常渲染，
2. boolean/null/undefined/symbol/bigint渲染内容为空，
3. 不支持渲染普通对象，
4. 数组时将数组的每一项拿出来渲染，数组中有对象会报错，
5. 函数对象不支持，应该使用<Fn/>。

• 添加样式

1. style={{}}
2. style={{display:flag?'block':'none'}}
3. className=''classname''
4. 多个class：className={[''classname1 '',''classname2 '',item.class].join()}

• 遍历渲染

1. 数组的map方法
2. filter方法
3. some方法
4. find方法

jsx底层处理机制

第一步：把编写的jsx语法，编译为虚拟DOM对象virtualDOM

第二步：把构建的虚拟DOM渲染为真实DOM

             root.render()接收jsx生成的虚拟DOM,然后渲染。

           （vue中是render生成虚拟DOM）