🚗个人主页：最好的人啊
🚌系列专栏：HTML/CSS
🚐推荐一款模拟面试、刷题神奇、从基础到大厂的面试题库，要想走上人生巅峰迎娶白富美赶快点击这个网站⚡不要犹豫，白富美在向你招手，快来注册吧！
目录
一，首先我要知什么是React？
React 是一个用于构建用户界面的 JavaScript 库。（只关注视图），起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。
二，体验React
体验 React React 从诞生之初就是可被逐步采用的，因而你可以按需引入或多或少的 React 特性。不管你是想体验下 React，用它给简单的 HTML 页面增加一点交互，还是要开始一个完全由 React 驱动的复杂应用，该章节内容里的链接都能帮你快速开始。
经典代码演示：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
三 ，认识React
1，概念：
React 是一个用于构建用户界面的 JavaScript 库
2，特点：
声明式编程：React 使创建交互式 UI ，当数据变动时 React 能高效更新并渲染合适的组件。
组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
Css html js 封装一个组件
高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活：无论你现在使用什么技术栈，都可通过引入 React 来开发新功能。
3，高效的原因：
- 使用虚拟(virtual)DOM,不总是直接操作页面真实DOM。
- DOM Diffing算法,最小化页面重绘
说明：React并不会提高渲染速度,反而可能会增加渲染时间,真正高效的原因是它能有效`减少渲染次数`。
四，虚拟DOM
1， 概念
- 本质时Object类型的对象(一般对象)
- 虚拟DOM比较'轻',真实DOM比较'重',因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性(只有React需要的属性)
- 虚拟DOM最终会被React转化为真实DOM,呈现在页面上
2，创建虚拟DOM ---步骤
第一步 引入React文件
<!-- 引入react核心库 -->
<script src="js/react.development.js"></script>
<!-- 扩展库 操作DOM -->
<script src="js/react-dom.development.js"></script>
<!-- 把jsx语法转js -->
<script src="js/babel.min.js"></script>第二步 准备一个容器
<div id=”hello”></div>第三步创建虚拟DOM
第一种 JS创建拟DOM
const V_DOM=React.createElement('h1',{id:'title'},'hello react!');
ReactDOM.render(V_DOM,document.getElementById("hello"));//渲染到页面第二种 JSX创建虚拟DOM
let V_DOM = <h1>hello,react!</h1>
ReactDOM.render(V_DOM,document.getElementById("hello"));说明：
You are using the in-browser Babel transformer. Be sure to precompile..... babel的一个警告：你正在使用浏览器翻译babel，请确定不在生产环境中。
jsx 就是让创建虚拟DOM变得更有层次，更简洁。
五，JSX语法
1，概念：
JSX是一种JavaScript的语法扩展、是一种嵌入式的类似XML的语法,常应用于React架构中,但也不仅限于此.应该说JSX因React框架而流行,但也存在其他的实现.只要你够厉害,甚至能在单片机上实现(当然你要自己写出它的实现方式)。
2， 定义虚拟DOM时不要用引号。
错误形式：let V_DOM = ‘<h1>hello,react</h1>’;
3，标签混入JS表达式需要用{}
举例：
let str = "hello,react!";
let V_DOM = (
<h1><span>{str}</span></h1>
)4， className样式的类名
样式的类名指定不要用class,要用className
let V_DOM = (
<h1 className='demo'><span>我是文本内容</span></h1>
)5， 内联样式
要用style={{key:value}}的形式(`双{}代表对象,单{}代表表达式`)去写。
let V_DOM = (
<h1 className='demo'>
<span style={{color:'blue',fontSize:'30px'}}>我是文本内容</span>
</h1>
)
ReactDOM.render(V_DOM,document.getElementById("hello"));6， 只有一个根标签
错误形式：
let V_DOM = (
<h1 className='demo'>
<span style={{color:'blue',fontSize:'30px'}}>我是文本内容</span>
</h1>
<p>我是段落</p>
)7，标签必须闭合
举例：
<input type='text' name='myname' value=""></input>8， 标签首字母
若 `小写字母开头` ,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则`报错`。
若`大写字母开头`,react就去渲染对应组件,若组件没有定义,则`报错`。
9， js表达式
一个表达式会产生一个值,可以放在任何一个需要值的地方
a
a+b
demo(1)
arr.map()
function test(){}
语句:不能放在创建虚拟dom语句中
if(){}
for(){}
switch(){}
六，JSX小案例
遍历数组并输出到页面上
const persons = [
{ realname: "张三", age: 19 },
{ realname: "李四", age: 20 },
]
const V_DOM = (
<div>
<ul>
{
persons.map((item,index)=>{
return <li key='index'>姓名：{item.realanme},年龄：{item.age}</li>
})
}
</ul>
</div>
)
ReactDOM.render(V_DOM,document.querySelector('#app'))