React 自定义钩子——返回一个数组与一个对象
React 自定义钩子——返回一个数组与一个对象
大多数编写的自定义钩子都是通过以下方式定义的：
常量 useCustom = () => {
让 customVar = "";
// 一些逻辑...
返回 {
自定义变量
}
}
并在您的组件中被如下调用：
常量 {customVar} = useCustom();
在这里，我们从 使用自定义 挂钩并使用对象解构来访问 自定义变量 .
但是，如果您注意到 react 或其他此类库提供的其他钩子，您会发现它们使用数组而不是对象解构。
const [示例，setExample] = useState('example');
使用 {this} 与 [this] —
如果钩子返回一个数组，那么您可以自己命名变量。
如果钩子返回一个对象，那么您必须使用与钩子本身返回的相同的变量名称。
使用返回数组的钩子很可能是 每个组件可以多次使用 hook。 因此，我们需要能够多次实例化该钩子，但每个实例都有不同的名称。
请参见下面的示例：
常量 [valA, setValA] = useState(0);
常量 [valB, setValB] = useState("");
在里面 使用自定义 钩子，我们被迫使用变量名 自定义变量 .
React 允许我们覆盖我们的对象变量名称，但它比使用数组返回需要更多的努力。这是上面的 使用状态 以对象返回形式重写的示例：
常量 {state: val, setState: setVal} = useState(0);
const {状态：数据，setState：setData} = useState（“”）；
为了清楚起见，这就是 使用自定义 钩子看起来像是重写为使用数组返回：
常量 {customVar: customName} = useCustom(); //对象返回
常量 [customName] = useCustom(); //数组返回
结论
在创建自定义钩子时，请记住：
- 如果我们要在单个组件中使用挂钩的多个实例，则使用数组返回。
- 如果我们的组件只有 1 个（或少数几个实例）挂钩，请使用对象返回。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
