文章目录
前言
公司实习的地方，使用react，然后打算学习一下react，并把基础知识点整理一下，毕业设计的前端，也使用react来搭建前端框架。
这里主要有如下react基础知识点：
- jsx语法
- 组件定义的两种方式：类和方法
- 组件三大属性：state、props、ref（这个为标签属性）
- 组件的组合
- 标签的受控组件和非受控组件
- react的生命周期
- react应用（基于create-react-app脚手架）
- react-axios
- react-router
- react-UI：antdesign
最重要的一个 没讲：redux
代码都已上库到GitHub上。
传送门： https://github.com/fengfanli/react-study
一、helloworld
先使用react写一个helloworld，体验一下。
先导入react开发版本js,有三个，react.development.js、react-dom.development.js、babel.min.js
react.js：React 的核心库
react-dom.js：提供操作DOM 的react 扩展库
babel.js：为babel库，两个作用1、将es6语法转化为es5,2、解析JSX语法代码为纯JS 语法代码的库（这里使用的是后者语法）
<body>
<div id="example"></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> // 不是字符串 jsx 语法
// 2、将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById("example"))
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
页面：
步骤（重点学习的地方）：
在< script type=“text/babel”> 中编写：声明：告诉babel.js这里有jsx语法
2. 创建虚拟DOM元素对象：就是定义一个变量，将HTML标签赋值于变量
3. 将虚拟DOM渲染到页面真实DOM容器中
技术点：
- jsx语法：
var vDom = <h1>Hello React</h1> - 渲染语法：
ReactDOM.render(vDom, document.getElementById("example"))
二、React jsx
2.1 jsx
- 全称: JavaScript XML
- react定义的一种类似于XML的JS扩展语法: XML+JS
- 作用: 用来创建react虚拟DOM(元素)对象
a. var ele = < h1>Hello JSX!< /h1>
b. 注意1: 它不是字符串, 也不是HTML/XML标签
c. 注意2: 它最终产生的就是一个JS对象 - 标签名任意: HTML标签或其它标签
- 标签属性任意: HTML标签属性或其它
- 基本语法规则
a. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b. 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含 - babel.js的作用
a. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理
2.2 动态展示列表数据
功能： 在页面中遍历一个数组，将其显示在页面中。
问题： 如何将一个数据的数组 转换为 一个标签的数组 很常用，使用数组的map() 方法 和 箭头函数
<div id="example1"></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">
/**
* 功能：动态展示列表数据
* 问题：如何将一个数据的数组 转换为 一个标签的数组 很常用
* 使用数组的map() 方法 和 箭头函数
* */
const names = ['jQuery', 'zepto', 'angular', 'react', 'vue']
// 1、创建虚拟DOM
// li 标签一定要带 key属性，而且还不能一样 否则警告
const ul = (
<ul>
{names.map(name=> <li key={name}>{name}</li>)}
</ul>
)
// 2、渲染虚拟DOM
ReactDOM.render(ul, document.getElementById('example'))
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
页面：
步骤：
- 创建虚拟DOM
使用 {} 大括号写法，在里面写js语法，将数组遍历。 - 渲染虚拟DOM(固定形式写法，将定义好的jsx虚拟dom渲染到 真实dom上)
技术点：
3. {} 大括号写法：
4. 数组方法map()：js方法，是对数组的遍历，里面为回调函数，方法形式：
map(value):value 为数组的值，
map(value, index):value 为数组的值，index为数组下标
2.3 虚拟dom创建的两种方式
- 使用原生js方法：const vDom1 = React.createElement(‘h1’, {id:‘myTitle’},‘hello’)
- 使用jsx方法：const vDom2 = < h3 id={myId.toUpperCase()}>{msg.toLowerCase()}< /h3>
2.4 代码实例
<body>
<div id="test01"></div>
<div id="test02"></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/javascript">
/**
* 需求，两种方式实现虚拟DOM的创建
* 1、使用原生js方法：const vDom1 = React.createElement('h1', {id:'myTitle'},'hello')
* 2、使用jsx方法：const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
*/
const msg = 'I Like you!'
const myId = 'fengfanli'
// 1、创建虚拟DOM元素对象
// const element = React.createElement('h1', {id:'myTitle'},'hello')
const vDom1 = React.createElement('h2', {id: myId.toLowerCase()}, msg.toUpperCase())
// debugger
// 2、将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(vDom1, document.getElementById('test01'))
</script>
<script type="text/babel">
// 1、创建虚拟DOM元素对象
const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
// debugger
// 2、将虚拟DOM渲染到页面真实DOM容器中
ReactDOM.render(vDom2, document.getElementById('test02'))
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
页面：
2.5 步骤
- 创建虚拟dom
- 渲染虚拟dom
2.6 技术点
- 渲染虚拟dom的两种方法：原生js和jsx
三、组件化、模块化
3.1 组件
- 理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
- 为什么: 一个界面的功能更复杂
- 作用: 复用编码, 简化项目编码, 提高运行效率
3.2 组件化
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用。
3.3 模块
- 理解: 向外提供特定功能的js程序, 一般就是一个js文件
- 为什么: js代码更多更复杂
- 作用: 复用js, 简化js的编写, 提高js运行效率
3.4 模块化
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
四、组件定义两种方式
- 方式一：使用方法定义，没有状态用此种方式(简单组件)
- 方式二：使用类定义，（复杂组件）
3.1 代码实例
<body> <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、使用方法定义，没有状态用此种方式(简单组件) * 2、使用类定义，（复杂组件） */ // 1.定义组件 //方式1: 工厂函数组件(简单组件)：没有状态的组件 function MyComponent() { return <h2>工厂函数组件(简单组件)</h2> }<span class="token comment">//方式2: ES6类组件(复杂组件)</span> <span class="token keyword">class</span> <span class="token class-name">MyComponent2</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token punctuation">{<!-- --></span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token operator"><</span>h2<span class="token operator">></span><span class="token function">工厂函数组件</span><span class="token punctuation">(</span>简单组件<span class="token punctuation">)</span><span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// 2.渲染组件方式</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>MyComponent <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example1'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>MyComponent2 <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example2'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
页面：
3.2 技术点
- 两种定义组件的方式：方法（简单组件）、类（复杂组件）
- render()方法，在里面写UI，
五、组件三个属性：state、props、refs
3.1 component_state
3.1.1 需求说明
自定义组件，功能说明如下
- 显示 h2 标题，初始文本为：你喜欢我
- 点击标题更新为：我喜欢你
3.1.2 state
-
state是组件对象最重要的属性, 值是对象(可以包含多个数据)
-
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
-
初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 读取某个状态值
this.state.statePropertyName// statePropertyName 自定义名称 - 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
- 1
- 2
- 3
- 4
3.1.2 代码实例
<body>
<div id="example"></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. 显示 h2 标题，初始文本为：你喜欢我
* 2. 点击标题更新为：我喜欢你
* */
// 1.定义组件
class Like extends React.Component{
// 2)、构造器
constructor(props){
super(props)
// 初始化状态
this.state = {
isLikeMe: false
}
// 将新增方法中的this 强制绑定为组件对象
this.handleClick = this.handleClick.bind(this)
}
// 1)、重写组件类的方法
render(){
// 读取状态
const {isLikeMe} = this.state // 第二种方式
return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
}
// 3)、新添加的方法：内部的 this 默认不是组件对象，而是 undefined， 所以要在 构造器中 绑定方法
handleClick(){
console.log('handleClick()',this)
// 得到原有状态 并取反
const isLikeMe = !this.state.isLikeMe
//更新状态
this.setState({isLikeMe})
}
}
// 2.渲染组件
ReactDOM.render(<Like />, document.getElementById('example'))
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
3.1.3 步骤
- 定义组件类。
- 编写**render（）**方法，在这里写UI组件。
- 编写构造器，和里面的state属性初始化。
- 然后在编写点击事件，这里需要注意这个方法需要绑定到类上，在构造器上进行bind（）方法绑定。
3.1.4 步骤、技术点
- 编写组件类
- render方法
- constructor构造器、state属性
- 编写点击事件，在构造器bind绑定,注意更新state的方法和获取state的关键字
- 渲染组件：ReactDOM.render（）
3.2 component_props
3.2.1 需求说明
需求: 自定义用来显示一个人员信息的组件
1). 姓名必须指定
2). 如果性别没有指定, 默认为男
3). 如果年龄没有指定, 默认为18
3.2.2 props
理解
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
作用
- 通过标签属性 从组件外向组件内 传递变化的数据
- 注意: 组件内部不要修改props数据
编码操作
- 内部读取某个属性值
this.props.propertyName - 对props中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
- 1
- 2
- 3
- 4
- 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/> - 默认属性值
Person.defaultProps = {
name: 'Mary'
}
- 1
- 2
- 3
- 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}
- 1
- 2
- 3
- 4
3.2.3 代码实例
<body> <div id="example1"></div> <div id="example2"></div> <div id="example3"></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/prop-types.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /** * props属性 和 prop-types.js prop-types.js: 对值进行设定 * 需求：自定义用来显示一个人员信息的组件，效果如页面，说明 * 1、如果性别没有指定，默认为男 * 2、如果年龄没有指定，默认为18 */ // 1、定义组件 /** * 使用 对象组件 * 组件对象有三个 state props refs **/ class Person extends React.Component{ render(){ console.log(this) return( <ul> <li>姓名：{this.props.name}</li> <li>年龄：{this.props.age}</li> <li>性别：{this.props.sex}</li> </ul> ) } } // 指定属性 默认值 Person.defaultProps = { age: 18, sex: '男' } // 对 props 中的属性值进行类型限制和必要性限制 Person.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number }<span class="token comment">// 2、渲染组件</span> <span class="token keyword">const</span> p1 <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'Tom'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span><span class="token punctuation">,</span> sex<span class="token punctuation">:</span> <span class="token string">'女'</span> <span class="token punctuation">}</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Person name<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>p1<span class="token punctuation">.</span>name<span class="token punctuation">}</span> age<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>p1<span class="token punctuation">.</span>age<span class="token punctuation">}</span> sex<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>p1<span class="token punctuation">.</span>sex<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"example1"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">const</span> p2 <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'Jack'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Person name<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>p2<span class="token punctuation">.</span>name<span class="token punctuation">}</span> age<span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token number">20</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"example2"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">/** * ... 的作用 * 1、打包 * function fn(...as){} fn(1, 2, 3) : 打包的意思 * 2、解包 * const arr1 = [1, 2, 3] const arr2 = [6, ...arr1, 9] ：解包的意思 * * @type {<!-- -->{name: string}} */</span> <span class="token keyword">const</span> p3 <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'Feng'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Person <span class="token punctuation">{<!-- --></span><span class="token operator">...</span>p3<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"example3"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
页面：
3.2.4 步骤、技术点
新添加了一个js：prop-types，这个库是在子组件中，对父组件传给子组件的属性值进行加以设定。
- 在渲染虚拟dom，
ReactDOM.render(<Person />, document.getElementById("example3"))
向 HTML标签一样，添加属性，往里面传值，在组件类 Person中通过this.props.属性名获取值。 - 扩展运算符（三点运算符）
...：将对象的所有属性通过props传递
3.2.5 问题：区别state和props
请区别一下组件的props和state属性
- state: 组件自身内部可变化的数据
- props: 从组件外部向组件内部传递数据, 组件内部只读不修改
3.3 component_refs
3.3.1 需求描述
需求: 自定义组件, 功能说明如下:
- 点击按钮, 提示第一个输入框中的值
- 当第2个输入框失去焦点时, 提示这个输入框中的值
3.3.2 refs属性
-
组件内的标签都可以定义ref属性来标识自己
a.<input type="text" ref={input => this.msgInput = input}/>
b. 回调函数在组件初始化渲染完或卸载时自动调用 -
在组件中可以通过
this.msgInput来得到对应的真实DOM元素 -
作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据
3.3.3 事件处理
- 通过onXxx属性指定组件的事件处理函数(注意大小写)
a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) - 通过event.target得到发生事件的DOM元素对象
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target //返回input对象
}
- 1
- 2
- 3
- 4
3.3.4 强烈注意
-
组件内置的方法中的this为组件对象
-
在组件类中自定义的方法中this为null
a. 强制绑定this: 通过函数对象的bind()
b. 箭头函数(ES6模块化编码时才能使用)
3.3.5 代码实例
<body> <div id="example1"></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/prop-types.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /** * 事件 与 ref * 需求：自定义组件，功能说明 * 1、界面如图所示 * 2、点击按钮，提示第一个输入框中的值 * 3、当第二个输入框失去焦点时，提示这个输入框中的值 */ // 1、创建组件 class MyComponent extends React.Component { constructor(props) { super(props) this.showInput = this.showInput.bind(this) this.handleBlur = this.handleBlur.bind(this) }<span class="token function">showInput</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">const</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>refs<span class="token punctuation">.</span>content<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>input<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// 事件都有一个固定的形参</span> <span class="token function">handleBlur</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token comment">//指的是标签</span> <span class="token comment">// event.target : 指的是 input 表单框</span> <span class="token function">alert</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">/* 最后一个比较特别，操作的 dom 元素，是发生事件的元素。*/</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ref<span class="token operator">=</span><span class="token string">"content"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator">&</span>nbsp<span class="token punctuation">;</span><span class="token operator">&</span>nbsp<span class="token punctuation">;</span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ref<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>input <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span>input <span class="token operator">=</span> input<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator">&</span>nbsp<span class="token punctuation">;</span><span class="token operator">&</span>nbsp<span class="token punctuation">;</span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>showInput<span class="token punctuation">}</span><span class="token operator">></span>提升输入<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator">&</span>nbsp<span class="token punctuation">;</span><span class="token operator">&</span>nbsp<span class="token punctuation">;</span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> onBlur<span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>handleBlur<span class="token punctuation">}</span> placeholder<span class="token operator">=</span><span class="token string">"失去焦点提示内容"</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// 2、渲染组件</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>MyComponent<span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"example1"</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
展示：
3.3.6 步骤、技术点
大体步骤与前一样
- 点击事件要在constructor构造器中进行bind()方法绑定。
- ref使用方法一：
ref属性的value值为唯一值，然后在点击事件中 通过this.refs.ref属性名获取 - ref使用方法二：
ref属性的value值为回调函数{input => this.inputMsg = input}，返回一个，然后在点击事件中 通过this.inputMsg获取
六、组件的组合
6.1 需求描述
功能: 组件化实现此功能
- 显示所有todo列表
- 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本
6.2 代码实例
<body> <div id="example"></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/prop-types.js"></script> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"><span class="token comment">/** * 界面中有一个文本框和按钮，按钮中显示下面的几个数据 * 下面是一个 ul 列表，默认遍历 数组中的数据。 * 事件：点击按钮，文本框中的数据出现在下面中的 ul 列表中 */</span> <span class="token comment">/** *问题:数据保存在哪个组件内？ * 看数据是某个组件需要（给它），还是某些组件需要（给共同的父组件） *问题2：需要在子组件中改变父组件的状态 * 子组件不能直接改变父组件的状态 * 状态在哪个组件，更新状态的行为（方法）就应该定义在哪个组件 * 解决：父组件定义函数，传递给子组件，子组件调用 * *组件化编写功能的流程 * 1、拆分组件 * 2、实现静态组件（只有静态界面，没有动态数据和交互） * 3、实现动态组件 * 1）实现初始化数据动态显示 * 2) 实现交互功能 */</span> <span class="token comment">// 主界面</span> <span class="token keyword">class</span> <span class="token class-name">Counter</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{<!-- --></span> <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token comment">// 初始化状态</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> todos<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'吃饭'</span><span class="token punctuation">,</span> <span class="token string">'睡觉'</span><span class="token punctuation">,</span> <span class="token string">'打豆豆'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addTodos <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addTodos<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">// 定义一个添加的函数</span> <span class="token function">addTodos</span><span class="token punctuation">(</span>todo<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">// this.state.todos.unshift(todo) //不能这么做</span> <span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span>todos<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state todos<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>todo<span class="token punctuation">)</span> <span class="token comment">// 更新状态</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>todos<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span>todos<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Simple <span class="token constant">TODO</span> List<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>Add count<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>todos<span class="token punctuation">.</span>length<span class="token punctuation">}</span> addTodos<span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>addTodos<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>List todos<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>todos<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// 子界面</span> <span class="token keyword">class</span> <span class="token class-name">Add</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{<!-- --></span> <span class="token function">constructor</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">super</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addData <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addData<span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"text"</span> ref<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>input <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span>todoInput <span class="token operator">=</span> input<span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span>button onClick<span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>addData<span class="token punctuation">}</span><span class="token operator">></span>add # <span class="token punctuation">{<!-- --></span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>count <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">addData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">// 1、读取输入的数据</span> <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>todoInput<span class="token punctuation">.</span>value<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2、检查合法性</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>data<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token punctuation">}</span> <span class="token comment">// 3、添加</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span><span class="token function">addTodos</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token comment">// 4、清除输入</span> <span class="token keyword">this</span><span class="token punctuation">.</span>todoInput<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// 数据校验，放在上面出错</span> Add<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> count<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>number<span class="token punctuation">.</span>isRequired<span class="token punctuation">,</span> addTodos<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>func<span class="token punctuation">.</span>isRequired <span class="token punctuation">}</span> <span class="token comment">// 子界面</span> <span class="token keyword">class</span> <span class="token class-name">List</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{<!-- --></span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">const</span> <span class="token punctuation">{<!-- --></span>todos<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">;</span> <span class="token comment">/* => : 箭头函数的意义，有两个：函数、return， 这里如果加 {}:方法体 的话，里面一定要有 return*/</span> <span class="token comment">/*todos.map((value, index)=><li key={index}>{value}</li>)*/</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>ul<span class="token operator">></span> <span class="token punctuation">{<!-- --></span>todos<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> index<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token operator"><</span>li key<span class="token operator">=</span><span class="token punctuation">{<!-- --></span>index<span class="token punctuation">}</span><span class="token operator">></span><span class="token punctuation">{<!-- --></span>value<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> List<span class="token punctuation">.</span>propTypes <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> todos<span class="token punctuation">:</span> PropTypes<span class="token punctuation">.</span>array<span class="token punctuation">.</span>isRequired <span class="token punctuation">}</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>Counter<span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'example'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
6.3 技术点（注意：数据在哪，操作方法就在哪）
- 设计三个组件，一个主页面Counter、一个添加页面Add、一个列表页面List
- state数据在主页面中，todos数组会传给List组件，todos长度、添加的方法addTodos()会传给Add组件。
- 注意，方法也可以作为数据传给子组件。通过
this.props进行接收。 - 在Add组件中调用父组件的添加方法。
- 在List组件中通过
this.props.todos获取数据，然后在render（）方法中进行遍历渲染出来。
6.4 React工具使用，查看三个属性
在Google中安装扩展软件，安装React扩展工具。可以查看自己定义的组件，以及三大属性，其实只能看到state和props，这两个是在组件上，ref是在标签上，这个只能在元素中查看。
看截图：
Counter类组件
Add类组件
6.5 功能界面的组件化编码流程(无比重要)
-
拆分组件: 拆分界面,抽取组件
-
实现静态组件: 使用组件实现静态页面效果
-
实现动态组件
a. 动态显示初始化数据
b. 交互功能(从绑定事件监听开始)
七、收集表单数据
7.1 需求描述
需求: 自定义包含表单的组件
- 输入用户名密码后, 点击登陆提示输入信息
- 不提交表单
7.2 理解
-
问题: 在react应用中, 如何收集表单输入数据
-
包含表单的组件分类
a. 受控组件: 表单项输入数据能自动收集成状态
b. 非受控组件: 需要时才手动读取表单输入框中的数据
7.3 代码实例
<body>
<div id="example"></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/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/**
* 需求： 自定义包含表单的组件
* 1、界面如下所示
* 2、输入用户名密码后，点击登陆提示输入信息
* 3、不提交表单 event.preventDefault()
*/
class LoginForm extends React.Component {
constructor(prop) {
super(prop)
this.state = {
pwd: ''
}
this.handleLogin = this.handleLogin.bind(this)
this.handleChange = this.handleChange.bind(this)
}
render() {
return (
/**
* 用户名 为非受控组件
* 密码 为受控组件
*/
<form action="/test" onSubmit={this.handleLogin}>
用户名：<input type="text" ref={input => this.username = input}/>
密码： <input type="password" value={this.state.pwd} ref={input => this.password = input}
onChange={this.handleChange}/>
<input type="submit" value="登陆"/>
</form>
)
}
handleLogin(event) {
const uname = this.username.value // 操作DOM
const {pwd} = this.state // 操作react 属性
alert(`准备提交的用户名为${uname}, 密码${pwd}`)
// 阻止事件的默认行为（提交）
event.preventDefault()
}
handleChange(event) {
// 读取输入框的值
const password = event.target.value
// 更新pwd的状态
this.setState({pwd: password})
}
}
ReactDOM.render(<LoginForm/>, document.getElementById('example'))
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
页面：
7.4 步骤、技术点
步骤与前一致
- 这里需要理解**受控组件和非受控组件**。
- 受控组件：通过onChange（）事件，将input值与state的值链接起来，进行统一。
八、组件生命周期
8.1 需求效果
需求: 自定义组件
- 让指定的文本做显示/隐藏的渐变动画
- 切换持续时间为2S
- 点击按钮从界面中移除组件界面
8.2 理解
- 组件对象从创建到死亡它会经历特定的生命周期阶段
- React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
- 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作
8.3 生命周期流程图
8.4 生命周期详述
- 组件的三个生命周期状态:
- Mount：插入真实 DOM
- Update：被重新渲染
- Unmount：被移出真实 DOM
- React 为每个状态都提供了勾子(hook)函数
- componentWillMount()（舍弃）
- componentDidMount()
- componentWillUpdate()
- componentDidUpdate()
- componentWillUnmount()
- 生命周期流程:
a. 第一次初始化渲染显示: ReactDOM.render()- constructor(): 创建对象初始化state
- componentWillMount() : 将要插入回调
- render() : 用于插入虚拟DOM回调
- componentDidMount() : 已经插入回调
b. 每次更新state: this.setSate() - componentWillUpdate() : 将要更新回调
- render() : 更新(重新渲染)
- componentDidUpdate() : 已经更新回调
c. 移除组件: ReactDOM.unmountComponentAtNode(containerDom) - componentWillUnmount() : 组件将要被移除回调
8.5 重要的勾子
- render(): 初始化渲染或更新渲染调用
- componentDidMount(): 开启监听, 发送ajax请求
- componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
- componentWillReceiveProps(): 后面需要时讲
九、虚拟DOM与DOM Diff算法
9.1 代码实例
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
componentDidMount () {
setInterval(() => {
this.setState({
date: new Date()
})
}, 1000)
}
render () {
console.log(‘render()’)
return (
<p>
Hello, <input type=“text” placeholder=“Your name here”/>!
It is {this.state.date.toTimeString()}
</p>
)
}
}
ReactDOM.render(
<HelloWorld/>,
document.getElementById(‘example’)
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
9.2 基本原理图
十、react引用（基于react脚手架）
10.1 使用create-react-app创建react应用
10.1.1 react脚手架
-
xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
a. 包含了所有需要的配置
b. 指定好了所有的依赖
c. 可以直接安装/编译/运行一个简单效果 -
react提供了一个用于创建react项目的脚手架库:
create-react-app -
项目的整体技术架构为:
react + webpack + es6 + eslint -
使用脚手架开发的项目的特点:
模块化, 组件化, 工程化
10.1.2 创建项目并启动
npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start
- 1
- 2
- 3
- 4
10.1.3 react脚手架项目结构
ReactNews
|--node_modules---第三方依赖模块文件夹
|--public
|-- index.html-----------------主页面
|--scripts
|-- build.js-------------------build打包引用配置
|-- start.js-------------------start运行引用配置
|--src------------源码文件夹
|--components-----------------react组件
|--index.js-------------------应用入口js
|--.gitignore------git版本管制忽略的配置
|--package.json----应用包配置文件
|--README.md-------应用描述说明的readme文件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
10.2 项目结构
项目入口 js index.js
10.2 demo：评论管理
效果：
拆分组件：
应用组件: App
- state: comments/array
添加评论组件: CommentAdd - state: username/string, content/string
- props: add/func
评论列表组件: CommentList - props: comment/object, delete/func, index/number
评论项组件: CommentItem - props: comments/array, delete/func
实现静态组件
实现动态组件
- 动态展示初始化数据
- 初始化状态数据
- 传递属性数据
- 响应用户操作, 更新组件界面
- 绑定事件监听, 并处理
- 更新state
10.3 demo：评论管理
项目目录：
代码上库啦。
十一、react ajax
11.1 理解
11.1.1 前置说明
- React本身只关注于界面, 并不包含发送ajax请求的代码
- 前端应用需要通过ajax请求与后台进行交互(json数据)
- react应用中需要集成第三方ajax库(或自己封装)
11.1.2 常用的ajax请求库
-
jQuery: 比较重, 如果需要另外引入不建议使用
-
axios: 轻量级, 建议使用
a. 封装XmlHttpRequest对象的ajax
b. promise风格
c. 可以用在浏览器端和node服务器端 -
fetch: 原生函数, 但老版本浏览器不支持
a. 不再使用XmlHttpRequest对象提交ajax请求
b. 为了兼容低版本的浏览器, 可以引入兼容库fetch.js
11.1.3 效果
需求:
- 界面效果如下
- 根据指定的关键字在github上搜索匹配的最受关注的库
- 显示库名, 点击链接查看库
- 测试接口: https://api.github.com/search/repositories?q=r&sort=stars
在这里插入图片描述
11.1.4 代码实例
<body>
<div id="example"></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/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script type="text/babel">
/**
* 需求：
* 1、界面效果如下，
* 2、根据指定的关键字在GitHub上搜索匹配的最受关注的库
* 3、显示库名，点击链接查看库
* 4、测试接口：https://api.github.com/search/repositories?q=r&sort=stars
*/
class MostStarRepo extends React.Component {
state = {
repoName: '',
repoUrl: ''
}
// 最后发请求
componentDidMount() {
// 使用 axios 发送 异步的Ajax 请求 re:可以改变可以传 sort=stars：排序模式
const url = 'https://api.github.com/search/repositories?q=re&sort=stars'
axios.get(url)
.then(response => {
const result = response.data
console.log(response);
// 得到数据
const {name, html_url} = result.items[0]
// 更新状态
this.setState({
repoName: name,
repoUrl: html_url
})
})
// 错误信息
.catch(error => {
alert(error.message)
})
// 使用 fetch 发送异步的 Ajax 请求
/*fetch(url)
.then(response => {
return response.json()
})
.then(data => {
// 得到数据
const {name, html_url} = data.items[0]
// 更新状态
this.setState({
repoName: name,
repoUrl: html_url
})
})*/
}
render() {
const {repoName, repoUrl} = this.state
if (!repoName) {
return <h2>Loading</h2>
} else {
return <h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
}
}
}
ReactDOM.render(<MostStarRepo/>, document.getElementById('example'))
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
扫一扫
1625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
