React 初识三个 API 及 JSX

React 不用直接去操作DOM，React 通过虚拟 DOM 对操作 DOM 进行简化，在兼容性问题和性能上的优化。

通过React这个类去操作 DOM ，通过虚拟 DOM 再转换为真实 DOM 元素

• React.createElement()
• ReactDOM.createRoot()
• render()

React.createElement()

用于创建一个 React 元素

• 第一参数为元素、组件名称(html 标签小写，组件大写)
• 第二参数为元素中的属性(驼峰命名、class 使用 className)
• 第三参数为元素内容

const div = React.createElement('div', {
      id:'btn', 
      className: 'aaa',
      onClick: () => {
        console.log('点了一下')
      }
    }, '我是React元素');

ReactDOM.createRoot()

用于创建 React 根元素，需要一个DOM元素作为参数，作为根容器

const root = ReactDOM.createRoot(document.getElementById('root'));

React.createElement()

将创建的根元素渲染到页面

修改 React 元素后，必须重新对根元素进行渲染

当调用 render 渲染页面时， React 会自动比较两次渲染的元素，只在真实 DOM 中更新变化的部分

root.render(div)

用将React元素渲染到根元素中 根元素中所有的内容都会被删除，被React元素所替换 当重复调用render（）时，React会将两次的渲染结果进行比较 会确保只修改那些变化的元素，对dom作出最小的修改

以上是命令式编程

React 使用的是声明式编程，结果导向的编程（只管告诉程序想要什么，不去管是如何得出，用什么方法完成）

在React中通过JSX（JS扩展）来创建

JSX是JavaScript 的语法扩展，jsx可以使类似html的形式去使用js，jsx是react中声明式编程的体现

如果要使用jsx，需使用babel来完成翻译工作

引用完babel文件去设置scrip标签的type属性

jsx相当于React.createElement()的语法糖 jsx在执行之前会进行js转换

let aaa = 122
const btn = <div id="box" className="box1" onClick={()=>{alert('哈哈')}}>
    我是一个div
    {aaa}
    <button style="{{fontSize: '18px'}}">我是按钮</button>
  </div>

root.render(btn)

// 列表展示
const lists = <div>
        {data.map(item=> <li key={item}>{item}</li>)}
      </div>

JSX注意事项

• JSX不是字符串，不用加引号
• JSX中html标签应该小写，React组件大写开头，其中标签必须有结束标签
• 可以使用{}嵌入表达式,只可以写入有值语句