初始React

一.React的诞生

1.什么是React?

React是一个讲数据渲染为HTML视图的来源Js库，用于构建用户界面的JS库。

在以前的学习中构建用户界面的常用操作步骤：

发送请求获取数据

处理数据（过滤，整理格式等）

操作DOM呈现页面

2.React诞生的原因？

使用原生的JS操作Dom繁琐，效率低（DOM-API操作UI）

使用js直接操做DOM，浏览器会进行大量的重绘重排

原生JS没有组件化编码方案，代码复用率太低

3.react的特点

采用组件化模式，声明式编码，提高开发效率及组件复用率

在React Native中可以使用React语法进行移动端开发

使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

4.虚拟dom的特点

关于虚拟dom:

本质是Object类型的对象（一般对象）

虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。

虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_虚拟DOM与真实DOM</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<div id="demo"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">/* 此处一定要写babel */
//1.创建虚拟DOM
const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
<span>Hello,React</span>
</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))

const TDOM = document.getElementById('demo')
console.log('虚拟DOM', VDOM);
console.log('真实DOM', TDOM);
debugger;
// console.log(typeof VDOM);
// console.log(VDOM instanceof Object);
/*
        关于虚拟DOM：
            1.本质是Object类型的对象（一般对象）
            2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
            3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
 */
</script>
</body>
</html>

jsx语法规则

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsx语法规则</title>
<style>
        .title {
background-color: orange;
width: 200px;
        }
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>

<!-- 引入react核心库 -->
<script type="text/javascript" src="../../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../../js/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../../js/babel.min.js"></script>

<script type="text/babel">
const myId = 'aTgUiGu'
    const myData = 'HeLlo,rEaCt'

    //1.创建虚拟DOM
    const VDOM = (
<div>
<h2 className="title" id={myId.toLowerCase()}>
<span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
</h2>
<h2 className="title" id={myId.toUpperCase()}>
<span style={{color: 'white', fontSize: '29px'}}>{myData.toLowerCase()}</span>
</h2>
<input type="text"/>
</div>
    )
//2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))

/* 
            jsx语法规则：
                    1.定义虚拟DOM时，不要写引号。
                    2.标签中混入JS表达式时要用{}。
                    3.样式的类名指定不要用class，要用className。
                    4.内联样式，要用style={{key:value}}的形式去写。
                    5.只有一个根标签
                    6.标签必须闭合
                    7.标签首字母
                            (1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
                            (2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

     */
</script>
</body>
</html>

==注意：==

$\textcolor{red}{一定要区分【js语句（代码）】与【js表达式】}$