【01】基础知识：React简介与案例
一、React 简介
React 概述
React 是一个将数据渲染为 HTML 视图 的开源 JavaScript 库
React 由 FaceBook 开发，且开源
为什么要学习 React
1、原生 JavaScript 操作 DOM 繁琐、效率低（使用 DOM-API 操作 UI）
2、使用 JavaScript 直接操作 DOM，浏览器会进行大量的重绘重排
3、原生 JavaScript 没有组件化编码方案，代码复用率低
React 的特点
1、采用组件化模式、声明式编码，提高开发效率及组件复用率
2、在React Native 中可以使用 React 语法进行移动端开发
3、使用虚拟 DOM + 优秀的 Diffing 算法，尽量减少与真实 DOM 的交互
学习 React 需要掌握的 JavaScript 基础知识
1、判断 this 指向
2、 class（类）
3、ES6语法规范
4、 npm包管理器
5、原型、原型链
6、数组常用方法
7、模块化
React 官网
1、英文官网：https://reactjs.org/
2、中文官网:：https://react.docschina.org/
二、React 案例
Hello React 案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello_reacttitle>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>
<script type="text/babel"> /* 此处一定要写babel */
// 1、创建虚拟dom
const VDOM = <h1>Hello React</h1> /* 此处一定不要写引号，因为不是字符串 */
// 2、渲染虚拟dom到页面（render不是追加，是替换）
ReactDOM.render(VDOM, document.getElementById('test'))
script>
body>
html>
使用 js 创建虚拟 DOM
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2_使用js创建虚拟DOMtitle>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" >
// 1.创建虚拟DOM - React.createElement(标签名, 标签属性, 标签内容)
const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello,React'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById('test'))
script>
body>
html>
使用 jsx 创建虚拟 DOM
使用 js 创建虚拟 DOM 写法比较繁琐，使用 jsx 可以更加简单的创建虚拟 DOM
jsx 写法经过 babel 翻译，会转变为 js写法，jsx 实际上 是 原始 js 的一种语法糖
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_使用jsx创建虚拟DOMtitle>
head>
<body>
<div id="test">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<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'))
script>
body>
html>
虚拟DOM与真实DOM
1、虚拟 DOM 本质是 Object 类型的对象（一般对象）
2、虚拟 DOM 比较“轻”，真实 DOM 比较“重”，因为虚拟 DOM 是 Reac t内部在用，无需真实 DOM 上那么多的属性。
3、虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3_虚拟DOM与真实DOMtitle>
head>
<body>
<div id="test">div>
<div id="demo">div>
<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<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)
script>
body>
html>