React 【 工作原理浅析】

最新推荐文章于 2024-08-27 08:46:36 发布
最新推荐文章于 2024-08-27 08:46:36 发布
阅读量924 收藏 7
点赞数 3
分类专栏： React 文章标签： javascript reactjs html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HiSen_CSDN/article/details/109539664
版权

前言

我们今天不分享 React 具体语法，组件， 通信 ，Ref ，Portals ，Context ，Hoc ，Hook 等等知识点，这些东西，大家细致的看一下官方文档都可以熟悉的进行开发任务，而今天我想谈谈 React 的工作原理 。

Lets Go !

什么是虚拟 Dom ?
什么是 Jsx ？
React 又是怎么工作的 ?
… …

我们来根据上边的三个问题，来对 React 进行一次浅度剖析 ！

什么是虚拟 Dom ?

Virtual DOM (虚拟Dom) 是一种编程概念 ，在这个概念里 ，UI 是以一种虚拟的结构形式保存在内存中，然后通过编译转换，变成真实Dom的一种技术。那它到底是什么呢 ?

对象 ，yes ，就是一个 Javascript 对象 ， 用这个 Javascript 对象来表示Dom信息和结构，当状态变更的时候，重新渲染这个对象结构，这个 Javascript 对象称为 Virtual DOM 。

为什么不直接操作DOM ？
很简单，因为DOM操作很慢，细小的改变都有可能导致页面重排与重绘，耗性能 ； 所以 ， 通过diff 算法对 Js 对象的操作可以批量的，最小化的执行 Dom 操作，从而提高性能 。diff 我们后期分析 。

什么是Jsx ?

你可以理解为是 React 独有的语法糖吧 ， 其实 Jsx 是 javascript + xml 的语法扩展 ， 但凡是遇到 { } 会被当做 Javascript 来执行，否则则是 xml 来执行 ；

为什么需要用 Jsx ?
也许是因为 Jsx 模板简洁，语法灵活吧，这一点我并不是太清楚 ；

原理：babel-loader 会预编译 Jsx 为 React.createElement(…) 函数执行 。

那React 又是怎么工作的呢 ?

从 Jsx 入手吧 ， 首先来我们看官网的一段代码 【少许加工了一下，为了看的更明白】

一个常规的 React 组件 【编译前】

class HelloMessage extends React.Component {
  render() {
    return (
      <div className="HelloClass" num="1">
        Hello {this.props.name}
        <span> is span</span>
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

这个常规的 React 组件，经过 babel-loader 【编译后】

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div", // div 类型
      { className: "HelloClass", num: "1" }, // div 的属性
      "Hello ",  // div 的内容
      this.props.name, // div 的内容 ， props 直接传递
      React.createElement( // 嵌套-继续
        "span",
        null,
        " is span"
      )
    );
  }
}

// 类组件也是转换成 `React.createElement(...)` 函数执行

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), 
document.getElementById('hello-example'));

看过代码，简单的分析过后，有没有发现，验证了我们上边说到的 Jsx 原理 ，经过babel-loader编译之后变成了React.createElement(...) 函数执行，如果有嵌套，则 React.createElement(...) 也嵌套

有没有发现，我们不管是编译前，还是编译后，有一句代码没有变，那就是 class HelloMessage extends React.Component 继承了 React.component 类，其实简单点说，就是继承父组件的 props 。

okey ! 到这里 ，我们可以有一个简单的结论，就是：

  1. React 组件需要继承 React.Component 类 class HelloMessage extends React.Component
  2. Jsx 语法经过 babel-loader 编译后会变成 React.createElement(...) 函数执行，多层则嵌套
  3. 通过 ReactDom.render 方法将元素挂载在页面上

我们来依次分析，并简单实现一下 ：

React.component
export default function Component (props) {
  this.props = props;
}
// 定义一个类组件与函数组件的标识 ， 源码是这样标识的，虽然不知道为啥没有写成布尔值
Component.prototype.isReactComponent = {};
React.createElement(…)

回到React.createElement(...) ， 那么 React.createElement(...) 到底接收几个参数，分别又是干什么的呢 ? 可以看出来:

  • 参数1：类型 （渲染的元素类型，组件类型 等）
  • 参数2：属性 （元素或者组件的属性，包含 className，id，自定义 props 属性等）
  • 参数3：子节点内容 可能有很多个子级

okey ， 综上所述 ，我们来手写一个 mini 的 React.createElement() 。
在写 React.createElement(...) 之前，我们首先要搞懂两个事情，传入什么参数 ，返回什么值 ，传入什么参数，上边我们已经分析了出来，经过babel-loader 编译后需要传入三个参数分别是 类型，属性，子节点 ，那返回什么呢 ？ 我们来看看createElement源码：

// 位置 : react/packages/react/src/ReactElement.js 348 行 
// 删掉了一些 if(_DEV_)的多余代码
export function createElement(type, config, children) {
  // 一系列声明
  let propName;
  const props = {};
  let key = null;
  let ref = null;
  let self = null;
  let source = null;
  // 如果传入了 config ， 对以上声明属性进行赋值
  if (config != null) {
    if (hasValidRef(config)) {
      ref = config.ref;
    }
    if (hasValidKey(config)) {
      key = '' + config.key;
    }
    self = config.__self === undefined ? null : config.__self;
    source = config.__source === undefined ? null : config.__source;
    for (propName in config) {
      if (
        hasOwnProperty.call(config, propName) &&
        !RESERVED_PROPS.hasOwnProperty(propName)
      ) {
        props[propName] = config[propName];
      }
    }
  }

  // children : (arguments.length - 2) 去除前两个参数的剩下所有参数
  // 最后将 children 并入 props 属性中
  const childrenLength = arguments.length - 2;
  if (childrenLength === 1) {
    props.children = children;
  } else if (childrenLength > 1) {
    const childArray = Array(childrenLength);
    for (let i = 0; i < childrenLength; i++) {
      childArray[i] = arguments[i + 2];
    }
    props.children = childArray; // children 返回一个数组
  }

  // 默认值
  if (type && type.defaultProps) {
    const defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }
  // 最后返回 ReactElement 这个对象 
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );

一目了然 ，需要返回一个 ReactElement 对象，包含type，key， ref ，self ， source , props 等 ，在这里我们主要为了了解 react 的工作原理 ， 所以择取重要的来简单实现一下，暂时抛弃 key，ref，self 来, 话不多说，上代码

/*
  三个参数 ， 暂时返回两个属性 type 和 props 
  type：创建类型 , 原生标签 , 文本 , 函数组件 , 类组件  等
  config: 属性
  例举属性如 : 函数组件：{className: "border", name: "函数组件", __source: {…}, __self: undefined }
  children： 子节点 ， 多少个就不知道了
*/
function createElement (type, config, ...children) {
  // 移除 config 暂时不用的 __source: {…}, __self: undefined 属性，方便控制台查看
  if (config) {
    delete config.__source;
    delete config.__self;
  }
  // 这里不考虑 key . ref . slef
  const props = {
    ...config,
    /*
		createTextNode 统一文本节点的数据结构，方便后续统一处理（child 直接就是文本内容）
		如果过是一个 object 说明子节点下还有子节点，依然利用 React.createEement 继续编译为
		{
			type:"类型"，
			props:{}
		}
		的形式， 重点：babel-loader 将 jsx 编译成 React.creteElement 嵌套的形式 
	*/  
    children: children.map(child =>
      typeof child === "object" ? child : createTextNode(child)
    )
  };
  console.log({type,props});
  return {
    type,
    props
  };
}

// 纯文本统一一下格式，跟其它元素一样的格式，方便处理，类型自定义为 "TEXT" 
function createTextNode (text) {
  return {
    type: "TEXT",
    props: {
      children: [],
      nodeValue: text
    }
  };
}

来看看最后的返回结果，我自己的样例
在这里插入图片描述

okey ! 一个 mini 版本的 React.createElement() 方法就这样实现了，好，我们接着往下走，是不是到了 render 方法了 , 走，再去看一看源码 ~~~

ReactDOM.render(···)

render 方法在 react-dom 模块里边

// 位置 ： react/packages/react-dom/src/client/ReactDOMLegacy.js 287 行
export function render(
  element: React$Element<any>, // react 元素
  container: Container, // 要放置的容器
  callback: ?Function, // 回调函数
) {
  invariant(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
  // ··· 这里返回调用了  legacyRenderSubtreeIntoContainer 方法 
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );
}

legacyRenderSubtreeIntoContainer 顺着继续往下走

// 位置 ： react/packages/react-dom/src/client/ReactDOMLegacy.js 175 行
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: Container,
  forceHydrate: boolean,
  callback: ?Function,
) {
  let root: RootType = (container._reactRootContainer: any);
  let fiberRoot;
  // 判断是不是第一次渲染该组件 ， 如果是第一次则创建，然后更新 dom , 否则直接进行 diff 更新 dom
  if (!root) {
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // 更新 dom 
    unbatchedUpdates(() => {
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  } else {
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // 更新 dom 
    updateContainer(children, fiberRoot, parentComponent, callback);
  }
  return getPublicRootInstance(fiberRoot);
}

看到这里我们心中依然有了一个简单的概念，那就是

  • 1，render 方法接收三个参数，react 元素，渲染 react 元素的容器 ，回调函数
  • 2，紧跟着调用 legacyRenderSubtreeIntoContainer 方法，创建 dom || 更新dom ，这里边牵扯到两个重点，也是 React 的核心知识点【fiber 数据结构 ， difff 算法】 我们后续来了解

今天在这里呢，我们以简洁的方式来实现一下 render 方法 :

创建一个 render 函数，做两件事儿（抛开回调函数来说）

/*
  vnode  jsx 经过 React.createElemnt 编译后的虚拟 dom  
  container 容器  
  步骤 1 :  vnode -> node  ， 虚拟 dom 转换为真实 dom 
  步骤 2 : container.appendChild(node);  ， 将真实 dom   挂载给容器 container 
*/
function render (vnode, container) {
  const node = createNode(vnode, container);
  node && container.appendChild(node);
}

实现一个 createNode 将虚拟 dom 转换为真实 dom

/*
  虚拟 dom 渲染成真实 dom  
  vnode 虚拟 dom 
  parentNode 父节点 , 也就是将虚拟dom挂载的对应父容器   
*/
function createNode (vnode, parentNode) {
  // 转换组合的最后真实 dom 节点
  let node = null; 
  /*
    type:"类型"
    props:参数和子节点 children 
  */
  const { type, props } = vnode;

  // todo 根据节点类型，生成 dom 节点 
  if (type === "TEXT") {
    // 文本节点 , type 上边自定义为 "TEXT" , nodeValue 是文本节点的内容值
    node = document.createTextNode("");
  } else if (typeof type === "string") {
    // 原生标签节点，type 类型为字符串 ：如 div , p , span 等 , 创建对应的标签元素
    node = document.createElement(type);
  } else if (typeof type === "function") {
    // 类组件与函数组件 ，type 类型为 function 
    // isReactComponent 自定义区分标识 ， Component 原型上定义 
    node = type.prototype.isReactComponent
      ? updateClassComponent(vnode, parentNode) // 类组件转换dom方法  
      : updateFunctionComponent(vnode, parentNode);  // 函数组件转换 dom 方法 
  }

  /*
  	子节点转换 dom ， 其实就是遍历子节点 ， 递归调用 render , 根据上边的逻辑继续转换
 	node : 当前节点，也就是当前子节点的父节点
    props.children : 子节点
    像类组件，函数组件一样，我们把它放置在外边
  */
  reconcileChildren(node, props.children);

  /*
	更新 dom
	node ： 真实 node 节点
	props :  props 属性和子节点属性以及子节点内容值
	将所有属性和子节点属性以及内容值解析渲染给node 
  */   
  updateNode(node, props);

  return node;
}

好了，一个简洁的 render 方法逻辑已经呈现在我们的眼前了，剩下的就是要一步步实现对应的转换逻辑了，我们一个一个来：

类组件

先模拟写一个类组件，继承了上边我们自定义的 React.component 类 ；

class ClassComponent extends Component {
  render () {
    return (
      <div className="border">
        ClassComponent - {this.props.name}
      </div>
    );
  }
}

解析类组件其实就是需要先实例化，然后再执行 render 返回对应的虚拟 dom 再通过上边 createNode 逻辑进行转换

function updateClassComponent (vnode, parentNode) {
  const { type, props } = vnode;
  const instance = new type(props);
  const vvnode = instance.render();
  const node = createNode(vvnode, parentNode);
  return node;
}
函数组件
function FunctionComponent (props) {
  return <div className="border">FunctionComponent-{props.name}</div>;
}

函数组件就比类组件更简单一些，直接执行函数，返回对应的虚拟 dom 再通过 createNode 逻辑进行转换

function updateFunctionComponent (vnode, parentNode) {
  const { type, props } = vnode;
  // console.log(vnode) // 打印出来看看 ， 创建的时候就决定了类型，原生标签，文本，函数，类，等   
  const vvnode = type(props); // 执行函数，返回子节点  
  const node = createNode(vvnode, parentNode);
  return node;
}

子节点
遍历子节点，递归执行 render 走到 createNode 转换逻辑 ；

function reconcileChildren (node, children) {
  for (let i = 0; i < children.length; i++) {
    const child = children[i];
    render(child, node);
  }
}
更新dom

更新 dom 节点 , nextVal => props 属性和子节点属性以及值 最后挂载给真实 dom node 节点 ，返回

function updateNode (node, nextVal) {
  Object.keys(nextVal)
    .filter(k => k !== "children")
    .forEach(k => {
      // console.log(node[k] + "----" + nextVal[k]);
      node[k] = nextVal[k];
    });
}
回炉 ~

再回到我们的官方实例， 是不是一个简单的工作原理已经了然于心了

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

mini-react-demo 入口

后续： 我们再来研究 fiber 数据结构 和 diff 算法 。

Hi-Sen
关注
专栏目录
React核心工作原理
xiaofeng123aazz的博客
09-28 1430
语法糖， React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
React 工作原理
慕天远的博客
12-19 2291
Reactjs 起源于Facebook内部项目，是一个用来构建用户界面的 javascript 库，相当于MVC架构中的V层框架，与市面上其他框架不同的是，React 把每一个组件当成了一个状态机，组件内部通过state来维护组件状态的变化，当组件的状态发生变化时，React通过虚拟DOM技术来增量并且高效的更新真实DOM。本文将对React 的这些特点进行简单的介绍。 一个简单的React组件...
react工作原理
热门推荐
https://www.xiaohongshu.com/user/profile/5f3543150000000001002b2e
05-02 1万+
现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual&amp;amp;amp;nbsp;DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ &amp;amp;amp;nbsp;一、ReactJS简介 ...
React技术揭秘教程
最新发布
gitblog_00617的博客
08-27 266
React技术揭秘教程 just-react「React技术揭秘」 一本自顶向下的React源码分析书项目地址:https://gitcode.com/gh_mirrors/ju/just-react 项目介绍 「React技术揭秘」是一本自顶向下的React源码分析书，旨在帮助开发者深入理解React的工作原理和内部机制。该项目由BetaSu创建，提供了对React核心概念和源码的详细解析，...
React（二）原理
木馏雕金
10-13 1119
三 React主要原理      Reactjs一个用来构建用户界面的JavaScript库,相当于MVC架构中的V层框架，与市面上其他框架不同的，React把每个组件当成了一个状态机，组件内部通过state来维护组件状态的变化，当组件的状态发生变化时，React通过虚拟DOM技术来增量并高效的更新真实的DOM。 1.虚拟DOM （Virtual DOM）        在前端开发的过程
React工作原理
weixin_30655219的博客
05-18 85
React 核心技术 —— 虚拟DOM（Virtual DOM） 在前端开发的过程中，我们经常会做的一件事就是将变化的数据实时更新到UI上，这时就需要对DOM进行更新和重新渲染，而频繁的DOM操作通常是性能瓶颈产生的原因之一，有时候我们会遇到这样一种尴尬的情况：比如有一个列表数据，当用户执行刷新操作时，Ajax会重新从后台请求数据，即使新请求的数据和上次完全相同，DOM也会被全部更新一遍并进行重...
React Native 原理浅析
iMingzhen的博客
05-11 989
了解React native的架构能更好的回答面试官的问题 😂😂 有利于使用原生平台提供的更多的功能和API，或者接入第三方的库和服务，比如接入阿里的服务。提高代码的性能还有debug，毕竟知道的越多当然更容易知道问题为什么出现了
浅析React Hooks原理
weixin_50964668的博客
08-22 2696
React Hooks 简介 React Hooks 是 React 16.8 以及之后版本的产物，React Hooks 就是一堆钩子函数，不同的钩子函数提供了不同的功能，React 通过这些钩子函数对函数型组件进行增强。Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。 践行代数效应 React 核心成员 Sebastian Markbåge (Hooks 的发明者)曾说：我们在 React
React Native Hook浅析——重头戏useEffect
lk007007sclk1的博客
05-23 1393
前情提要《React Native Hook浅析——state处理》 请先忘记所有class组件相关的知识，忘记生命周期回调函数，忘记this，忘记this.state，忘记一层层向下传递的props，然后，开干。 rendering（渲染） 函数组件渲染是由state、props改变引发的，结合上一小节，我们可以知道当state或者props变化时，会调用React的render方法发起渲染，对于函数式组件，我们可以理解成重新执行函数组件的内容（箭头函数里的代码）。 基于此，组件每一次渲染都会有自己的pr
react代码拆分之react loadable源码浅析
杨小事er的专栏
05-03 1645
在做个人网站的js拆分打包时，最终的解决方案是看着网上的教程手写了Bundle高阶组件来动态加载需要的组件。对于它的运用也仅仅是把路由拆开，访问不同的顶级路由进行动态加载，并没有对其原理进行深入的理解。直到看到了React 的加载 loading 库——react-loadable。react-loadable是什么？Loadable提倡基于组件分割代码。 route-centric code s...
浅析 React / Vue 跨端渲染原理与实现
明月如霜丶
10-10 538
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生，RN 与 Weex 的跨界也常为我们所津津乐道。UI 框架在实现这样的跨端渲染时需要做哪些工作，其技术方案能否借鉴乃至应用到我们自己的项目中呢？这就是本文所希望分享的主题。 概念简介 什么是跨端渲染呢？这里的「端」其实并不局限在传统的 PC 端和移动端，而是抽象的 渲染层 (Renderer) 。渲染层并不局限在浏览器 DOM 和...
React原理
changjiangshui的博客
09-22 536
1.虚拟 DOM：React 采用一个虚拟的 DOM 树来代替实际的 DOM 树，通过比较新旧两棵虚拟 DOM 的差异，来最小化 DOM 操作，从而提高性能。2.组件：React 将页面分割成若干个组件，每个组件都拥有自己的状态和生命周期，并且可以嵌套使用，从而构建复杂的页面。3.单向数据流：React 的数据流动是单向的，即数据只能从父组件传递到子组件，从而避免了复杂的数据依赖关系。5.状态提升：当多个组件需要共享状态时，React 通过将共享状态提升到它们的共同父组件中来实现数据的共享。
React 的 diff 算法
飞鸟Blog
11-02 2945
原文: http://calendar.perfplanet.com/2013/diff/ 作者: Christopher Chedeau React 是 Facebook 开发的构建用户界面的类库. 它从设计之初就将性能作为重点. 这篇文章我展示 diff 算法和渲染过程怎样工作, 你可以借鉴优化自己的应用. Diff 算法 在深入实现的细节之前, 需要了解一下 Re
React的原理
社会人
01-12 1246
1.在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每
react原理解析
qq_27314517的博客
02-28 2348
这里写目录标题函数式编程vdom 和diffjsx本质合成事件为什么要合成事件机制setState batchUpdate多次的修改state的时候,有时合并(对象形式),有时不合并(函数形式)在setState的时候,改变state有时异步(普通使用),有时同步(setTimeout,DOM事件)setState 主流程batchUpdate机制transation (事务)机制组件渲染过程jsx如何渲染为页面setState之后如何更新页面fiber如何进行优化性能 函数式编程 一种编程范式,概念比较
react的理解和工作原理
Jasmine_jieer的博客
08-18 1171
react的理解和工作原理
combobox 如何 不触发 onchange事件_React 事件系统工作原理
weixin_39660922的博客
12-24 372
本文作者: 江水[1]前言React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。在 React事件介绍[2] 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。合成事件对象很有意思，一开...
React的工作原理
weixin_70208391的博客
08-29 341
当浏览器渲染一个网页时，React 是一个用于构建用户界面的JavaScript库，它通过一种称为"Virtual DOM"的机制来优化界面更新的过程。React将用户界面划分为多个独立的组件，每个组件可以包含自己的状态（数据）和逻辑，这有助于代码的可维护性和重用性。在React中，每个组件都有一个对应的虚拟DOM树，它是一个轻量级的内存表示，类似于实际DOM树的映射。当组件的状态发生变化时，React并不直接更新实际DOM，而是通过比较新旧虚拟DOM树来确定需要更新的部分。
一看就懂的ReactJs入门教程-精华版
aa124413278的博客
05-08 3332
　　现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（VirtualDOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 Jav...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值