在这里,我们从 使用自定义 挂钩并使用对象解构来访问 自定义变量 .

但是,如果您注意到 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 版权协议,转载请附上原文出处链接和本声明

    本文链接:https://www.qanswer.top/22980/02020910