01-React入门
1.React的简介
1).介绍描述
- 用于动态构建用户界面的 JavaScript 库(只关注于视图)
- 由Facebook开源
2).React的特点
- 声明式编码
- 组件化编码
- React Native 编写原生应用
- 高效（优秀的Diffing算法）
3).React高效的原因
- 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- DOM Diffing算法, 最小化页面重绘。
4).React相关js库
-
react.js：React核心库。
-
react-dom.js：提供操作DOM的react扩展库。
-
babel.min.js：解析JSX语法代码转为JS代码的库。
<!-- 引入react核心库 --> <script src="../js/react.development.js"></script> <!-- 引入react-dom,用于支持react操作DoM --> <script src="../js/react-dom.development.js"></script> <!-- 引入babe1,用于将jsx转为js --> <script src="../js/babel.min.js"></script>
2.React的基础
1).实现Hello
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DoM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babe1,用于将jsx转为js -->
<script src="../js/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
// 1.创建虚拟DOM
const VDOM=<h1>HELLO,React</h1>; /* 此处一定不要写引号，因为不是字符串 */
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
</script>
2).创建虚拟DOM的两种方式
a.纯JS方式(一般不用)
// 1.创建虚拟DOM
// React.createElement(标签名,标签属性,标签内容)
const VDOM=React.createElement('h1',{id:'title'},'HELLO,React');
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
b.JSX方式
// 1.创建虚拟DOM
const VDOM=<h1 id="title">HELLO,React</h1>; /* 此处一定不要写引号，因为不是字符串 */
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
c.纯JS与JSX写法的区别
当需要编写深度较深的HTML结构时，JSX的写法就更为清晰简便
//纯js
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'HELLO,React'));
//JSX
const VDOM=(
<h1 id="title">
<span>HELLO,React</span>
</h1>
);
3).虚拟DOM与真实DOM
React提供了一些API来创建一种 “特别” 的一般js对象，下面创建的就是一个简单的虚拟DOM对象：
const VDOM = React.createElement('xx',{id:'xx'},'xx')- 虚拟
DOM对象最终都会被React转换为真实的DOM - 我们编码时基本只需要操作
React的虚拟DOM相关数据,React会转换为真实DOM变化而更新界。
<!-- 准备好一个“容器” -->
<div id="test"></div>
<div id="demo"></div>
// 1.创建虚拟DOM
const VDOM=(
<h1 id="title">
<span>HELLO,React</span>
</h1>
);
const TDOM=document.getElementById('demo');
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM);
可以看出虚拟DOM与真实DOM相比较，虚拟DOM少了很多的属性
a.关于虚拟DOM:
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
b.渲染虚拟DOM(元素)
-
语法:
ReactDOM.render(virtualDOM, containerDOM) -
作用:
将虚拟DOM元素渲染到页面中的真实容器DOM中显示
-
参数说明:
- 参数一: 纯js或jsx创建的虚拟dom对象
- 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
3.React中的JSX
1).JSX的简介
- 全称: JavaScript XML
- react定义的一种类似于
XML的JS扩展语法:JS + XML本质是React.createElement(component, props, ...children)方法的语法糖 - 作用: 用来简化创建虚拟
DOM:
- 写法：
var ele = <h1>Hello JSX!</h1> - 注意1：它不是字符串, 也不是
HTML/XML标签 - 注意2：它最终产生的就是一个
JS对象
- 标签名任意:
HTML标签或其它标签 - 标签属性任意:
HTML标签属性或其它 - babel.js的作用:
- 浏览器不能直接解析
JSX代码, 需要babel转译为纯JS的代码才能运行 - 只要用了
JSX，都要加上type="text/babel", 声明需要babel来处理
2).JSX的写法
-
定义虚拟
DOM时，不要写引号，因为不是字符串 -
标签中混入
JS表达式时要用{}。const myId = 'aTGuiGu'; const myData = 'HeLlO,rEaCt'; // 1.创建虚拟DOM const VDOM = ( <h1 id='myId'> <span>myData</span> </h1> ); // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, document.getElementById('test'));在JSX中直接编写JS表达式，程序不能读取的JS变量的值，需要在JS表达式外添加
{}
const myId = 'aTGuiGu'; const myData = 'HeLlO,rEaCt'; // 1.创建虚拟DOM const VDOM = ( <h1 id={myId.toLocaleLowerCase()}> <span >{myData.toLocaleLowerCase()}</span> </h1> ); // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM, document.getElementById('test'));
-
样式的类名指定不要用
class,要用className。<style> .title { background-color: orange; width: 200px; } </style>错误写法：
// 1.创建虚拟DOM const VDOM = ( <h1 class='title' id={myId.toLocaleLowerCase()}> <span>{myData.toLocaleLowerCase()}</span> </h1> );报错：
正确写法：
// 1.创建虚拟DOM const VDOM = ( <h1 className='title' id={myId.toLocaleLowerCase()}> <span>{myData.toLocaleLowerCase()}</span> </h1> );
-
内联样式，要用
style={{key:value}}的形式去写。错误写法：
// 1.创建虚拟DOM const VDOM = ( <h1 className='title' id={myId.toLocaleLowerCase()}> <span style="color: white;">{myData.toLocaleLowerCase()}</span> </h1> );报错：
正确写法：
// 1.创建虚拟DOM const VDOM = ( <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white" }}>{myData.toLocaleLowerCase()}</span> </h1> );
当内联样式中需要设置多词组成的属性，需要将属性名写成驼峰式名称：
// 1.创建虚拟DOM const VDOM = ( <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span> </h1> ); -
只有一个根标签
错误写法：
// 1.创建虚拟DOM const VDOM = ( <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span> </h1> <input type="text" /> );报错：
正确写法：
// 1.创建虚拟DOM const VDOM = ( <div> <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span> </h1> <input type="text" /> </div> );
-
标签必须闭合
错误写法：
// 1.创建虚拟DOM const VDOM = ( <div> <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span> </h1> <input type="text" > </div> );报错：
正确写法：
// 1.创建虚拟DOM const VDOM = ( <div> <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span> </h1> <input type="text" /> </div> ); -
标签首字母:
-
若小写字母开头，则将改标签转为
html中同名元素，若html中无该标签对应的同名元素，则报错。// 1.创建虚拟DOM const VDOM = ( <div> <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span> </h1> <input type="text" /> <good>123</good> </div> );
-
若大写字母开头，
react就去渲染对应的组件，若组件没有定义，则报错。// 1.创建虚拟DOM const VDOM = ( <div> <h1 className='title' id={myId.toLocaleLowerCase()}> <span style={{ color: "white", fontSize: "20px" }}>{myData.toLocaleLowerCase()}</span> </h1> <input type="text" /> <Good>123</Good> </div> );
-
49
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
