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

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

@brickspert 看明白了

memoizedState => memorizedState

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

很清晰明了了

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

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

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

follow

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@brickspert 多谢多谢

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

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

感谢~，已修正。

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

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

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

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

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

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

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

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

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

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

受教了

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

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

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

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

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

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

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

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

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

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

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

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

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

厉害，学习了

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

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

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

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

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

更新(2021-10-15)：

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

更新(2021-12-3)：

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

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

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

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

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

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

没毛病，immutable模式

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

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

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

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

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

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

unbro

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

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

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

拜托大佬解惑～

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

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