创建虚拟DOM元素
- 什么是虚拟DOM
用js对象的形式，来表示DOM和DOM之间的嵌套关系。
const mydiv = React. createElement( 'div', { id: 'mydiv', title: 'div aaa' }, '这是一 个div元素' )
React. createElement
- 参数1
创建的元素的类型， 字符串，表示元素的名称 - 参数2
一个对象或 null,表示当前这个DOM元素的属性 - 参数3
子节点(包括其它虚拟DOM获取文本子节点) - 参数
其它子节点
// 导包 import React from 'react' import ReactDOM from 'react-dom' // 创建虚拟 DOM 元素 const mydiv = React.createElement('div',{id:'mydiv', title: 'div aaa'}, '这是一个 div') // 调用 render 函数渲染 ReactDOM.render(mydiv, document.getElementById('app'))
但如果元素很多，这样写就很不好呢，每次都要创建元素的 API。
毕竟页面上本质都是各种 html 标签，还是直接手写各种标签最简单暴力。
babel
但是HTML是标记语言。JS文件默认不能写这种HTML标记，打包会失败，使用 babel 来转换这些JS中的标签即可！
这种在JS中，混合写入类似于HTML的语法，叫做JSX。
符合 XML规范的JS。JSX 语法的本质，还是在运行的时候，被转换成了React. createElement形式执行。
引入JSX
- 添加支持
- 插件支持
- 引入依赖
React提供的环境搭建工具演示
配置文件可读性差，因此不考虑使用这种现成方式写项目，跳过。
观察一下声明的这个变量：
const element = <h1>Hello, world!</h1>;
这种看起来可能有些奇怪的标签语法既不是js 语法也不是 HTML语法，而是能在 js 中使用 html 标签，这被称为 JSX， 一种 JavaScript 的语法扩展。
推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。
JSX 用来声明 React 当中的元素。
JSX 的基本使用方法
在 JSX 中使用表达式
可任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里
例如 2 + 2， user.firstName， 以及 formatName(user) 都是可以使用的
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> ); ReactDOM.render( element, document.getElementById('root') );
书写 JSX 的时候一般都会带上换行和缩进，这样可以增强代码的可读性
同样推荐在 JSX 代码的外面扩上一个小括号，这样可以防止 分号自动插入 的 bug
JSX 本身其实也是一种表达式
在编译后，JSX 其实会被转化为普通的 JavaScript 对象
这意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以
function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>; }
