在 React 中创建自定义钩子（hooks）是一个非常有价值的练习，甚至可以说是许多开发者的“啊哈”时刻。
剧透警告：第一次尝试是在 Revolut 的一次高压面试中，结果并不如意。
在这篇文章中，带你一起回顾我重现著名的 useState() 钩子的历程，称它为 useMyState()。同时，我也会给出一些建议，帮助你下次面试时避免失败。
让我们一起来探讨哪里出了问题，我是如何重新拾起信心的，以及你如何避免犯同样的错误。准备好迎接一些高级 React 的乐趣吧！🎉
梦寐以求的工作和艰难的面试
拿到 Revolut 的面试机会感觉就像中了彩票。我满怀激动和信心，因为我花了数周时间打磨我的 React 和 TypeScript 技能。
我以为我已经掌握了一切——但面试让我意识到，我的信心过于自满。这个面试，我既兴奋又紧张，然而很快，这次经历变成了一次让我永生难忘的挫败。
在顺利通过一些初步面试轮次后，我遇到了一个我没有完全预料到的挑战：“你能从头开始重现 useState() 钩子吗？”
这个问题看似简单，但其背后的意义深远。我知道 useState() 在高层次上的工作原理，但在面试现场，面对时钟滴答作响，要从头构建它却是另一回事。
任务：在压力下重现 useState()
面试官解释说，我需要创建一个自定义钩子，模仿 React 的 useState() 的行为。
这个钩子应该存储状态，允许状态更新，并在状态变化时触发重新渲染。
听起来很熟悉，对吧？我曾经读过这类内容，甚至考虑过如何实现。但现在，在面试压力下，一切似乎变得更加复杂。
关键问题是：我从未实际在现场实现过类似的东西。
概念在我脑海中很清晰，但在面对一个可能决定我职业生涯的人时，执行起来却完全不同。
最终，我没有完成这个任务……但后来我决定在没有时间压力的情况下再试一次，结果是这样的。
为什么要重现 useState()?
你可能会问，“为什么要重现一个已经完美运作的东西？”嗯，这正是我为什么要做的原因——因为它确实运作得很好。
理解 useState() 的底层工作原理有助于你更好地掌握 React 的“魔法”。
此外，构建你自己的工具——即使它们已经存在——也是一种非常有成就感的体验。
入门：useMyState() 背后的概念
在开始编码之前，让我们明确我们想要实现的目标。React 中的 useState() 钩子：
- 返回一个状态变量和一个用于更新该状态的函数。
- 每当状态更新时，重新渲染组件。
我们的 useMyState() 钩子应该实现相同的功能。本质上，我们需要一种方式来存储状态，更新它，并在发生变化时触发重新渲染。听起来很简单，对吧？嗯，这既简单又复杂。
构建模块：useState() 的底层工作原理
首先，让我们讨论一下 React 如何在内部管理状态。当你调用 useState() 时，React 在内部通过一个称为“钩子状态队列”的机制来跟踪你的状态。
每当你调用更新函数（我们称之为 setState）时，React 并不会立即更新状态。相反，它会调度一次重新渲染。
在这次重新渲染期间，React 根据队列计算新的状态。
要复制这种行为，我们需要：
- 将状态存储在一个可以跨渲染持续存在的地方。
- 提供一个函数来更新这个状态并触发重新渲染。
创建 useMyState()：编写一些代码！
我们可以这样开始。首先，我们需要创建一个组件级别的状态存储。
由于 React 并不提供一种直接的方式来在渲染之间保持变量的持久性（除了使用类似 useState() 或 useRef() 的钩子），我们需要使用 useRef() 来实现这一点。
function useMyState(initialValue) {
const stateRef = React.useRef(initialValue);
const [, forceRender] = React.useReducer(x => x + 1, 0);
const setState = (newValue) => {
stateRef.current = newValue;
forceRender();
};
return [stateRef.current, setState];
}细分解释
- useRef(initialValue): 这是我们的状态所在。useRef() 可以在渲染之间保持值，而不会导致重新渲染。
- useReducer(x => x + 1, 0): 这是一个巧妙的技巧，用来强制组件重新渲染。我们不关心 x 的值，只是调用 forceRender() 会使 React 重新渲染我们的组件。
- setState(newValue): 我们更新 stateRef 的 current 属性，然后触发一次重新渲染。
就这样！通过这三部分，我们就有了自己的 useState() 版本。但我们怎么知道它是否有效呢？让我们测试一下。
测试 useMyState(): 让它工作
让我们看看这个钩子的实际效果。这里有一个简单的计数器组件，使用我们的 useMyState()：
function Counter() {
const [count, setCount] = useMyState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}当你点击“Increment”按钮时，计数器应该增加，组件会重新渲染以反映新的计数。这就像使用 useState() 一样。很棒吧？
处理多个状态：扩展 useMyState()
现在，如果我们需要在同一个组件中管理多个状态会怎么样？React 的 useState() 可以优雅地处理这个问题，我们的 useMyState() 也可以。
function MultipleStatesComponent() {
const [count, setCount] = useMyState(0);
const [text, setText] = useMyState('Hello');
return (
<div>
<p>{count}</p>
<p>{text}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setText('World')}>Change Text</button>
</div>
);
}这个组件管理两个独立的状态变量，useMyState() 像 useState() 一样处理它们。
总结
React 的 useState() 钩子经过高度优化、经过实战检验，能够处理我们简单的 useMyState() 可能忽略的边缘情况。
尽管我未能在面试中重现它，但我能够在一个平静的环境中自己重新实现它，下次面试时，我会准备得更好。
重现这样的工具并不是为了取代它们，而是为了学习它们的工作原理，从而更好地使用它们。
谁知道呢？你也许会在一个副项目中找到 useMyState() 的用武之地，或者只是把它当作一个有趣的技巧留在你的工具箱里。
祝你好运！
