什么是属性获取器模式？

Props 集合模式 vs. Prop Getters 模式

在 JavaScript 中，所有函数都是对象。然而，函数的设计更注重可定制性和可复用性。

考虑以下代码：

1const obj = { name: "React hooks" }
2
3console.log(obj)

如果你希望创建相同结构的对象，但又允许一定程度的自定义，可以这样做：

1const objCreator = n => ({ name: n })

现在，objCreator 这个函数可以被多次调用，生成不同的对象，如下所示：

1const objCreator = n => ({ name: n })
2
3const obj1 = objCreator("React hooks")
4const obj2 = objCreator("React hooks mastery")
5const obj3 = objCreator("React hooks advanced patterns")
6
7console.log(obj1)
8console.log(obj2)
9console.log(obj3)

我为什么要解释这一点？

因为这正是 Props 集合模式 与 Prop Getters 模式 的核心区别。

• Props 集合模式 是通过传入一个对象来提供属性。
• Prop Getters 模式 则暴露一个函数，该函数可以被调用以生成一组属性。

重构之前的解决方案

由于函数具有高度可定制性，使用 Prop Getters 能够支持更多有趣的使用场景。

让我们从之前的方案出发，改造成使用 Prop Getters。

1// 之前
2const togglerProps = useMemo(
3  () => ({
4    onClick: toggle,
5    'aria-expanded': expanded
6  }),
7  [toggle, expanded]
8)
9
10// 现在
11const getTogglerProps = useCallback(
12  () => ({
13    onClick: toggle,
14    'aria-expanded': expanded
15  }),
16  [toggle, expanded]
17)

现在不再直接返回 togglerProps，而是创建一个经过记忆化的函数 getTogglerProps，它返回相同的属性集合。

我们将这个函数通过 useExpanded Hook 返回的 value 变量暴露出去，如下所示：

1export default function useExpanded() {
2  ...
3  const getTogglerProps = useCallback(
4    () => ({
5      onClick: toggle,
6      'aria-expanded': expanded
7    }),
8    [toggle, expanded]
9  )
10  // 注意这里 👇
11  const value = useMemo(() => ({ expanded, toggle, getTogglerProps }), [
12    expanded,
13    toggle,
14    getTogglerProps
15  ])
16  return value
17}

接下来，我们需要更新如何消费这个属性集合：

1// 之前
2<button {...togglerProps}>Click to view awesomeness...</button>
3
4// 现在
5<button {...getTogglerProps()}>Click to view awesomeness...</button>

用户在自己的应用中这样使用即可。

综合示例

就这样！用户的 App 依然像以前一样正常工作。

快速小测验

在继续之前，我们来做个小测验！

---

我知道你在想什么：如果 getTogglerProps 函数不需要传入任何参数，那为什么还要做这种重构呢？

这是一个非常好的问题。我们很快就会引入参数来展示它的优势。