React Native 爬坑之路

于 2017-07-09 09:15:00 发布
阅读量74 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 移动开发 ViewUI
原文链接：http://www.cnblogs.com/crazycode2/p/7140531.html
本文详细介绍了React的基础知识，包括创建和渲染组件、设置组件样式、复合组件的概念、props传值方式、state管理和事件绑定，以及React组件的生命周期。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.react 基础 （创建组件及在浏览器上渲染组件）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码
	
	// 8.需求：渲染一行标题,显示"Hello React"
	//
	/*
		ReactDOM.render()
		React的基本方法,用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点中

		3个参数
		第一个：模板的渲染内容(HTML形式)
		第二个：这段模板需要插入的DOM节点(本程序中,是id为container的div节点)
		第三个：渲染后的回调,一般不用
	*/

	// ReactDOM.render(
	// 	<h1>Hello React</h1>,
	// 	document.getElementById("container")
	// );

	/*
		JSX入门

		JSX不是一门新的语言,是个语法(语法糖)
	*/

	// 1.JSX必须借助React环境运行

	// 2.JSX标签其实就是HTML标签,只不过我们在JavaScript中书写这些标签的时候,不用使用""括起来,
	// 可以像XML一样书写

	ReactDOM.render(
		<h1>
			Hello React
		</h1>,
		document.getElementById("container")
	);

	// 3.转换：JSX语法能够让我们更直观的看到组件的DOM结构,不能直接在浏览器上运行,最终会转化成JavaScript代码执行

	ReactDOM.render(
		React.createElement("h1",null,"Hello React"),
		document.getElementById("container")
	);

	// 4.在JSX中运行JavaScript代码
	// 使用{}括起来  {表达式}
	//

	var text = "百度";
	ReactDOM.render(
		<h1>{text}</h1>,
		document.getElementById("container")
	);

	// 5.例如：属性、设置样式、事件绑定
</script>
</html>

 

2.设置组件样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->

	<style>
		.pStyle {
			font-size: 20px;
		}
	</style>
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码
	
	/*
		创建一个组件类,用于输出Hello React

		1.React中创建的组件类以大写字母开头,驼峰命名法
		2.在React中使用React.createClass方法创建一个组件类
		3.核心代码：每个组件类都必须实现自己的render方法。输出定义好的组件模板。返回值：null、false、组件模板
		4.注意：组件类只能包含一个顶层标签             
	*/

	// var HelloMessage = React.createClass({
	// 	render:function(){
	// 		return <h1>Hello React</h1>;
	// 	}
	// });

	// // 渲染
	// ReactDOM.render(
	// 	// 在模板中插入<HelloMessage />会自动生成一个实例
	// 	<HelloMessage />,
	// 	document.getElementById("container")
	// );

	/*
		设置组件的样式,三种：
		1.内联样式
		2.对象样式
		3.选择器样式

		注意：在React和HTML5中设置样式时的书写格式是有区别的
		* 1.HTML5以 ; 结尾
			React以 , 结尾
		* 2.HTML5中key、value都不加引号
			React中属于JavaScript对象,key的名字不能出现"-",需要使用驼峰命名法(例：backgroundColor)。如果value为字符串,需要加引号。
		* 3.HTML5中,value如果是数字,需要带单位
			React中不需要带单位

		* 我们定义一个组件类,同时使用三种设置组件样式的方式
		* 需求：定义一个组件,分为上下两行显示内容
		* <div> 内联样式：设置背景颜色,边框大小,边框颜色
		* 	<h1></h1> 对象样式：设置背景颜色,字体颜色
		* 	<p></p> 选择器样式：设置字体大小
		* </div>
		*
		* class 和 for 是React中的保留字
		* 注意：在React中使用选择器样式设置组件样式时,属性名不能使用class,需要使用className替换。
		* 类似的：使用htmlFor替换for
	*/

	// 创建设置h1样式对象
	var hStyle = {
		backgroundColor:"green",
		color:"red"
	}
	// 创建组件 通过this.props传值
	var ShowMessage = React.createClass({
		render:function() {
			return (
				// 外面的{}是JSX语法,里面的{}表示对象
				<div style={{backgroundColor:"yellow",borderWidth:5,borderColor:"black",borderStyle:"solid"}}>
					<h1 style={hStyle}>{this.props.firstRow}</h1>
					<p className="pStyle">{this.props.secondRow}</p>
				</div>
			);
		}
	});

	ReactDOM.render(
		<ShowMessage firstRow="你好" secondRow="世界" />,
		document.getElementById("container")
	);
</script>
</html>

 

3.复合组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码

	/*
		复合组件

		也被称为组合组件,创建多个组件合成一个组件。
	*/

	/*
		定义一个组件WebShow。功能：输出网站的名字和网址,网址是一个可以点击的链接。
		分析：定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,兵器可以点击
	*/

	// 定义WebName组件
	var WebName = React.createClass({
		render:function() {
			return <h1>百度</h1>;
		}
	});

	// 定义WebLink组件
	var WebLink = React.createClass({
		render:function() {
			return <a href="http://www.baidu.com">http://www.baidu.com</a>;
		}
	});

	// 定义复合组件 WebShow
	var WebShow = React.createClass({
		render:function() {
			return (
				// 嵌套组件
				<div>
					<WebName />
					<WebLink />
				</div>
			);
		}
	});

	// 将组件类WebShow渲染到网页上
	ReactDOM.render(
		<WebShow />,
		document.getElementById("container")
	);
</script>
</html>

 

4.props 传值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码
	/*
		props、state
		props是组件自身的属性,一般用于嵌套的内外层组件中,负责传递信息(通常是由父层组件向子层组件传递)
		注意：props对象中属性与组件的属性一一对应,不要直接去修改props中属性的值
	*/

	/*
		定义一个组件WebShow。功能：输出网站的名称和地址,网址是一个可以点击的链接
		分析：定义一个组件WebName负责输出网站名字,定义组件WebLink显示网站的网址,并且可以点击

		思路：
		1.给WebShow设置两个属性,wname,wlink
		2.WebShow的props对象增加了两个属性值
		3.WebName从WebShow的props对象中获取wname的值,即网站的名称。
	*/

	// 定义WebName
	var WebName = React.createClass({
		render:function() {
			return <h1>{this.props.webname}</h1>;
		}
	});

	// 定义WebLink
	var WebLink = React.createClass({
		render:function() {
			return <a href={this.props.weblink}>{this.props.weblink}</a>;
		}
	});

	// 定义WebShow
	var WebShow = React.createClass({
		render:function() {
			return (
				<div>
					<WebName webname={this.props.wname} />
					<WebLink weblink={this.props.wlink} />
				</div>
			);
		}
	});

	// 渲染
	ReactDOM.render(
		<WebShow wname="百度" wlink="http://www.baidu.com" />,
		document.getElementById("container")
	);

	/*
		...this.props
		props提供的语法糖,可以将父组件中的全部属性都复制给子组件

		需求：定义一个组件Link,Link组件中只包含一个<a>,我们不给<a>设置任何属性,所有属性全部从父组件复制得到
	*/

	var Link = React.createClass({
		render:function(){
			return <a {...this.props}>{this.props.name}</a>;
		}
	});

	ReactDOM.render(
		<Link href="http://www.baidu.com" name="百度" />,
		document.getElementById("container")
	);

	/*
		this.props.children

		children是一个例外,不是跟组件的属性对应的。
		表示组件的所有子节点

		HTML5中有一种标签:列表<ul> <ol> <li>

		定义一个列表组件,列表项中显示的内容,以及列表项的数量都由外部决定
	*/

	var ListComponent = React.createClass({
		render:function() {
			return (
				<ul>
					{
						/*
							列表项数量以及内容不确定,在创建模板时才能确定
							利用this.props.children从父组件获取需要展示的列表项内容

							获取到列表项内容后,需要遍历children,逐项进行设置
							使用React.Children.map方法
							返回值：数组对象。这里数组中的元素是<li>
						*/
						React.Children.map(this.props.children, function(child) {
							// child是遍历得到的父组件的子节点
							return <li>{child}</li>
						})
					}
				</ul>
			);
		}
	});

	ReactDOM.render(
		(
			<ListComponent>
				<h1>百度</h1>
				<a href="http://www.baidu.com">http://www.baidu.com</a>
			</ListComponent>
		),
		document.getElementById("container")
	);

	/*
		属性验证 propTypes

		组件类的属性

		用于验证组件实例的属性是否符合要求
	*/

	var ShowTitle = React.createClass({
		propTypes: {
			// title 数据类型必须为字符串
			title: React.PropTypes.string.isRequired
		},
		render:function() {
			return <h1>{this.props.title}</h1>
		}
	});

	ReactDOM.render(
		<ShowTitle title="123" />,
		document.getElementById("container")
	);

	/*
		设置组件属性的默认值

		通过实现组件的getDefaultProps方法,对属性设置默认值
	*/

	var MyTitle = React.createClass({
		getDefaultProps:function() {
			return {
				title:"百度"
			}
		},
		render:function() {
			return <h1>{this.props.title}</h1>;
		}
	});

	ReactDOM.render(
		<MyTitle />,
		document.getElementById("container")
	);
</script>
</html>

 

5.state管理 及 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码
	
	/*
		事件处理

		react中的事件名称,首字母小写,驼峰命名法

		案例：定义组件,组件中包含一个button,给button绑定onClick事件
	*/
	var MyButton = React.createClass({
		handleClick:function(){
			alert("点击按钮触发的效果");
		},
		render:function(){
			return (
				<button onClick={this.handleClick}>{this.props.buttonTitle}</button>
			);
		}
	});

	ReactDOM.render(
		<MyButton buttonTitle="按钮" />,
		document.getElementById("container")
	);

	/*
		state 状态
		props 
		组件自身的属性

		this.state
	*/

	// 需求：创建一个CheckButton的组件,包含一个checkbox类型 <input>
	// 复选框在选中和未选中两种状态下会显示不同的文字。即根据状态渲染。

	var CheckButton = React.createClass({
		// 定义初始状态
		getInitialState:function() {
			return {
				// 返回的是一个对象 里面包含设置的状态 和 初始值
				// 在这个对象中设置的属性,将会储存在state中
				// 默认状态,未选中
				isCheck: false
			}
		},
		// 定义事件绑定的方法
		handleChange:function() {
			// 修改状态值,通过this.state读取设置的状态值
			this.setState({
				isCheck:!this.state.isCheck
			});
		},
		render:function(){
			// 根据状态值,设置显示的文字
			// 注：在JSX语法中,不能直接使用if else,使用三目运算符
			var text = this.state.isCheck ? "已选中" : "未选中";
			return (
				<div>
					<input type="checkbox" onChange={this.handleChange} />
					{text}
				</div>
			);
		}
	});

	ReactDOM.render(
		<CheckButton />,
		document.getElementById("container")
	);

	/*
		需求：定义一个组件,将用户在输入框内输入的内容进行实时显示

		分析：
		组件与用户交互过程中,存在状态的变化,即输入框的值
	*/

	var Input = React.createClass({
		getInitialState:function() {
			return {
				value:"请输入"
			};
		},
		handleChange:function(event) {
			// 通过event.target.value读取用户输入的值
			this.setState({
				value: event.target.value
			});
		},
		render:function() {
			var value = this.state.value;
			return (
				<div>
					<input type="text" value={value} onChange={this.handleChange} />
					<p>{value}</p>
				</div>
			);
		}
	});

	ReactDOM.render(
		<Input />,
		document.getElementById("container")
	);
</script>
</html>

 

6.react 生命周期

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 1.react.js是React的核心库 -->
	<script src="js/react.min.js" charset="utf-8"></script>
	<!-- 2.react-dom.js的作用是提供与DOM相关的功能 -->
	<script src="js/react-dom.min.js" charset="utf-8"></script>
	<!-- 3.browser.min.js的作用是将JSX语法转换成JavaScript语法 -->
	<script src="js/browser.min.js" charset="utf-8"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
	<!-- 6.React渲染的模板内容会插入到这个DOM节点中,作为一个容器 -->
	<div id="container">
		
	</div>
</body>
<!-- 4.在React开发中,使用JSX,跟JavaScript不兼容,在使用JSX的地方,要设置type:text/babel -->
<!-- 5.babel是一个转换编译器,ES6转成可以在浏览器中运行的代码 -->
<script type="text/babel">
	// 7.在此处编写React代码
	
	/*
		生命周期介绍：

		1.组件的生命周期可分成三个状态：
			Mounting：组件挂载,已插入真实 DOM
			Updating：组件更新,正在被重新渲染
			Unmounting：组件移出,已移出真实 DOM
		
		2.组件的生命周期可分成四个阶段：
			创建、实例化、更新、销毁

		3.网页新闻列表页面
	*/

	/*
		1.Mounting/组件挂载相关：
			(1) componentWillMount
			组件将要挂载。在render之前执行,但仅执行一次,即使多次重复渲染该组件,或者改变了组件的state
			(2) componentDidMount
			组件已经挂载。在render之后执行,同一个组件重复渲染只执行一次

		2.Updating/组件更新相关：
			(1) componentWillReceiveProps(object nextProps)
			已加载组件收到新的props之前调用,注意组件初始化渲染时则不会执行
			(2) shouldComponentUpdate(object nextProps,object nextState)
			组件判断是否重新渲染时调用。该接口实际是在组件接收到新的 props 或者新的 state 的时候 会立即调用,然后通过
			(3) componentWillUpdate(object nextProps,object nextState)
			组件将要更新
			(4) componentDidUpdate(object prevProps,object prevState)
			组件已经更新

		3.Unmounting/组件移除相关：
			(1) componentWillUnmount
			在组件要被移除之前的时间点触发,可以利用该方法来执行一些必要的清理组件将要移除

		4.生命周期中与props和state相关：
			(1) getDefaultProps 设置props属性默认值
			(2) getInitialState 设置state属性初始值
	*/

	/*
		生命周期各阶段介绍
	*/
	var Demo = React.createClass({
		/*
			一、创建阶段
			流程：
				只调用getDefaultProps方法
		*/
		getDefaultProps:function() {
			// 在创建类的时候被调用,设置this.props的默认值
			console.log("getDefaultProps--创建组件,设置this.props默认值");
			return {}
		},

		/*
			二、实例化阶段
			流程：
				getInitialState
				componentWillMount
				render
				componentDidMount
		*/
		getInitialState:function() {
			// 设置this.state的默认值
			console.log("getInitialState--实例化组件,设置this.state的默认值");
			return null;
		},
		componentWillMount:function() {
			// 在render之前调用
			console.log("componentWillMount--组件将要挂载");
		},
		render:function() {
			// 渲染并返回一个虚拟DOM
			console.log("render--渲染组件");
			return <div>Hello React</div>
		},
		componentDidMount:function() {
			// 在render之后调用
			// 在该方法中,React会使用render方法返回的虚拟DOM对象创建真实的DOM结构
			// 可以在这个方法中读取DOM节点
			console.log("componentDidMount--组件已经挂载");
		},

		/*
			三、更新阶段
			流程：
				componentWillReceiveProps
				shouldComponentUpdate 如果返回值是false,后三个方法不执行
				componentWillUpdate
				render
				componentDidUpdate
		*/

		componentWillReceiveProps:function() {
			console.log("componentWillReceiveProps--已加载组件收到新的props之前调用");
		},
		shouldComponentUpdate:function() {
			// 是否需要更新
			console.log("shouldComponentUpdate--组件判断是否重新渲染时调用");
			return true;
		},
		componentWillUpdate:function() {
			console.log("componentWillUpdate--组件将要更新");
		},
		componentDidUpdate:function() {
			console.log("componentDidUpdate--组件已经更新");
		},
		/*
			四、销毁阶段
			流程：
				componentWillUnmount
		*/
		componentWillUnmount:function() {
			console.log("componentWillUnmount--在组件要被移除之前的时间点触发");
		}
	});

	// 第一次创建并加载组件
	ReactDOM.render(
		<Demo />,
		document.getElementById("container")
	);

	// 重新渲染组件
	ReactDOM.render(
		<Demo />,
		document.getElementById("container")
	);

	// 移除组件
	ReactDOM.unmountComponentAtNode(document.getElementById("container"));
</script>
</html>

 

7.index.android.js 详解

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

/*
  第一部分

  导入ReactNative包,导入ReactNative组件
  AppRegistry: JS运行所有ReactNative应用的入口。
  StyleSheet：ReactNative中使用的样式表,类似CSS样式表
  各种开发中需要使用的组件

  模板中使用的是ES6语法,ES5语法如下：
  let React = require("react-native");
  let {
    AppRegistry,
    StyleSheet,
    Text,
    View
  } = React;
  
  require函数,搜索目录加载文件
*/

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

/*
  第二部分

  创建ReactNative组件

  模板中使用的是ES6语法,
  render() {} 是ES6中的函数简写

  ES5语法如下：

  var Market = React.createClass({
    render:function(){
      return {};
    }
  });
*/

export default class Market extends Component { // 继承market这个类
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

/*
  第三部分

  StyleSheet.create创建样式实例
  在应用中只会被创建一次,不用每次在渲染周期中重新创建
*/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

/*
  第四部分

  注册入口组件

  AppRegistry：负责注册运行ReactNative应用程序的JavaScript入口
  registerComponent注册应用程序的入口组件。告知ReactNative哪一个组件被注册为应用的根容器

  第二个参数使用了ES6语法,箭头函数：
  () => Market
  返回的必须是定义的组件类的名字

  等价于
  function() {return Market}
*/

AppRegistry.registerComponent('Market', () => Market); // 注册

.

转载于:https://www.cnblogs.com/crazycode2/p/7140531.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值