编写你自己的 React Hooks，返回值
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
JavaScript 函数只能返回一个值。然而，现代 JavaScript 中的解构赋值使得这一点在很大程度上变得无关紧要。
我们可以从函数中返回数组或对象形式的多个值，并立即解构它们。而且，正如你所知，React Hook 本质上就是一个遵循约定的函数。
const [one, two] = useNumbers()
const { a, b, c } = useAlphabet()
那么，为什么要选择一种方法而不是另一种呢？
让我们来看一些不同的使用场景，并探讨为什么我们可能想要返回一个数组而不是一个对象。
首先需要注意的是，我们不需要返回任何值。内置的React.useEffect钩子函数会执行此操作（undefined实际上会返回值）。
我们也可以只返回一个值，例如字符串或整数。例如，一个钩子可以订阅 WebSocket API，并返回一个持续更新的值，表示当前在线用户数：
function OnlineUsers() {
const userCount = useOnlineUserCount()
return (
<Users count={userCount} />
)
}
返回一个数组
对于用途非常广泛的钩子函数来说，将返回值导出为数组会很有帮助。内置钩子函数就是一个很好的例子React.useState。导出数组使得自定义状态变量及其设置器的名称变得非常容易。唯一的名称使我们能够重复使用该钩子函数。
const [color, setColor] = useState('MintCream')
const [width, setWidth] = useState('100vw')
一个稍微人为设计的自定义钩子示例，如果返回数组，则可以受益，例如 CSS 构建器，它还可以保存一些状态。
const [leftStyle, setLeftTheme] = useStyleBuilder('dank-kitty')
const [rightStyle, setRightTheme] = useStyleBuilder('no-drama-llama')
何时返回数组
-
需要返回的值的数量很少。顺序很重要，记住一堆值的顺序会消耗额外的脑力。
-
预计该钩子会在同一个组件中多次使用。虽然我们可以在解构对象时重命名属性，但对于从数组返回的自定义名称值来说，使用更简洁的语法更有意义。
返回一个对象
对于具有更专业用途且返回更多值的钩子函数，返回一个对象可能会更有利。
对象解构不依赖于顺序，因此更容易忽略不需要的值。例如，一个钩子函数可能包含 3 或 4 个状态值以及相应的处理函数：
const { color, count, isValid, handleChangeColor, handleChangeCount } = useItemOptions()
何时返回对象
-
需要返回的值数量很多。我们不必记住返回对象的顺序，甚至不必使用所有值。
-
该钩子函数不应在同一个组件中多次使用。对于仅在组件中使用一次的钩子函数返回的对象，我们可以在解构该对象时使用原始属性名。
不解构
如果一个钩子函数需要返回大量值，并且预计会被多次使用，我们完全可以不用解构。这有时非常有用。
const leftOptions = useItemOptions()
const rightOptions = useItemOptions()
return (
<>
<Column
side="left"
color={leftOptions.color}
count={leftOptions.count}
isValid={leftOptions.isValid}
handleChangeColor={leftOptions.handleChangeColor}
handleChangeCount={leftOptions.handleChangeCount}
/>
<Column
side="right"
color={rightOptions.color}
count={rightOptions.count}
isValid={rightOptions.isValid}
handleChangeColor={rightOptions.handleChangeColor}
handleChangeCount={rightOptions.handleChangeCount}
/>
</>
)
不进行散失式解构
如果我们谨慎命名钩子返回的对象中的属性，就可以使用扩展语法将 props 直接转储到组件中。
上述组件可以使用扩展运算符重写如下：
const leftOptions = useItemOptions()
const rightOptions = useItemOptions()
return (
<>
<Column side="left" {...leftOptions} />
<Column side="right" {...rightOptions} />
</>
)
（显然，Dev.to 目前还不支持 JSX 中扩展运算符的语法高亮显示，但这种方法可行。）
结论
我们可以用几种不同的方式返回多个值，这些方式在不同的情况下都适用。希望这能给你一些启发，让你的钩子代码更易读、更易理解。
我们这里有很多工具可供选择。它们之间有重叠之处，也有各自的优缺点，所以不妨多尝试，找出最适合你应用场景的方法。祝你玩得开心！
文章来源：https://dev.to/namick/writing-your-own-react-hooks-the-return-value-3lp6