Html5web全栈前端开发_react.js框架（一）

一、浏览器原理


二、React
2.1 React简介
React是由Facebook团队推广的一个框架，以其出色的性能深受开发者喜爱

2.1.1 React有三大特点
虚拟DOM

组件开发

多端适配

2.1.2 Github
https://github.com/facebook/react

2.1.3获取React
获取react.js文件

bower install react

获取react模块

npm install react

我们本套课堂采用ES6语法开发讲解，所以采用第二种方式安装react

2.1.4多端适配
从react14版本之后，react为了实现多端适配这一理想。将代码库拆分成两个文件：

react.js(核心库), 用来创建虚拟DOM和组件的

react-dom.js(渲染库)，在各个端渲染，每个端渲染库是不一样的

2.2体验React
2.2.1创建虚拟DOM
react核心库，提供了createElement方法，用来创建虚拟DOM

第一个参数表示虚拟DOM名称（还可以是组件类）

第二个参数表示虚拟DOM属性对象（存储必要属性）

从第三个参数开始表示其他子虚拟DOM

如果是DOM元素，要通过createElement方法创建，

如果是文本节点可以直接写

该方法返回值就是得到的虚拟DOM

2.2.2虚拟DOM对象
虚拟DOM对象，就是一个js对象，只存储一些必要的信息，因此占用的内存比真实DOM少得多（是一个轻量级的DOM元素）

key 表示虚拟DOM ID

props 表示虚拟DOM属性

children 表示所有子虚拟DOM
ref 虚拟DOM对真实DOM引用的标志

type 虚拟DOM类型

2.2.3渲染虚拟DOM
在浏览器端渲染，要使用浏览器端渲染库，叫react-dom.js

提供了render方法，用来渲染

第一个参数表示虚拟DOM

第二个参数表示真实DOM

第三个参数表示渲染成功时候执行的回调函数

1 // 引入react

2 // import * as React from ‘react’;

3 import React, { createElement } from ‘react’;

4 // 引入渲染库

5 // import * as ReactDOM from ‘react-dom’;

6 import { render } from ‘react-dom’;

7

8 // console.log(React)

9 // console.log(ReactDOM)

10 // 创建一个h1虚拟DOM

11 let h1 = createElement(‘h1’, { title: ‘专业前端培训学校’ }, ‘爱创课堂’)

12 console.log(h1)

13

14 // 渲染

15 render(h1, document.getElementById(‘app’), () => {

16 console.log(‘success’)

17 })

18

2.3组件
为了复用虚拟DOM，react提供了组件，所以组件就是一组封装后的，可被复用的虚拟DOM

ES5语法中，通过React.createClass方法创建

ES6语法中，采用面向对象编程方式，定义类就是定义组件，只不过要继承组件基类Component

通过定义render方法来渲染输出虚拟DOM

在return中定义

注意：