React Hooks 原理 #26

brickspert · 2019-04-14T08:15:44Z

前言

目前，Hooks 应该是 React 中最火的概念了，在阅读这篇文章之前，希望你已经了解了基本的 Hooks 用法。

在使用 Hooks 的时候，我们可能会有很多疑惑

为什么只能在函数最外层调用 Hook，不要在循环、条件判断或者子函数中调用？
为什么 useEffect 第二个参数是空数组，就相当于 ComponentDidMount ，只会执行一次？
自定义的 Hook 是如何影响使用它的函数组件的？
Capture Value 特性是如何产生的？
......

这篇文章我们不会讲解 Hooks 的概念和用法，而是会带你从零实现一个 tiny hooks，知其然知其所以然。

useState

最简单的 useState 用法是这样的：

demo1: https://codesandbox.io/s/v0nqm309q3

function Counter() {
  var [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <Button onClick={() => { setCount(count + 1); }}>
        点击
      </Button>
    </div>
  );
}

基于 useState 的用法，我们尝试着自己实现一个 useState：

demo2：https://codesandbox.io/s/myy5qvoxpp

function useState(initialValue) {
  var state = initialValue;
  function setState(newState) {
    state = newState;
    render();
  }
  return [state, setState];
}

这时我们发现，点击 Button 的时候，count 并不会变化，为什么呢？我们没有存储 state，每次渲染 Counter 组件的时候，state 都是新重置的。

自然我们就能想到，把 state 提取出来，存在 useState 外面。

demo3：https://codesandbox.io/s/q9wq6w5k3w

var _state; // 把 state 存储在外面

function useState(initialValue) {
  _state = _state || initialValue; // 如果没有 _state，说明是第一次执行，把 initialValue 复制给它
  function setState(newState) {
    _state = newState;
    render();
  }
  return [_state, setState];
}

到目前为止，我们实现了一个可以工作的 useState，至少现在来看没啥问题。

接下来，让我们看看 useEffect 是怎么实现的。

useEffect

useEffect 是另外一个基础的 Hook，用来处理副作用，最简单的用法是这样的：

demo4：https://codesandbox.io/s/93jp55qyp4

 useEffect(() => {
    console.log(count);
 }, [count]);

我们知道 useEffect 有几个特点：

有两个参数 callback 和 dependencies 数组
如果 dependencies 不存在，那么 callback 每次 render 都会执行
如果 dependencies 存在，只有当它发生了变化， callback 才会执行

我们来实现一个 useEffect

demo5：https://codesandbox.io/s/3kv3zlvzl1

let _deps; // _deps 记录 useEffect 上一次的 依赖

function useEffect(callback, depArray) {
  const hasNoDeps = !depArray; // 如果 dependencies 不存在
  const hasChangedDeps = _deps
    ? !depArray.every((el, i) => el === _deps[i]) // 两次的 dependencies 是否完全相等
    : true;
  /* 如果 dependencies 不存在，或者 dependencies 有变化*/
  if (hasNoDeps || hasChangedDeps) {
    callback();
    _deps = depArray;
  }
}

到这里，我们又实现了一个可以工作的 useEffect，似乎没有那么难。

此时我们应该可以解答一个问题：

Q：为什么第二个参数是空数组，相当于 componentDidMount ？

A：因为依赖一直不变化，callback 不会二次执行。

Not Magic, just Arrays

到现在为止，我们已经实现了可以工作的 useState 和 useEffect。但是有一个很大的问题：它俩都只能使用一次，因为只有一个 _state 和一个 _deps。比如

const [count, setCount] = useState(0);
const [username, setUsername] = useState('fan');

count 和 username 永远是相等的，因为他们共用了一个 _state，并没有地方能分别存储两个值。我们需要可以存储多个 _state 和 _deps。

如《React hooks: not magic, just arrays》所写，我们可以使用数组，来解决 Hooks 的复用问题。

demo6：https://codesandbox.io/s/50ww35vkzl

代码关键在于：

初次渲染的时候，按照 useState，useEffect 的顺序，把 state，deps 等按顺序塞到 memoizedState 数组中。
更新的时候，按照顺序，从 memoizedState 中把上次记录的值拿出来。
如果还是不清楚，可以看下面的图。

let memoizedState = []; // hooks 存放在这个数组
let cursor = 0; // 当前 memoizedState 下标

function useState(initialValue) {
  memoizedState[cursor] = memoizedState[cursor] || initialValue;
  const currentCursor = cursor;
  function setState(newState) {
    memoizedState[currentCursor] = newState;
    render();
  }
  return [memoizedState[cursor++], setState]; // 返回当前 state，并把 cursor 加 1
}

function useEffect(callback, depArray) {
  const hasNoDeps = !depArray;
  const deps = memoizedState[cursor];
  const hasChangedDeps = deps
    ? !depArray.every((el, i) => el === deps[i])
    : true;
  if (hasNoDeps || hasChangedDeps) {
    callback();
    memoizedState[cursor] = depArray;
  }
  cursor++;
}

我们用图来描述 memoizedState 及 cursor 变化的过程。

1. 初始化

2. 初次渲染

3. 事件触发

4. Re Render

到这里，我们实现了一个可以任意复用的 useState 和 useEffect。

同时，也可以解答几个问题：

Q：为什么只能在函数最外层调用 Hook？为什么不要在循环、条件判断或者子函数中调用。

A：memoizedState 数组是按 hook定义的顺序来放置数据的，如果 hook 顺序变化，memoizedState 并不会感知到。

Q：自定义的 Hook 是如何影响使用它的函数组件的？

A：共享同一个 memoizedState，共享同一个顺序。

Q：“Capture Value” 特性是如何产生的？

A：每一次 ReRender 的时候，都是重新去执行函数组件了，对于之前已经执行过的函数组件，并不会做任何操作。

真正的 React 实现

虽然我们用数组基本实现了一个可用的 Hooks，了解了 Hooks 的原理，但在 React 中，实现方式却有一些差异的。

React 中是通过类似单链表的形式来代替数组的。通过 next 按顺序串联所有的 hook。

type Hooks = {
	memoizedState: any, // 指向当前渲染节点 Fiber
  baseState: any, // 初始化 initialState， 已经每次 dispatch 之后 newState
  baseUpdate: Update<any> | null,// 当前需要更新的 Update ，每次更新完之后，会赋值上一个 update，方便 react 在渲染错误的边缘，数据回溯
  queue: UpdateQueue<any> | null,// UpdateQueue 通过
  next: Hook | null, // link 到下一个 hooks，通过 next 串联每一 hooks
}
 
type Effect = {
  tag: HookEffectTag, // effectTag 标记当前 hook 作用在 life-cycles 的哪一个阶段
  create: () => mixed, // 初始化 callback
  destroy: (() => mixed) | null, // 卸载 callback
  deps: Array<mixed> | null,
  next: Effect, // 同上 
};

memoizedState，cursor 是存在哪里的？如何和每个函数组件一一对应的？

我们知道，react 会生成一棵组件树（或Fiber 单链表），树中每个节点对应了一个组件，hooks 的数据就作为组件的一个信息，存储在这些节点上，伴随组件一起出生，一起死亡。

参考文章

❤️感谢大家

关注公众号「前端技术砖家」，拉你进交流群，大家一起共同交流和进步。

The text was updated successfully, but these errors were encountered:

liang520 · 2019-04-16T11:11:52Z

为什么 state声明在外面，点击的时候，view才变化，没想明白 @brickspert

brickspert · 2019-04-16T11:41:32Z

@liang520 如果放在 useState 里面，是不是重新渲染每次都会重新调用 useState 重置掉？

liang520 · 2019-04-16T11:43:09Z

@brickspert 看明白了

ChinDer · 2019-08-05T01:40:30Z

memoizedState => memorizedState

KayneWang · 2019-08-07T14:22:27Z

砖家写的文章依旧简单明了～

masterx0 · 2019-08-13T11:16:58Z

很清晰明了了

watsonnnnn · 2019-08-14T02:04:50Z

除了用变量存state还有别的吗

BurnhamZhang · 2019-09-02T09:10:24Z

当我以为我会用hook的时候 useEffect 内的 setInterval 把我打蒙了，闭包是啥时候出现的都没看懂

yushengling · 2019-09-11T11:28:29Z

一直关注,一直学习,感谢你的陪伴,可以借鉴学习React Hooks 入门教程http://www.ruanyifeng.com/blog/2019/09/react-hooks.html

kakeiChen · 2019-10-08T05:51:47Z

follow

rtxu · 2019-10-16T08:02:14Z

赞，会用与会实现，理解的深度就是不一样

JuneScut · 2019-10-23T01:38:44Z

为什么 state声明在外面，点击的时候，view才变化，没想明白 @brickspert

不然的话state只是一个useState函数里边的局部变量，每次执行都会重新初始化为0呀

AfterThreeYears · 2019-10-23T05:50:36Z

是否需要在setState函数中把cursor重置为0，在rerender的时候才能按照hook在组件函数内的书写顺序从0依次获取memoizedState中的值？

function setState(newState) {
  memoizedState[currentCursor] = newState;
  // reset
  cursor = 0;
  render();
}

brickspert · 2019-10-23T05:57:38Z

是否需要在setState函数中把cursor重置为0，在rerender的时候才能按照hook在组件函数内的书写顺序从0依次获取memoizedState中的值？
function setState(newState) {
  memoizedState[currentCursor] = newState;
  // reset
  cursor = 0;
  render();
}

例子中在 render() 里面把 cursor 置为 0 了。

chnliquan · 2019-10-28T10:03:43Z

这个事件触发的时候应该下标应该是 1 吧

BigKongfuPanda · 2019-11-01T15:15:38Z

这个事件触发的时候应该下标应该是 1 吧

我也觉得此时的cursor不应该为0，为1的是currentCursor 这个局部变量，用来获取userName这个state在数组中的位置

FrancisShi · 2019-11-04T03:27:55Z

这个事件触发的时候应该下标应该是 1 吧

我也觉得此时的cursor不应该为0，为1的是currentCursor 这个局部变量，用来获取userName这个state在数组中的位置

同意。随处可见的闭包啊～

brickspert · 2019-11-06T01:34:08Z

这个事件触发的时候应该下标应该是 1 吧

为什么是 1 呢？每次都是从 0 开始重新执行的。可以在这个例子中试试呢：
https://codesandbox.io/s/50ww35vkzl

lddlww · 2019-11-12T13:04:13Z

请问，这个useState在多个组件中引入，彼此之间会不会有影响（全局只有一个memoizedState ）？

brickspert · 2019-11-12T13:14:21Z

请问，这个useState在多个组件中引入，彼此之间会不会有影响（全局只有一个memoizedState ）？

这个例子里面会。因为共用了一个 memoizedState。
但是在 React 中，是把数据存在 fiber node 上的。也就是，每个组件都有自己的 memoizedState.

lddlww · 2019-11-12T15:51:13Z

@brickspert 多谢多谢

lhz960904 · 2019-11-16T07:18:18Z

棒！ _state = _state | initialValue 应该是 _state = _state || initialValue

brickspert · 2019-11-16T14:24:59Z

棒！ _state = _state | initialValue 应该是 _state = _state || initialValue

感谢~，已修正。

chnliquan · 2019-12-05T02:09:38Z

这个事件触发的时候应该下标应该是 1 吧

为什么是 1 呢？每次都是从 0 开始重新执行的。可以在这个例子中试试呢：
https://codesandbox.io/s/50ww35vkzl

我看你代码是 render 的时候才修改 cursor 为 0 吧，事件触发的时候，当时的 currentCursor 是 1，这时就会改变 memorizState[1] 的值

wanghsinche · 2019-12-25T10:09:00Z

memoizedState，cursor 是存在哪里的？如何和每个函数组件一一对应的？

我们知道，react 会生成一棵组件树（或Fiber 单链表），树中每个节点对应了一个组件，hooks 的数据就作为组件的一个信息，存储在这些节点上，伴随组件一起出生，一起死亡。

这句话我不能理解，博主能引用源代码来证明么？
就我理解，函数式组件既然已经是stateless，就不会有所谓出生，死亡等生命周期了。我更倾向于react的hook信息，即整个hook的链表是一个全局变量。

lx70770 · 2020-08-06T01:10:26Z

最开始有个疑问：为什么 useState 的 memoizedState 要是数组？如果是对象多好，这样就能一一对应上了，就可以突破 hooks 只能写在函数组件顶层的限制了。

看到最后，发现其实是个链表，并不是简单的数组呀。。。所以我猜测为什么 memoizedState 不用 key value 这种方式存的原因是出于性能考虑吗？（也就是 key value 形式的数据结构并没有链表形式的快）

最近面试遇到这个问题，大致了解了一下，链表是在内存里申请了一块连续的空间，而map是随机分散存储的，所以链表的查询会更快一些，一般大佬们的程序都会考虑要结合硬件层面来设计的

BoBoooooo · 2020-10-25T06:39:34Z

受教了

feibi · 2020-11-03T08:26:42Z

最开始有个疑问：为什么 useState 的 memoizedState 要是数组？如果是对象多好，这样就能一一对应上了，就可以突破 hooks 只能写在函数组件顶层的限制了。
看到最后，发现其实是个链表，并不是简单的数组呀。。。所以我猜测为什么 memoizedState 不用 key value 这种方式存的原因是出于性能考虑吗？（也就是 key value 形式的数据结构并没有链表形式的快）

最近面试遇到这个问题，大致了解了一下，链表是在内存里申请了一块连续的空间，而map是随机分散存储的，所以链表的查询会更快一些，一般大佬们的程序都会考虑要结合硬件层面来设计的

链表是动态分配内存，是非连续的。数组才是连续的，且是静态分配的

aaronlam · 2020-11-03T16:14:13Z

最开始有个疑问：为什么 useState 的 memoizedState 要是数组？如果是对象多好，这样就能一一对应上了，就可以突破 hooks 只能写在函数组件顶层的限制了。
看到最后，发现其实是个链表，并不是简单的数组呀。。。所以我猜测为什么 memoizedState 不用 key value 这种方式存的原因是出于性能考虑吗？（也就是 key value 形式的数据结构并没有链表形式的快）

最近面试遇到这个问题，大致了解了一下，链表是在内存里申请了一块连续的空间，而map是随机分散存储的，所以链表的查询会更快一些，一般大佬们的程序都会考虑要结合硬件层面来设计的

链表是动态分配内存，是非连续的。数组才是连续的，且是静态分配的

貌似JS底层的数组也有分快数组和慢数组，慢数组用的是hash表来管理数组，也就是说其数组的内存应该不是连续的？

Lanchouchou · 2020-11-15T14:13:39Z

最开始有个疑问：为什么 useState 的 memoizedState 要是数组？如果是对象多好，这样就能一一对应上了，就可以突破 hooks 只能写在函数组件顶层的限制了。
看到最后，发现其实是个链表，并不是简单的数组呀。。。所以我猜测为什么 memoizedState 不用 key value 这种方式存的原因是出于性能考虑吗？（也就是 key value 形式的数据结构并没有链表形式的快）

最近面试遇到这个问题，大致了解了一下，链表是在内存里申请了一块连续的空间，而map是随机分散存储的，所以链表的查询会更快一些，一般大佬们的程序都会考虑要结合硬件层面来设计的

链表是动态分配内存，是非连续的。数组才是连续的，且是静态分配的

应该是使用key value 会有key冲突的问题需要解决吧

zhoucumt · 2020-12-22T00:47:59Z

···
let _deps; // _deps 记录 useEffect 上一次的依赖

function useEffect(callback, depArray) {
const hasNoDeps = !depArray; // 如果 dependencies 不存在
const hasChangedDeps = _deps
? !depArray.every((el, i) => el === _deps[i]) // 两次的 dependencies 是否完全相等
: true;
/* 如果 dependencies 不存在，或者 dependencies 有变化*/
if (hasNoDeps || hasChangedDeps) {
callback();
_deps = depArray;
}
}
···
depArray为空数组的时候，const hasNoDeps = !depArray;的值不一直是true,那么每次都callback都会执行吗？

aaronlam · 2020-12-22T17:31:26Z

···
let _deps; // _deps 记录 useEffect 上一次的依赖

function useEffect(callback, depArray) {
const hasNoDeps = !depArray; // 如果 dependencies 不存在
const hasChangedDeps = _deps
? !depArray.every((el, i) => el === _deps[i]) // 两次的 dependencies 是否完全相等
: true;
/* 如果 dependencies 不存在，或者 dependencies 有变化*/
if (hasNoDeps || hasChangedDeps) {
callback();
_deps = depArray;
}
}
···
depArray为空数组的时候，const hasNoDeps = !depArray;的值不一直是true,那么每次都callback都会执行吗？

空数组的话，!depArray 应该是 false 呀。

cll123456 · 2021-04-03T11:44:43Z

厉害，学习了

pfan8 · 2021-05-17T08:20:17Z

佩服！看了很多个讲解 hooks 原理的，讲得这么清晰易懂的就是🧱家这

xianyulli · 2021-07-14T01:40:27Z

为什么 state声明在外面，点击的时候，view才变化，没想明白 @brickspert

写在里面函数每次执行都会重置

MrLeihe · 2021-09-02T09:32:05Z

···
let _deps; // _deps 记录 useEffect 上一次的依赖
function useEffect(callback, depArray) {
const hasNoDeps = !depArray; // 如果 dependencies 不存在
const hasChangedDeps = _deps
? !depArray.every((el, i) => el === _deps[i]) // 两次的 dependencies 是否完全相等
: true;
/* 如果 dependencies 不存在，或者 dependencies 有变化*/
if (hasNoDeps || hasChangedDeps) {
callback();
_deps = depArray;
}
}
···
depArray为空数组的时候，const hasNoDeps = !depArray;的值不一直是true,那么每次都callback都会执行吗？

空数组的话，!depArray 应该是 false 呀。

就是要 false 呀

wizardpisces · 2021-10-14T11:11:50Z

全量 rerender 确实不会影响到 hooks 游标 index；
局部update如何确保index对应关系 (我理解这里只触发了部分hooks的，那游标是不是错乱了)？
还是在全量render的时候就跟vnode绑定，到更新的时候再动态重置游标？

更新(2021-10-15)：

可能是实现上每个组件都绑定一个hooks数组，只需要在每个组件运行的时候维护一个独立游标即可，所以不存在全局的hookIndex紊乱问题

更新(2021-12-3)：

依照上面的思路实现了一个简单版本的Hooks（可以局部更新）

Cheering-baby · 2021-12-03T07:53:13Z

有毛病，如果我把state变成undefined,null,0, false这些的时候就会重置成initialState

creampnx-x · 2021-12-25T17:01:45Z

有毛病，如果我把state变成undefined,null,0, false这些的时候就会重置成initialState

确实其实 useState() 在上下文中只有初始化hooks才会用吧，每一次初始化都是新的对象，state存在与否没有影响。

wizardpisces · 2021-12-27T01:44:58Z

有毛病，如果我把state变成undefined,null,0, false这些的时候就会重置成initialState

确实其实 useState() 在上下文中只有初始化hooks才会用吧，每一次初始化都是新的对象，state存在与否没有影响。

没毛病，immutable模式

unbro · 2022-02-09T06:36:08Z

一个组件内，react 是如何抓区和解析多个 useEffect 的

wizardpisces · 2022-02-09T06:46:53Z

一个组件内，react 是如何抓区和解析多个 useEffect 的

可以理解成每个组件内都会关联一个hooks队列

unbro · 2022-02-09T09:32:49Z

一个组件内，react 是如何抓区和解析多个 useEffect 的

可以理解成每个组件内都会关联一个hooks队列

请问能讲下这块的工作原理吗

wizardpisces · 2022-02-09T10:35:09Z

unbro

楼主讲的算比较清楚了，具体实现可以看源码，啃不动的可以试试看这个简单的实现

yueyueyaofaguang · 2022-09-14T01:00:13Z

对这里不是很理解
Q：“Capture Value” 特性是如何产生的？
A：每一次 ReRender 的时候，都是重新去执行函数组件了，对于之前已经执行过的函数组件，并不会做任何操作。

困惑点在于:虽然每一次都会进行ReRender，但是如果都会从同一个memoizedState中取值的话，应该是能够获取到最新的值，不会存在“Capture Value” 特性

拜托大佬解惑～

wozien · 2022-10-14T15:22:11Z

为什么 state声明在外面，点击的时候，view才变化，没想明白 @brickspert

因为每次重新render 的时候会重新执行 useState(0)呀，如果不放在外面的话，返回的state还是0

wongfugui · 2024-08-19T08:58:58Z

最开始有个疑问：为什么 useState 的 memoizedState 要是数组？如果是对象多好，这样就能一一对应上了，就可以突破 hooks 只能写在函数组件顶层的限制了。
看到最后，发现其实是个链表，并不是简单的数组呀。。。所以我猜测为什么 memoizedState 不用 key value 这种方式存的原因是出于性能考虑吗？（也就是 key value 形式的数据结构并没有链表形式的快）

最近面试遇到这个问题，大致了解了一下，链表是在内存里申请了一块连续的空间，而map是随机分散存储的，所以链表的查询会更快一些，一般大佬们的程序都会考虑要结合硬件层面来设计的

链表是动态分配内存，是非连续的。数组才是连续的，且是静态分配的

想问一下，我记得js的数组并不需要连续空间吧？

yushengling mentioned this issue Sep 11, 2019

React vue angular npm 常见命令版本查看 yushengling/webBLog#1

Open

george-wq mentioned this issue Sep 25, 2019

React Hooks george-wq/StudyNotes#15

Open

pfan123 mentioned this issue Dec 3, 2019

React Hooks pfan123/Articles#51

Open

ceerqingting mentioned this issue Dec 3, 2019

React组件复用 ceerqingting/issueBlog#31

Open

chemdemo mentioned this issue Dec 15, 2019

React Hooks完全上手指南 chemdemo/chemdemo.github.io#15

Open

billfeller mentioned this issue Aug 31, 2020

Umi Hooks - 助力拥抱 React Hooks billfeller/blog#13

Open

urnwangss mentioned this issue Jan 28, 2021

Hooks入门 urnwangss/blog#1

Open

lkdghzh mentioned this issue May 18, 2021

hooks解决的痛点 lkdghzh/blog#28

Open

YangW0223 mentioned this issue Jul 27, 2021

面试 YangW0223/awesome#1

Open

YangW0223 mentioned this issue Aug 26, 2021

React 实现原理 YangW0223/awesome#2

Open

MrSeaWave mentioned this issue Sep 14, 2021

为什么 useState、useEffect 不能写在 if 里 z-memo/interview#148

Open

HCLacids mentioned this issue Feb 28, 2022

React：hooks有哪些？ HCLacids/resume#27

Open

gaojihao mentioned this issue Dec 20, 2022

js基础 gaojihao/react-hierarchy#35

Open

React Hooks 原理 #26

React Hooks 原理 #26

Comments

brickspert commented Apr 14, 2019 • edited Loading

前言

useState

useEffect

Not Magic, just Arrays

1. 初始化

2. 初次渲染

3. 事件触发

4. Re Render

真正的 React 实现

参考文章

❤️感谢大家

liang520 commented Apr 16, 2019

brickspert commented Apr 16, 2019

liang520 commented Apr 16, 2019

ChinDer commented Aug 5, 2019

KayneWang commented Aug 7, 2019

masterx0 commented Aug 13, 2019

watsonnnnn commented Aug 14, 2019

BurnhamZhang commented Sep 2, 2019

yushengling commented Sep 11, 2019

kakeiChen commented Oct 8, 2019

rtxu commented Oct 16, 2019

JuneScut commented Oct 23, 2019

AfterThreeYears commented Oct 23, 2019 • edited Loading

brickspert commented Oct 23, 2019

chnliquan commented Oct 28, 2019

BigKongfuPanda commented Nov 1, 2019

FrancisShi commented Nov 4, 2019

brickspert commented Nov 6, 2019

lddlww commented Nov 12, 2019

brickspert commented Nov 12, 2019

lddlww commented Nov 12, 2019

lhz960904 commented Nov 16, 2019

brickspert commented Nov 16, 2019 • edited Loading

chnliquan commented Dec 5, 2019

wanghsinche commented Dec 25, 2019 • edited Loading

lx70770 commented Aug 6, 2020

BoBoooooo commented Oct 25, 2020

feibi commented Nov 3, 2020

aaronlam commented Nov 3, 2020

Lanchouchou commented Nov 15, 2020

zhoucumt commented Dec 22, 2020

aaronlam commented Dec 22, 2020

cll123456 commented Apr 3, 2021

pfan8 commented May 17, 2021

xianyulli commented Jul 14, 2021

MrLeihe commented Sep 2, 2021

wizardpisces commented Oct 14, 2021 • edited Loading

Cheering-baby commented Dec 3, 2021

creampnx-x commented Dec 25, 2021

wizardpisces commented Dec 27, 2021

unbro commented Feb 9, 2022

wizardpisces commented Feb 9, 2022

unbro commented Feb 9, 2022

wizardpisces commented Feb 9, 2022

yueyueyaofaguang commented Sep 14, 2022

wozien commented Oct 14, 2022

wongfugui commented Aug 19, 2024

brickspert commented Apr 14, 2019 •

edited

Loading

AfterThreeYears commented Oct 23, 2019 •

edited

Loading

brickspert commented Nov 16, 2019 •

edited

Loading

wanghsinche commented Dec 25, 2019 •

edited

Loading

wizardpisces commented Oct 14, 2021 •

edited

Loading