React

概述

React是什么
将数据渲染为HTML视图的开源JavaScript库。

原生JavaScript不足
1.原生JavaScript操作DOM繁琐、效率低，采用DOM-API操作UI
2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
3.原生JavaScript没有组件化编码方式，代码复用率低

React的特点
1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
2.在React Native中可以使用React语法进行移动端开发
3.使用虚拟DOM和Diffing算法，尽量较少与真实DOM的交互

声明式编程与命令式编程
声明式编程：重点描述做什么，而不管怎么做，以结果导向的编程
命令式编程：关注如何使用代码一步一步得到结果

React的三个API -案例入门

React是代我们更新浏览器DOM的一个库，不需要直接与DOM API交互，而是指明想让React构建什么，React帮我们渲染和协调元素。

React元素和DOM元素的区别
浏览器DOM由DOM元素组成，React DOM由react元素组成。react元素是对真实DOM元素的描述。渲染时，React将react元素转换成真正的DOM元素

使用原生JS创建div标签,加入root容器中

<body>
//准备好容器
<div id="root"></div>
<script>
//创建一个dom元素
const div = document.createElement('div')
div.innerText = "我是一个div"
//渲染到页面上
const root = document.getElementById('root');
root.appendChild(div)
</script>
</body>

使用React创建div标签加入root容器

React.createElement(type, [props], [...children])：创建React元素
- React.createElement(元素名(组件名),元素中的属性,元素的子元素(内容))
  - html标签是小写,组件大写开头
  - 元素中属性{key:value}，key采用驼峰命名，className表示class，事件的value为函数形式
createRoot(container[, options])用来创建React根容器，容器用来防止React元素
- ReactDom.createRoot(DOM元素)
root.render(element) 用于将React元素渲染(替换)到根元素中，
- 当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM diff算法进行高效的更新。
- 不会修改容器节点，只会修改容器的子节点。

//引入react核心库之后，有React对象;引入react-dom库后，有ReactDom对象
<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>

<body>
<script>
//创建一个React元素 
React.createElement('div',{},'我是React创建的div')
//获取根元素对应的React元素
const root = ReactDOM.createRoot(document.getElementById('root'))
//将div渲染到根元素中
root.render(div)
</script>

react.development.js react核心库，只要使用react就必须引用
下载地址:https://unpkg.com/react@18.0.0/umd/react.development.js
react-dom.development.js 是react的dom包，提供在浏览器中渲染React元素的所需工具，使用react开发web应用时必须使用
下载地址:https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js

说明

React元素一旦创建就无法修改，只能通过新创建的元素进行替换
修改React元素后，必须重新对根元素进行渲染

JSX(JavaScript XML)

react定义的类似于XML的JS扩展语法:JS+XML
JSX本质: React.createElement()的语法糖，可以利用JSX创建React元素(JSX是一种创建React元素的方式)。JSX是React中声明式编程的体现方式。
说明
JSX 是 JavaScript 的语法扩展，JSX 使得我们可以以类似于 HTML 的形式去使用 JS。使用JSX将我们所期望的网页结构编写出来，然后React根据JSX自动生成JS代码。所以我们所编写的JSX代码，最终都会转换为调用React.createElement()创建元素的代码。

在这里插入图片描述

babel帮助我们将JSX翻译成JS

<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="babel.min.js"></script>

<body>
<div id="root"></div>
<script type="text/babel">
//利用JSX创建一个React元素 
const div = <div>我是div</div>
//获取根元素对应的react元素
const root = ReactDOM.createRoot(document.getElementById('root'))
//将div渲染到根元素中
root.render(div)
</script>
</body>

babel下载地址：https://unpkg.com/babel-standalone@6/babel.min.js

JSX规则

JSX不是字符串，不需要加引号
标签中混入JS表达式时要用{}，如果表达式的值为空值、布尔值、undefined，则不会显示
标签的属性可以直接设置，类名用className=“类名”，内联样式style={{key:value,key:value }},外面的{}表示里面的内容是JS表达式，里面的{}表示是对象。key采用驼峰写法
根标签只能有一个，且所有标签都需要闭合
标签首字母，开头小写，则将标签转化为html中的同名元素，无则标错。开头大写，react取渲染对应的组件，若组件没有定义，则报错。