1. React入门
1.1. React的基本认识
1). Facebook开源的一个js库
2). 一个用来动态构建用户界面的js库
3). React的特点
Declarative(声明式编码)
Component-Based(组件化编码)
Learn Once, Write Anywhere(支持客户端与服务器渲染)
高效
单向数据流
4). React高效的原因
虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)
高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)
1.2. React的基本使用
(1).导入相关js库文件(react.js, react-dom.js, babel.min.js)
可到bootcdn 官网下载
(2)例：第一个react代码：hello world!
<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.js解析里面的jsx的代码*/
// 1. 创建虚拟DOM元素对象
var vDom = <h1>Hello React!</h1> // 不是字符串
// 2. 将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
</script>
</body>
(3) 使用 React 开发者工具调试 React Developer Tools
1.3 JSX的使用
虚拟 DOM
- React 提供了一些 API 来创建一种
特别的一般 js 对象
a. var element = React.createElement(‘h1’, {id:‘myTitle’},‘hello’)
b. 上面语句创建的就是一个简单的虚拟 DOM 对象 - 虚拟 DOM 对象最终都会被 React 转换为真实的 DOM
- 我们编码时基本只需要操作 react 的虚拟 DOM 相关数据, react 会转换为真实 DOM 变化而更新界面
JSX的理解和使用
1). 理解
* 全称: JavaScript XML
* react定义的一种类似于XML的JS扩展语法: XML+JS
* 作用: 用来创建react虚拟DOM(元素)对象
2).基本语法规则
a. 遇到 `<` 开头的代码, 以标签的语法解析: html 同名标签转换为 html 同名元素, 其它标签需要特别解析
b. 遇到以` { `开头的代码，以 JS 语法解析: 标签中的 js 代码必须用{ }包含
3). babel.js 的作用
a. 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行
b. 只要用了 JSX，都要加上 type="text/babel", 声明需要 babel 来处理
4). 编码相关
* js中直接可以套标签, 但标签要套js需要放在 { } 中
* 在解析显示 js 数组时, 会自动遍历显示
* 把数据的数组转换为标签的数组:
var liArr = dataArr.map(function(item, index){
return <li key={index}>{item}</li>
})
5). 注意:
* 标签必须有结束
* 标签的class属性必须改为className属性
* 标签的style属性值必须为: {{color:'red', width:12}}
渲染虚拟 DOM(元素)
- 语法: ReactDOM.render(virtualDOM, containerDOM)
- 作用: 将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示
- 参数说明
a. 参数一: 纯 js 或 jsx 创建的虚拟 dom 对象
b. 参数二: 用来包含虚拟 DOM 元素的真实 dom 元素对象(一般是一个 div)
建虚拟 DOM 的 2 种方式
- 纯 JS(一般不用)
React.createElement('h1', {id:'myTitle'}, title) - JSX:
<h1 id='myTitle'>{title}</h1>
<script type="text/javascript">
const msg = 'I like you';
const myId = 'Atguigu';
// 1. 创建虚拟DOM
/*方式一: 纯JS(一般不用)创建虚拟DOM元素对象*/
//var element = React.createElement('h1', {id:'myTitle'},'hello');
const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase());
//2.渲染虚拟DOM
const domContainer = document.getElementById("test1");
//3. debugger
ReactDOM.render(vDom1, domContainer)
</script>
<script type="text/babel">
const msg = 'I like you';
const myId = 'Atguigu';
//1.创建虚拟DOM
/*方式二: JSX创建虚拟DOM元素对象*/
const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>;
//2.渲染虚拟DOM
ReactDOM.render(vDom2,document.getElementById("test2"));
</script>
例子：动态展示列表数据
<body>
<h2>前端JS框架列表</h2>
<div id="example1"></div>
<div id="example2"></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">
/*
功能: 动态展示列表数据
*/
// 技术点:
// 1). 使用JSX创建虚拟DOM
// 2). React能自动遍历显示数组中所有的元素
// 3). array.map()的使用
var names = ['周九良','孟鹤堂','许嵩','张新成','朱一龙'];
//方法一
var lis = [];
names.forEach((name,index) => lis.push(<li key={index}>{name}</li>))
//1.创建虚拟dom
const ul = <ul>{lis}</ul>;
//渲染虚拟dom
ReactDOM.render(ul,document.getElementById("example1"));
//方法二
//2.创建
const ul2 = (
<ul>
{
names.map((name,index)=><li key={index}>{name}</li>)
}
</ul>
)
//渲染
ReactDOM.render(ul2,document.getElementById('example2'));
</script>
</body>
1.4 模块与组件
1. 模块:
理解: 向外提供特定功能的js程序, 一般就是一个js文件
为什么: js代码更多更复杂
作用: 复用js, 简化js的编写, 提高js运行效率
2. 组件:
理解: 用来实现特定功能效果的代码集合(html/css/js)
为什么: 一个界面的功能太复杂了
作用: 复用编码, 简化项目界面编码, 提高运行效率
1.5 模块化与组件化
1. 模块化:
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
2. 组件化:
当应用是以多组件的方式实现功能, 这上应用就是一个组件化的应用
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
