技术文章 | Technical articles

Html5web全栈前端开发_react.js框架(一)

一、浏览器原理

图片1.png 

图片2.png 

二、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(渲染库),在各个端渲染,每个端渲染库是不一样的

图片3.png 

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类型

图片4.png 

2.2.3渲染虚拟DOM

在浏览器端渲染,要使用浏览器端渲染库,叫react-dom.js

提供了render方法,用来渲染

第一个参数表示虚拟DOM

第二个参数表示真实DOM

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

// 引入react

// import * as React from 'react';

import React, { createElement } from 'react';

// 引入渲染库

// import * as ReactDOM from 'react-dom';

import { render } from 'react-dom';

// console.log(React)

// 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组件

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

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

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

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

return中定义

注意:

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

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

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

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

// 创建组件

class Demo extends Component {

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

render() {

 // 必须有一个根节点

 return createElement(

  'ul',

  null,

  // 依次是三个子虚拟DOM

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

11    createElement('li', null, '米尔军事'),

12    createElement('li', null, '铁血军事')

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中的classES2016中的ES Module规范,所以我们还要引入babel-preset-es2015插件,所以定义querypresets属性时候

presets: [es2015, react]

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

图片5.png 

class Demo extends Component {

// 渲染虚拟DOM

render() {

 // 输出虚拟DOM

 return (

  <ul>

   <li>中华军事</li>

   <li>米尔军事</li>

   <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环境,可以通过插值语法实现。

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

class Demo extends Component {

// 渲染

render() {

 // 变量

 let title = '爱创课堂';

 return (

  <div>

   {// 单行注释

   }

10     {/*

11      多行注释

12     */}

13     {/*注释*/}

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

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

16    </div>

17   )

18  }

19 }

 


复习

浏览器:内核, 渲染流程,DOM treerender tree

repaintreflow

react:虚拟DOM,组件开发,多端适配

虚拟DOMcreateElement(name|comp, attrs, ...children)

js对象:typerefkeyprops

渲染虚拟DOMrender(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-iddata-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属性,并且属性值是唯一的

class App extends Component {

// 属性方法

createList() {

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

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

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

 })

}

render() {

10   console.log(this.createList)

11   let content = '<a style="color: red" href="">home</a>'

12   // 只能有一个根元素

13   return (

14    <div>

15     {/*渲染新闻数据*/}

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     {/*渲染标签*/}

29     <h1 dangerouslySetInnerHTML={{

30      __html: content

31     }}></h1>

32     {/*获取这个元素*/}

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静态属性,来对每一个属性做约束

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

图片6.png图片6.1.png 

 

// 引入库

import React, { Component } from 'react';

import { render } from 'react-dom';

// 引入属性类型

import PropTypes from 'prop-types';

// import * as PropTypes from 'prop-types';

// console.log(PropTypes)

// 定义组件

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站搜索“爱创课堂专业前端培训” 免费观看前端视频以及项目实战

学习咨询、更多前端学习资料 请添加微信“haomei0452”


QQ图片20190401143635.jpg


上一篇文章: Web前端三大框架_vue源码笔记
下一篇文章: 月薪12k的零基础自学前端必备手册

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>