React Hooks核心原理与实战

已于 2023-02-09 11:17:35 修改
阅读量2.4k 收藏 1
点赞数 1
文章标签： react.js javascript 前端
于 2022-12-26 11:49:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43075763/article/details/127383688
版权

React Hooks核心原理与实战

一、Hooks的优点

1.1 Hooks的含义

	Hooks 就是把某个目标结果钩到某个可能会变化的数据源或者事件源上，那么当被钩到的数据或事件发生变化时，产生这个目标结果的代码会重新执行，产生更新后的结果。它在一定程度上更好地体现了 React 的开发思想，即从 State => View 的函数式映射。
	![在这里插入图片描述](https://img-blog.csdnimg.cn/6ee28a321a1a4b78b8bbef7afcfc15ed.webp#pic_center)

1.2 优点

  1. 逻辑复用
  2. 有助于关注分离

二、常用的Hooks

2.1 useState

	useState:让函数具有维持状态的能力。
  1. useState(initialState) 的参数 initialState 是创建 state 的初始值，它可以是任意类型，比如数字、对象、数组等等。
  2. useState() 的返回值是一个有着两个元素的数组。第一个数组元素用来读取 state 的值，第二个则是用来设置这个 state 的值。
  3. 建议只有需要触发 UI 更新的状态才放到 state 里。
  4. 如果要创建多个 state，那么我们就需要多次调用 useState。比如要创建多个 state，使用的代码如下：
// 定义一个年龄的 state，初始值是 42
const [age, setAge] = useState(42);
// 定义一个水果的 state，初始值是 banana
const [fruit, setFruit] = useState('banana');
// 定一个一个数组 state，初始值是包含一个 todo 的数组
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

2.2 useEffect

useEffect：执行副作用， 在useEffect中执行的代码是不影响渲染出来的 UI 的。useEffect 是每次组件 render 完后判断依赖并执行的。用法如下

useEffect(callback, dependencies)
  1. 没有依赖项，则每次render后都会重新执行
  2. 空数组作为依赖项，则只在首次执行时触发，对应到 Class 组件就是 componentDidMount。例如：
useEffect(() => {
  // 组件首次渲染时执行，等价于 class 组件中的 componentDidMount
  console.log('did mount');
}, [])
  1. useEffect还允许返回一个函数，用于在组件销毁时做一些清理的操作。这个机制几乎等价于类组件中的componentWillUnmount。
// 设置一个 size 的 state 用于保存当前窗口尺寸
const [size, setSize] = useState({});
useEffect(() => {
  // 窗口大小变化事件处理函数
  const handler = () => {
    setSize(getSize());
  };
  // 监听 resize 事件
  window.addEventListener('resize', handler);
  
  // 返回一个 callback 在组件销毁时调用
  return () => {
    // 移除 resize 事件
    window.removeEventListener('resize', handler);
  };
}, []);
  1. 注意，在useEffect的callback要避免直接使用async/await，需要封装一下
useEffect(() => { // useEffect 的 callback 要避免直接的 async 函数，需要封装一下 
	const doAsync = async () => { // 当 id 发生变化时，将当前内容清楚以保持一致性 
	setBlogContent(null); // 发起请求获取数据 
	const res = await fetch(`/blog-content/${id}`); 
	// 将获取的数据放入 state 
	setBlogContent(await res.text()); }; 
	doAsync(); 
}, [id]);

2.3 useCallback：缓存回调函数

useCallBack的本质工作不是在依赖不变的情况下阻止函数创建，而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址。不论是否使用useCallBack都无法阻止组件render时函数的重新创建！！
每一个被useCallBack的函数都将被加入useCallBack内部的管理队列。而当我们大量使用useCallBack的时候，管理队列中的函数会非常之多，任何一个使用了useCallBack的组件重新渲染的时候都需要去便利useCallBack内部所有被管理的函数找到需要校验依赖是否改变的函数并进行校验。

在以上这个过程中，寻找指定函数需要性能，校验也需要性能。所以，滥用useCallBack不但不能阻止函数重新构建还会增加“寻找指定函数和校验依赖是否改变”这两个功能，为项目增添不必要的负担。

import {useCallBack,memo} from 'react';
/**父组件**/
const Parent = () => {
    const [parentState,setParentState] = useState(0);  //父组件的state
    // 未被useCallback包裹 需要传入子组件的函数
    // const toChildFun = () => {
    //    console.log("需要传入子组件的函数");    
    // }
    // 使用useCallback包裹
    const toChildFun = useCallback(() => {
	  console.log("需要传入子组件的函数");
	}, []);
    return (<div>
          <Button onClick={() => setParentState(val => val+1)}>
              点击我改变父组件中与Child组件无关的state
          </Button>
          //将父组件的函数传入子组件
          <Child fun={toChildFun}></Child>
    <div>)
}
/**被memo保护的子组件**/
const Child = memo(() => {
    console.log("我被打印了就说明子组件重新构建了")
    return <div><div>
})

总结

  1. useCallBack不要每个函数都包一下，否则就会变成反向优化，useCallBack本身就是需要一定性能的
  2. useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变
  3. React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术，具体点说React.memo()其实是通过校验Props中的数据的内存地址是否改变来决定组件是否重新渲染组件的一种技术。
  4. useCallBack需要配合React.memo使用

2.4 useMemo： 缓存计算结果

  1. 如果某个数据是通过其它数据计算得到的，那么只有当用到的数据，也就是依赖的数据发生变化的时候，才应该需要重新计算。
  2. 避免子组件的重复渲染
// 子组件
import React from "react";
interface ChildProps {
  name: { name: string; color: string };
  onClick: Function;
}
const ChildUseMemo = ({ name, onClick }: ChildProps): JSX.Element => {
  console.log("子组件?");
  return (
    <>
      <div style={{ color: name.color }}>
        我是一个子组件，父级传过来的数据：{name.name}
      </div>

      <button onClick={onClick.bind(null, "新的子组件name")}>改变name</button>
    </>
  );
};
// 建议useMemo配合这memo使用
export default React.memo(ChildUseMemo);

import React, { useState, useCallback, useMemo } from "react";
import ChildUseMemo from "./childMemo";
const Father: React.FC = () => {
  const [count, setCount] = useState(0);  
  const [name, setName] = useState("Child组件2");
  return (
    <div>
      <p>父组件：{count}</p>
      <ChildUseMemo
      	// 使用useMemo，返回一个和原本一样的对象，第二个参数是依赖性，当name发生改变的时候，才产生一个新的对象
        name={useMemo(
          () => ({
            name,
            color: name.indexOf("name") !== -1 ? "red" : "green"
          }),
          [name]
        )}
        // name={{ name, color: name.indexOf("name") !== -1 ? "red" : "green" }}
        // 这里使用了useCallback优化了传递给子组件的函数，只初始化一次函数，下次不产生新的函数
        onClick={useCallback((newName: string) => setName(newName), [])}
      ></ChildUseMemo>】
      <button onClick={(e)=> {setCount(count + 1)}>+</button>
    </div>
  );
};

export default Example;

总结

在子组件不需要父组件的值和函数的情况下，只需要使用memo函数包裹子组件即可。而在使用函数的情况，需要考虑有没有函数传递给子组件使用useCallback。而在值有所依赖的项，并且是对象和数组等值的时候而使用useMemo（当返回的是原始数据类型如字符串、数字、布尔值，就不要使用useMemo了）。不要盲目使用这些hooks。

2.5 useRef：在多次渲染之间共享数据

  1. useRef：保存数据（保存的数据一般和UI无关），因此当 ref 的值发生变化时，是不会触发组件的重新渲染的，这也是 useRef 区别于 useState 的地方。

import React, { useState, useCallback, useRef } from "react";

export default function Timer() {
  // 定义 time state 用于保存计时的累积时间
  const [time, setTime] = useState(0);

  // 定义 timer 这样一个容器用于在跨组件渲染之间保存一个变量
  const timer = useRef(null);

  // 开始计时的事件处理函数
  const handleStart = useCallback(() => {
    // 使用 current 属性设置 ref 的值
    timer.current = window.setInterval(() => {
      setTime((time) => time + 1);
    }, 100);
  }, []);

  // 暂停计时的事件处理函数
  const handlePause = useCallback(() => {
    // 使用 clearInterval 来停止计时
    window.clearInterval(timer.current);
    timer.current = null;
  }, []);

  return (
    <div>
      {time / 10} seconds.
      <br />
      <button onClick={handleStart}>Start</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}
  1. useRef可以保存某个 DOM 节点的引用
function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // current 属性指向了真实的 input 这个 DOM 节点，从而可以调用 focus 方法
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

2.6 useContext：定义全局状态

优点：
1. 提供了一个方便在多个组件之间共享数据的机制。context能够进行数据绑定，当Context的数据发生变化的时候，使用这个数据的组件就能够自动刷新。
缺点：
1. 会让调试变的困难，因为你很难跟踪某个 Context 的变化究竟是如何产生的。
2. 让组件的复用变得困难，因为一个组件如果使用了某个 Context，它就必须确保被用到的地方一定有这个 Context 的 Provider 在其父组件的路径上。


const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};
// 创建一个 Theme 的 Context
// ThemeContext拥有一个Provider属性
const ThemeContext = React.createContext(themes.light);
function App() {
  // 使用 state 来保存 theme 从而可以动态修改 
  const [theme, setTheme] = useState("light");
  // 切换 theme 的回调函数，当state的值修改后，动态的切换Context的值，当用到这个context的地方都会自动刷新 
  const toggleTheme = useCallback(() => { 
  	setTheme((theme) => (theme === "light" ? "dark" : "light")); 
  }, []);
  // 整个应用使用 ThemeContext.Provider 作为根组件
  return (
    // 使用 themes.dark 作为当前 Context 
    <ThemeContext.Provider value={themes.dark}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 在 Toolbar 组件中使用一个会使用 Theme 的 Button
function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// 在 Theme Button 中使用 useContext 来获取当前的主题
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{
      background: theme.background,
      color: theme.foreground
    }}>
      I am styled by theme context!
    </button>
  );
}

三、Hooks的使用规则

  1. 只能在函数组件的顶级作用域使用；

    Hooks不能在循环、条件判断或者嵌套函数内执行，而必须在顶层。同时Hooks在组件多次渲染之间，必须按顺序被执行。

  2. 只能在函数组件或其他Hooks中使用。如果一定要在Class组件中使用函数式组件，可以利用高级组件的模式，将Hooks封装成高阶组件，从而让类组件使用

import React from 'react';
import { useWindowSize } from '../hooks/useWindowSize';

export const withWindowSize = (Comp) => {
  return props => {
    const windowSize = useWindowSize();
    return <Comp windowSize={windowSize} {...props} />;
  };
};

import React from 'react';
import { withWindowSize } from './withWindowSize';

class MyComp {
  render() {
    const { windowSize } = this.props;
    // ...
  }
}

// 通过 withWindowSize 高阶组件给 MyComp 添加 windowSize 属性
export default withWindowSize(MyComp);

四、自定义Hooks

  • 优点：

    • 方便进行逻辑复用
    • 帮助分离

  • 定义：

    声明一个名字以use开头的函数。例如你创建了一个usexxx的函数，但是内部没有使用任何其他的hooks，那么这个函数就是一个普通函数，如果里面用了其他hooks，那么它就是一个hook

    // useCount.js
import { useState, useCallback }from 'react';
export default function useCounter() {
  // 定义 count 这个 state 用于保存当前数值
  const [count, setCount] = useState(0);
  // 实现加 1 的操作
  const increment = useCallback(() => setCount(count + 1), [count]);
  // 实现减 1 的操作
  const decrement = useCallback(() => setCount(count - 1), [count]);
  // 重置计数器
  const reset = useCallback(() => setCount(0), []);
  // 将业务逻辑的操作 export 出去供调用者使用
  return { count, increment, decrement, reset };
}

// index.js
import React from 'react';
import useCounter from './useCount.js'
function Counter() {
  // 调用自定义 Hook
  const { count, increment, decrement, reset } = useCounter();
  // 渲染 UI
  return (
    <div>
      <button onClick={decrement}> - </button>
      <p>{count}</p>
      <button onClick={increment}> + </button>
      <button onClick={reset}> reset </button>
    </div>
  );
}

五、函数组件设计模式

5.1 容器模式

把条件判断的结果放到两个组件之中，确保真正 render UI 的组件收到的所有属性都是有值的。

// 定义一个容器组件用于封装真正的 UserInfoModal
export default function UserInfoModalWrapper({
  visible,
  ...rest, // 使用 rest 获取除了 visible 之外的属性
}) {
  // 如果对话框不显示，则不 render 任何内容
  if (!visible) return null; 
  // 否则真正执行对话框的组件逻辑
  return <UserInfoModal visible {...rest} />;
}

5.2 render props模式重用UI逻辑

render props 就是把一个 render 函数作为属性传递给某个组件，由这个组件去执行这个函数从而 render 实际的内容。

// counterRender.jsx
import { useState, useCallback } from "react";

function CounterRenderProps({ children }) {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  const decrement = useCallback(() => {
    setCount(count - 1);
  }, [count]);

  return children({ count, increment, decrement });
}


// counterReanderExample.jsx
function CounterRenderPropsExample() {
  return (
    <CounterRenderProps>
      {({ count, increment, decrement }) => {
        return (
          <div>
            <button onClick={decrement}>-</button>
            <span>{count}</span>
            <button onClick={increment}>+</button>
          </div>
        );
      }}
    </CounterRenderProps>
  );
}

六、React事件处理

  1. Reac原生事件的原理：合成事件。

由于虚拟 DOM 的存在，在 React 中即使绑定一个事件到原生的 DOM 节点，事件也并不是绑定在对应的节点上，而是所有的事件都是绑定在根节点上。然后由 React 统一监听和管理，获取事件后再分发到具体的虚拟 DOM 节点上。
在 React 17 之前，所有的事件都是绑定在 document 上的，而从 React 17 开始，所有的事件都绑定在整个 App 上的根节点上，这主要是为了以后页面上可能存在多版本 React 的考虑。
具体来说，React 这么做的原因主要有两个。
第一，虚拟 DOM render 的时候， DOM 很可能还没有真实地 render 到页面上，所以无法绑定事件。
第二，React 可以屏蔽底层事件的细节，避免浏览器的兼容性问题。同时呢，对于 React Native 这种不是通过浏览器 render 的运行时，也能提供一致的 API。这里有一点我要多解释下。
那就是为什么事件绑定在某个根节点上，也能触发实际 DOM 节点的事件。我们知道，在浏览器的原生机制中，事件会从被触发的节点往父节点冒泡，然后沿着整个路径一直到根节点，所以根节点其实是可以收到所有的事件的。这也称之为浏览器事件的冒泡模型。

  1. 创建自定义事件
    a.原生事件是浏览器的机制；
    b.而自定义事件则是纯粹的组件自己的行为，本质是一种回调函数机制。
瑶梦玲珑骰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
React Redux 绑定与 React Hooks 和代理
06-08
有几个与此 repo 相关的项目。 这是它们的索引。 react-react-redux v5-alpha (this repo)：它有一个实验性的 react-redux 与 useMutableSource 的绑定。 它提供了 useTrackedState，它跟踪渲染中状态的使用，它最初是在这个 repo 中提出的。 react-tracked：这个项目是为 useTrackedState 提供 React Context。 v1.6 提供了 createTrackedSelector，它将从 useSelector 创建 useTrackedState。 react-redux #1503：将 useTrackedState 添加到官方 react-redux 库的拉取请求。 proxy-memoize：这是另一个与 React 无关的项目，但结合 useSelector，我们获得了类似 useTrackedState 的功能。 react-react-redux 使用 React Hooks 和 Proxy 绑定 React Redux 如果您正在寻找非 Redux 库，请访
React Hook组件在销毁的时候进行业务处理
吴小迪的博客
08-19 5万+
开发场景： 当我们使用react的hook组件的时候想要在组件销毁的时候做一些事件， 解决方案： 我们可以使用react的Effect hook， Effect hook的第一个参数可以return一个函数，这样就可以在组件销毁的时候触发它： 比如： 此代码为笔者盲敲的，如果有bug请在下方评论，笔者会紧急修复。 组件渲染的时候弹出的alert是正常的，笔者会在再下方说出解决方案 import...
一步步实现React-Hooks核心原理
helloworld1024fd的博客
10-13 873
React Hooks已经推出一段时间，大家应该比较熟悉，或者多多少少在项目中用过。写这篇文章简单分析一下Hooks的原理，并带大家实现一个简易版的Hooks。这篇写的比较细，相关的知识点都会解释，给大家刷新一下记忆。
浅析React Hooks原理
weixin_50964668的博客
08-22 2493
React Hooks 简介 React Hooks 是 React 16.8 以及之后版本的产物，React Hooks 就是一堆钩子函数，不同的钩子函数提供了不同的功能，React 通过这些钩子函数对函数型组件进行增强。Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。 践行代数效应 React 核心成员 Sebastian Markbåge (Hooks 的发明者)曾说：我们在 React
React Hooks系列之useImperativeHandle
热门推荐
Boboy
03-19 5万+
前言 react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。 优势： 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更...
React技术原理与代码开发实战：从Hooks到自定义Hooks
AI架构设计之禅
11-12 47
1.背景介绍 一、什么是React？ React是一个用于构建用户界面的JavaScript库，它诞生于2013年Facebook公司，主要用来创建可复用的组件。Facebook在2015年开源了React，并推出了React Native，用于开发移动端应用。由于Facebook是React的忠实粉
企业级React Hooks实战开发指南
前端人公众号作者
02-28 454
让你快速学习React Hooks
【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】
清图出版
07-27 788
本书通过一个可运行的预订应用程序为示例，详细介绍了各种 hook的使用场景和方法，同时在进阶内容中介绍了Suspense组件和 Concurrent模式下的实验性API。本书为书中展示的代码示例都提供了相应的链接，并对关键代码添加了注释，以帮助你理解和练习。相较于官方的文档，本书偏向实践，着眼于使用hook解决实际开发中的问题，除了讲解hook 如何使用，还解释了为何这样使用，能帮助你更容易地将这些理论知识应用到自身的项目中。
React Hooks 实战案例
程序边界
10-29 5591
在 React 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 React 特性；类组件则可以拥有状态和其他 React 特性，但是需要使用 class 语法来定义。React Hooks 就是在函数组件中引入了状态和其他 React 特性的工具。useState：在函数组件中添加状态，相当于在类组件中使用 this.state。
React Hooks用法与实战
lancun_web的博客
04-21 1354
React Hooks用法与实战
基于React Hooks的重构电商网站实战设计源码
04-05
本资源提供了一套基于React Hooks的重构电商网站实战设计源码，包含30个文件，其中包括16个JavaScript脚本文件，3个JSON配置文件，2个PNG图片文件，2个CSS样式文件，以及1个Git忽略文件，1个Markdown文档，1个图标...
React Hooks的深入理解与使用
10-17
主要介绍了React Hooks的深入理解与使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019 react入门至高阶实战，含react hooks
06-12
这是2019 react入门到高级新课程学习react，不仅能带来技术提升，同时提高开发效率和体验，更能带来好的就业机会...学习react高级特性，react hooks，以及整个react生态体系的构成和应用 。努力学习哟，带你精通react。
深度解析react中hooks的底层原理是啥？React架构fiber原理深度解析
为了WLB努力
03-13 1465
React Hooks 的底层原理是基于 React Fiber 架构的实现。React Fiber 是 React 的新的协调引擎，它的设计目标是等特性。Fiber 架构重新实现了 React 的调度算法，使得 React 可以更灵活地控制组件的渲染过程。我们都知道react框架的核心算法是diff算法的，其实 diff 算法的核心就是复用节点，通过一一对比也好，通过 map 查找也好，都是为了找到可复用的节点，移动过来。
React Hook的实现原理
kelly0721的博客
10-25 2323
Hook 这个单词的意思是"钩子"。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。React Hooks 就是那些钩子。你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。
React-Hooks源码深度解读
It_kc的博客
11-25 405
使用 hooks 几个月了。基本上所有类组件我都使用函数式组件来写。现在 react 社区的很多组件，都也开始支持hooks。大概了解了点重要的源码，做到知其然也知其所以然，那么在实际工作中使用他可以减少不必要的 bug，提高效率。
React-Hooks(附demo)
飞翔的熊blabla
04-14 413
转载于:https://blog.csdn.net/sinat_17775997/article/details/90369730 hooks诞生的原因 在react的今天和明天系列文章中，react开发人员介绍了class组件存在的三个问题。 逻辑复用 庞大的组件 难以理解的class 在class组件中通过HOC和render props中来实现组件的逻辑复用。这会带来一个问题，当我...
React Hooks 的原理
frontend_frank的博客
04-18 6151
React 是实现了组件的前端框架，它支持 class 和 function 两种形式的组件。class 组件是通过继承模版类（Component、PureComponent）的方式开发新组件的，继承是 class 本身的特性，它支持设置 state，会在 state 改变后重新渲染，可以重写一些父类的方法，这些方法会在 React 组件渲染的不同阶段调用，叫做生命周期函...
vue3中的reactive和ref
最新发布
weixin_43784341的博客
05-08 342
在Vue 3中，reactive和ref是两个常用的响应式API，用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用，而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法，并提供代码示例。
react hooks原理
08-26
React Hooks 的原理基于两个核心概念：闭包和钩子函数。 1. 闭包：在函数组件内部，可以通过闭包的方式引用外部作用域的变量。React Hooks 利用了闭包的特性，使得可以在函数组件内部存储和更新状态。 2. 钩子函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值