React Hooks 原理

Question

React Hooks 原理

brickspert opened this issue 5 years ago · 68 comments

brickspert commented 5 years ago

前言

目前，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 的数据就作为组件的一个信息，存储在这些节点上，伴随组件一起出生，一起死亡。

参考文章

❤️感谢大家

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

kakeiChen commented 5 years ago

follow

BoBoooooo commented 4 years ago

受教了

Answer 1 · 2019-04-16T11:11:52.000Z

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

Answer 2 · 2019-04-16T11:41:32.000Z

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

Answer 3 · 2019-04-16T11:43:09.000Z

@brickspert 看明白了

Answer 4 · 2019-08-05T01:40:30.000Z

memoizedState => memorizedState

Answer 5 · 2019-08-07T14:22:27.000Z

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

Answer 6 · 2019-08-13T11:16:58.000Z

很清晰明了了

Answer 7 · 2019-08-14T02:04:50.000Z

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

Answer 8 · 2019-09-02T09:10:24.000Z

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

Answer 9 · 2019-09-11T11:28:29.000Z

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

Answer 10 · 2019-10-16T08:02:14.000Z

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

Answer 11 · 2019-10-23T01:38:44.000Z

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

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

Answer 12 · 2019-10-23T05:50:36.000Z

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

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

Answer 13 · 2019-10-23T05:57:38.000Z

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

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

Answer 14 · 2019-10-28T10:03:43.000Z

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

Answer 15 · 2019-11-01T15:15:38.000Z

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

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

Answer 16 · 2019-11-04T03:27:55.000Z

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

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

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

Answer 17 · 2019-11-06T01:34:08.000Z

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

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

Answer 18 · 2019-11-12T13:04:13.000Z

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

Answer 19 · 2019-11-12T13:14:21.000Z

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

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

Answer 20 · 2019-11-12T15:51:13.000Z

@brickspert 多谢多谢

Answer 21 · 2019-11-16T07:18:18.000Z

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

Answer 22 · 2019-11-16T14:24:59.000Z

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

感谢~，已修正。

Answer 23 · 2019-12-05T02:09:38.000Z

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

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

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

Answer 24 · 2019-12-25T10:09:00.000Z

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

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

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

Answer 25 · 2019-12-27T08:08:23.000Z

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

我们知道，react 会生成一棵组件树（或Fiber 单链表），树中每个节点对应了一个组件，hooks 的数据就作为组件的一个信息，存储在这些节点上，伴随组件一起出生，一起死亡。
这句话我不能理解，博主能引用源代码来证明么？
就我理解，函数式组件既然已经是stateless，就不会有所谓出生，死亡等生命周期了。我更倾向于react的hook信息，即整个hook的链表是一个全局变量。

收回我的猜想。全局的hook无法实现条件渲染，应该是每个组件对应各自的hook。

Answer 26 · 2020-01-06T11:34:58.000Z

还是无法理解: “Capture Value” 特性是如何产生的

Answer 27 · 2020-01-17T03:39:58.000Z

还是无法理解: “Capture Value” 特性是如何产生的

每次rerender都会重新执行一遍函数组件本身，每次执行都会是全新的context，capture只是闭包保存对应的context，所以后续更新不会影响之前的context，那之前闭包捕获的context也就不会变了。

Answer 28 · 2020-01-17T03:42:30.000Z

理解了, 每次render 就是一个闭包, 会缓存住当前的所有状态, react class 是直接更新this.props的指向, 且没有闭包的概念, 所以全变了

Answer 29 · 2020-03-04T07:07:16.000Z

在demo3中，没有调用诸如useState或者this.setState之类的方法，那react是如何知道并且触发更新的呢？

Answer 30 · 2020-03-04T07:14:59.000Z

在demo3中，没有调用诸如useState或者this.setState之类的方法，那react是如何知道并且触发更新的呢？

抱歉，忽略了里面的render方法

Answer 31 · 2020-04-13T14:04:01.000Z

function setState(newState) {
    memoizedState[currentCursor] = newState;
    cursor = currentCursor; //是不是少了这一句？？
    render();
  }

Answer 32 · 2020-04-22T01:38:55.000Z

function setState(newState) {
    memoizedState[currentCursor] = newState;
    cursor = currentCursor; //是不是少了这一句？？
    render();
  }

不需要吧
下一步render()就會把cursor = 0
並且再次依照順序調用所有函數組件

Answer 33 · 2020-04-23T09:11:34.000Z

大神有一点想请教一下
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
}
对于memoizedState[cursor] = memoizedState[cursor] || initialValue;这么实现的话是不是如果setState（null)或者是setState（undefind)是不是 state都会被付成默认值了

Answer 34 · 2020-05-09T07:05:59.000Z

大神有一点想请教一下
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
}
对于memoizedState[cursor] = memoizedState[cursor] || initialValue;这么实现的话是不是如果setState（null)或者是setState（undefind)是不是 state都会被付成默认值了

我也是有这么个疑问，如果值本身就是false的话，怎么办？

Answer 35 · 2020-05-11T11:12:00.000Z

大神有一点想请教一下
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
}
对于memoizedState[cursor] = memoizedState[cursor] || initialValue;这么实现的话是不是如果setState（null)或者是setState（undefind)是不是 state都会被付成默认值了

确实会有这个问题。
这个文章只是一个示例 demo，不是百分百严谨。

Answer 36 · 2020-05-13T01:54:57.000Z

大神有一点想请教一下
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
}
对于memoizedState[cursor] = memoizedState[cursor] || initialValue;这么实现的话是不是如果setState（null)或者是setState（undefind)是不是 state都会被付成默认值了

确实会有这个问题。
这个文章只是一个示例 demo，不是百分百严谨。

明白啦！还是感谢作者带来质量那么高的文章。

Answer 37 · 2020-05-23T04:39:23.000Z

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

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

这里从0开始，是指render都会从0开始执行hook。但是对于setUsername('fan hello')这个setState方法来说，cursor应该是1。
这是我个人的理解，这个图上标注似乎会引起一点歧义，如果不对请指正

Answer 38 · 2020-07-02T02:14:52.000Z

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

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

这里从0开始，是指render都会从0开始执行hook。但是对于setUsername('fan hello')这个setState方法来说，cursor应该是1。
这是我个人的理解，这个图上标注似乎会引起一点歧义，如果不对请指正

第一句描述的没有异议，第二句中的 "cursor 应该是 1" 这句存在歧义，我们可以观察一下 setState 方法执行过程，发现其中维护memoizedState 数组下标的变量是 useState 方法中定义的 currentCursor 变量而不是 cursor，实际上 currentCursor 的值才是1。变量 cursor 的值在执行setState 中 render 方法之前是 memoizedState 数组的长度（即所存储hooks的数量，因为 useState 和 useEffect 中最后都执行了cursor++ 操作），在执行setState 中 render方法之后才会重置为 0。
图中描述的是变量 cursor 值的变化，所以作者描述的没什么问题，如果加上 currentCursor 值得变化大家可能就更容易理解了。

Answer 39 · 2020-07-02T09:09:25.000Z

看了好久那里没想明白cursor怎么重置为0的，看了demo才知道，哭了。

Answer 40 · 2020-07-07T07:01:09.000Z

🧱家就是强通俗易懂顺便问个问题 React为何要使用链表串联多个hook 相比数组的优势是什么呢？

Answer 41 · 2020-07-07T07:53:34.000Z

🧱家就是强通俗易懂顺便问个问题 React为何要使用链表串联多个hook 相比数组的优势是什么呢？

感觉链表的灵活性会比数组来的高吧？

Answer 42 · 2020-07-07T08:05:10.000Z

🧱家就是强通俗易懂顺便问个问题 React为何要使用链表串联多个hook 相比数组的优势是什么呢？

数组存储区间需要连续的内存，链表是则是非连续、非顺序的存储结构

Answer 43 · 2020-08-01T14:12:34.000Z

不懂就问，render函数怎么来的，是如何触发函数组件跟新的呢？

Answer 44 · 2020-08-06T00:57:43.000Z

不懂就问，render函数怎么来的，是如何触发函数组件跟新的呢？

看 demo 代码，有定义 render 函数

Answer 45 · 2020-08-06T01:03:08.000Z

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

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

Answer 46 · 2020-08-06T01:05:46.000Z

还有建议：给 useState 里的 render() 那块加个注释，我刚开始看这块的时候，也比较懵

Answer 47 · 2020-08-06T01:10:26.000Z

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

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

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

Answer 48 · 2020-11-03T08:26:42.000Z

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

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

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

Answer 49 · 2020-11-03T16:14:13.000Z

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

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

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

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

Answer 50 · 2020-11-15T14:13:39.000Z

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

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

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

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

Answer 51 · 2020-12-22T00:47:59.000Z

···
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都会执行吗？

Answer 52 · 2020-12-22T17:31:26.000Z

···
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 呀。

Answer 53 · 2021-04-03T11:44:43.000Z

厉害，学习了

Answer 54 · 2021-05-17T08:20:17.000Z

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

Answer 55 · 2021-07-14T01:40:27.000Z

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

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

Answer 56 · 2021-09-02T09:32:05.000Z

···
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 呀

Answer 57 · 2021-10-14T11:11:50.000Z

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

更新(2021-10-15)：

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

更新(2021-12-3)：

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

Answer 58 · 2021-12-03T07:53:13.000Z

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

Answer 59 · 2021-12-25T17:01:45.000Z

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

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

Answer 60 · 2021-12-27T01:44:58.000Z

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

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

没毛病，immutable模式

Answer 61 · 2022-02-09T06:36:08.000Z

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

Answer 62 · 2022-02-09T06:46:53.000Z

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

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

Answer 63 · 2022-02-09T09:32:49.000Z

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

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

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

Answer 64 · 2022-02-09T10:35:09.000Z

unbro

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

Answer 65 · 2022-09-14T01:00:13.000Z

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

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

拜托大佬解惑～

Answer 66 · 2022-10-14T15:22:11.000Z

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

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