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

概述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 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中定义

注意：

组件是类，因此首字母要大写

组件中有且只能有一个虚拟DOM根元素

render只能渲染虚拟DOM，所以要渲染组件，必须要将组件转成成虚拟DOM，

我们可以通过React.createElement方法，将组件转换成虚拟DOM

1 // 创建组件

2 class Demo extends Component {

3 // 通过render方法，渲染输出虚拟DOM

4 render() {

5 // 必须有一个根节点

6 return createElement(

7 ‘ul‘,

8 null,

9 // 依次是三个子虚拟DOM

10 createElement(‘li‘,null,‘中华军事‘),

11 createElement(‘li‘,‘米尔军事‘),

12 createElement(‘li‘,‘铁血军事‘)

13 )

14 }

15 }

16 // 组件不能被渲染，必须要转化成虚拟DOM

17 let demo = createElement(Demo)

18 // console.log(demo)

19 // 渲染虚拟DOM

20 render(demo,app)

2.4 Jsx语法
每次创建虚拟DOM，都要调用createElement方法，太麻烦了，因此react团队提供了Jsx语法。

Jsx语法核心思想：像书写xhtml中元素一样，来定义虚拟DOM

定义元素

xhtml中定义div元素： <div></div>

Jsx语法中定义div虚拟DOM： <div></div>

xhtml中定义input元素： <input type="text" />

Jsx语法中定义input虚拟DOM： <input type="text" />

所以Jsx语法跟xhtml语法，对于定义元素的语法是一样的

在Js环境中，写Jsx语法，浏览器不识别，所以我们要编译。

Js语法文件拓展名是.Js,Jsx语法为了区别Js语法，将文件名定义成.Jsx

2.4.1编译Jsx语法
在webpack中配置加载机

规则 /.Jsx$/

加载机：Jsx语法也被纳入es2017规范了，所以为了编译Jsx语法，提供babel-preset-react插件，但是该插件不能编译ES6中的class，ES2016中的ES Module规范，所以我们还要引入babel-preset-es2015插件，所以定义query的presets属性时候

presets: [‘es2015’,‘react’]

Jsx编译出来的结果是通过React调用的createElement形式，所以一定要引入核心库中的React对象

1 class Demo extends Component {

2 // 渲染虚拟DOM

3 render() {

4 // 输出虚拟DOM

5 return (

6 <ul>

7 <li>中华军事</li>

8 <li>米尔军事</li>

9 <li>铁血军事</li>

10 </ul>

11 )

12 }

13 }

2.4.2插值
Jsx语法不是Js语法，因此浏览器不支持，也不是Js环境，就不能使用Js表达式，想使用表达式，就要在Jsx语法中，创建一个Js环境，要使用插值语法

已经学过的插值语法

eJs <%=key%>

MVC <%=key%>

ES6 ${key}

less @{key}

sCSS #{$key}

微信 {{}} 伪Js环境

vue {{}}

react插件语法 {}

注意：react中的插值语法，是在Jsx语法中使用

react的插值语法可以在虚拟DOM内部使用。也可以在属性上使用，在属性上使用的时候，插值语法外部不要加引号

虚拟DOM就是对真实DOM，真实DOM可以设置属性，虚拟DOM也可以，并且语法是一样的

key=”value”

如果使用插值语法 key={value}

插值语法提供了Js环境，我们可以写任何Js表达式

2.4.3注释
Jsx语法不是Js环境，因此不支持Js中的注释，要让Js中注释生效，必须创建Js环境，可以通过插值语法实现。

使用单行注释的时候：千万不要注释掉插值闭合符号，通常要换行，因此工作中，更常用多行注释

1 class Demo extends Component {

2 // 渲染

3 render() {

4 // 变量

5 let Title = ‘爱创课堂‘;

6 return (

7 <div>

8 {// 单行注释

9 }

10 {/*

11 多行注释

12 */}

13 {/@H_403_322@注释/}

14 <h1 Title={Title}>{Title}</h1>

15 <h1>{今天：${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}}</h1>

16 </div>

17 )

18 }

19 }

复习
浏览器：内核， 渲染流程，DOM tree， render tree

repaint， reflow

react：虚拟DOM，组件开发，多端适配

虚拟DOM：createElement(name|comp,attrs,...children)

Js对象：type，ref， key， props

渲染虚拟DOM， render(vdom,dom,fn)

组件 class name extends Component {}

render()

Jsx语法 babel-preset-react

插值 {}

注释

2.5虚拟DOM属性
虚拟DOM是对真实DOM的映射，因此行为特征跟真实DOM是一致的，真实DOM可以添加属性，虚拟DOM也可以添加属性，并且语法是相同的，但是在虚拟DOM中，有四类属性：元素属性，特殊元素属性，非元素属性，自定义数据属性

2.5.1自定义数据属
性就是我们自定义的属性，用来存储数据的，例如data-ID，data-type等

2.5.2元素属性
在所有的元素属性中，有一个元素属性的设置是特殊的，style属性，

属性值必须是对象，要使用插值语法定义

例如 <div style={{

backgroundcolor: “red”

}}></div>

外面的{}表示插值语法，里面的{}表示对象符号

CSS中的样式要使用驼峰式命名，如果以浏览器前缀开头，首字母建议大写

即使不使用Jsx语法，也要使用对象定义样式

2.5.3特殊元素属性
在虚拟DOM的元素属性中，有两个属性是特殊的，

一个是class属性，命中了ES6中的class关键字，所以我们要写成classname

一个是for属性，命中了ES6中的for关键字，所以我们要写成HTMLFor

2.5.4非元素属性
该类属性不是元素所特有的属性，但是在react中，这些属性有特殊的意义或作用，所以我们称之为非元素属性

2.5.5 ref属性
用来在组件中，引用该虚拟DOM对应页面中的元素的

第一步 为虚拟DOM添加ref属性，并赋值

第二步 在组件中，通过this.refs.赋值名称，获取该元素

等到组件创建完成时候，我们可以获取：componentDIDMount方法表示组件创建完成

注意：获取的是一个源生DOM元素，因此 *** 作时候要使用源生DOM API

2.5.6 dangerouslySetINNERHTML
以危险的方式来设置元素的内容

在react中，所有不合法的 *** 作，都是危险的方式

例如：

我们不能使用行内式字符串

我们不能渲染DOM元素

...

属性值是对象，其中__HTML属性用来定义元素的内容

2.5.7 key
用来为元素设置react ID的

在循环创建虚拟DOM的时候，必须要设置key属性，并且属性值是唯一的

1 class App extends Component {

2 // 属性方法

3 createList() {

4 // 用data数据，映射一个包含虚拟DOM的数组，并返回

5 return data.map((item,index) => {

6 return <li key={index}>{item}</li>

7 })

8 }

9 render() {

10 console.log(this.createList)

11 let content = ‘<a href="">home</a>‘

12 // 只能有一个根元素

13 return (

14 <div>

15 {/@H_403_322@渲染新闻数据/}

16 <ul>

17 <li>{data[0]}</li>

18 <li>{data[1]}</li>

19 <li>{data[2]}</li>

20 </ul>

21 {/*<ul>

22 {arr}

23 </ul>*/}

24 <ul>

25 {this.createList()}

26 </ul>

27 <h1>{content}</h1>

28 {/@H_403_322@渲染标签/}

29 <h1 dangerouslySetINNERHTML={{

30 __HTML: content

31 }}></h1>

32 {/@H_403_322@获取这个元素/}

33 <h1 ref="Title" style={{

34 color: ‘red‘,

35 backgroundcolor: ‘green‘

36 }}>爱创课堂</h1>

37 <p classname="demo">hello</p>

38 <p classname="dmeo"></p>

39 <label HTMLFor="username">用户名</label>

40 <input type="text" ID="username" />

41 </div>

42 )

43 }

44 // 组件创建完成

45 componentDIDMount() {

46 console.log(this.refs.Title.INNERHTML);

47 }

48 }

2.6组件属性
虚拟DOM是对真实DOM的映射，因此与真实DOM有相同的行为

真实的DOM定义属性的目的是：是为了让其展现的形式具有多样性

组件是对虚拟DOM封装，使用组件是为了复用这组虚拟DOM，所以组件与虚拟DOM也有相同的行为

虚拟DOM与真实DOM行为一致，定义属性为了让其展现的形式具有多样性，

组件与虚拟DOM行为是一致的，定义属性为了让其展现的形式具有多样性，

2.6.1使用属性数据
组件定义属性的语法与虚拟DOM定义属性的语法是一样的

虚拟DOM： <div title="hello"></div>

组件： <Ickt Title=”hello”></Ickt>

注意：

虚拟DOM有四类属性数据：元素属性，非元素属性，特殊元素属性，自定义数据属性

组件只有一类属性数据，就是自定义数据属性（所有的属性都是为了存储，传递数据的）

为组件添加了属性，我们可以在组件内部获取这部分数据

通过this.props属性获取

注意：绝对不能在内部修改属性数据，想修改属性数据，只能在组件的外部，传递数据时修改。

2.6.2默认数据
我们可以为组件定义defaultProps静态属性，来声明默认属性数据

ES6开发中，定义静态属性有两种方式

1 在类的内部通过static关键字，定义get方法

2 在类的外部通过点语法，定义静态属性数据

在React中，建议我们用第二种方式，在类的外部，通过点语法，定义defaultProps静态属性，来声明默认属性数据

2.6.3约束性属性数据
在16版本中，react已经将属性约束性模块，分离出来了，我们要安装再使用

我们通过npm安装 prop-types模块

npm install prop-types

我们引入该库，提供了大量的类型，可以用来约束属性

每个类型的下面，都有一个isrequired的方法，表示该属性是必填的

我们为组件定义propTypes静态属性，来对每一个属性做约束

注意：如果定义了默认属性，该约束就失效了

1 // 引入库

2 import React,{ Component } from ‘react‘;

3 import { render } from ‘react-dom‘;

4 // 引入属性类型

5 import PropTypes from ‘prop-types‘;

6 // import * as PropTypes from ‘prop-types‘;

7 // console.log(PropTypes)

8

9 // 定义组件

10 class News extends Component {

11 // 渲染li方法

12 createList() {

13 // 根据属性创建数据

14 // return this.props.data.map((item,index) => {

15 // // 列表一定要添加key属性

16 // return <li key={index}>{item}</li>

17 // })

18 // 省略函数体{}

19 return this.props.data.map((item,index) => <li key={index}>{item}</li>)

20 }

21 // 渲染

22 render() {

23 // console.log(this)

24 // 创建新闻列表

25 return (

26 <ul>{this.createList()}</ul>

27 )

28 }

29 }

30

31 // 定义默认属性

32 News.defaultProps = {

33 data: [‘默认新闻‘]

34 }

35

36 // 属性约束

37 News.propTypes = {

38 // 是必填的

39 data: PropTypes.array.isrequired

40 }

41

42 // 使用组件，并传递属性数据

43 let data = ["别担心石油会枯竭了!地球上石油很丰富","他在沙特和女同事一起吃早餐 就被抓了","我被董事长绑架414天 睡觉都戴手铐"]

44 render(<News data={data}></News>,app)

45 render(<News data={["片酬是孙俪12倍 她现在被骂滚回家","马蓉生活潦倒？这装备暴露经济现状","50岁张敏近照曝光！依旧风姿绰约"]}></News>,app2)

46 render(<News></News>,app3)

2.7 DOM事件
React中为虚拟DOM绑定事件的语法跟HTML页面中，为元素绑定事件的语法类似

DOM元素： <div onclick="fn()">爱创课堂</div>

虚拟DOM： <div onClick={this.fn}>爱创课堂</div>

说明

1 事件首字母要大写

2 要通过插值语法，绑定组件中的方法

3 事件回调函数不能执行（不能添加参数集合()）

2.7.1事件回调函数
事件回调函数绑定组件内部的方法，this默认是undefined，让作用域变成组件实例化对象有两种方式

第一种，通过ES5提供的bind方法，绑定作用域组件实例化对象this

第二种，通过ES6提供的箭头函数，绑定作用域为组件实例化对象

在ES6语法中，我们还可以绑定其他对象，但是不建议

当我们绑定作用域的时候，我们可以传递自定义参数

如果是bind方法传递自定义参数，事件对象始终在最后面

如果是箭头函数传递自定义参数，事件对象可以在任何位置传递

**关注公众号“icketang”，获取最新前端资讯，学习资料

B战搜索“爱创课堂专业前端培训” 免费观看前端视频以及项目实战**

总结

以上是内存溢出为你收集整理的Html5web全栈前端开发_react.js框架（一）全部内容，希望文章能够帮你解决Html5web全栈前端开发_react.js框架（一）所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。