我应该在钩子中使用 useMemo 吗？

Question

我创建了 useBanner 挂钩

\n\n

const useBanner = (array, yardage) => {\n  const [bannArr, setBannArr] = useState(array.slice(0, yardage));\n  const [bannListIndex, setBannIndex] = useState(1);\n\n  return {\n   ....\n  };\n};\n

\n\n

我是否在做正确的事情并且将 props 放入 useState 中。\nIt\xe2\x80\x99s 允许使用 useBanner。

\n\n

const Banner= ({\n  array,\n  yardage\n}) => {\n  const { bannForth, bannBeck, bannArr } = useBanner(array, yardage);\n  return (\n    ...\n  );\n};\n

\n\n

当 props 在这里改变时。\n将改变 useBanner 中的状态。\也不被认为是反模式我必须把所有这些写在 useMemo 中

\n\n

const useBanner = (array, yardage) => {\n  const [bannArr, setBannArr] = useState([]);\n  const [bannListIndex, setBannIndex] = useState(1);\n\n useMemo(() => {\n    setBannArr(array.slice(0, yardage));\n    setBannIndex(1);\n  }, [array, yardage]);\n\n\n  return {\n   ....\n  };\n};\n

\n

Answer 1

是的，React 中可以自定义钩子。这是讨论自定义挂钩的单独文档。

但具体来说，您的示例可能需要额外的代码，具体取决于您的最终目标。

1. 如果您只想初始化状态一次，则在Banner首次创建组件时，您可以按照第一个示例中的方式进行操作

   const Banner= ({
       array,
       yardage
   }) => {
       const { bannForth, bannBeck, bannArr } = useBanner(array, yardage);
       return (
         ...
       );
   };
   

   这将完美地发挥作用。但如果 propsarray和yardagewill 发生变化，这不会反映在组件中。因此props将仅用作初始值一次，然后即使更改也不会使用useBanner（并且无论您使用useBanner还是useState直接使用）。这个答案强调了这一点。

2. 如果您想在每次props更改时更新初始值，您可以useEffect如下所示

   const Banner= ({
       array,
       yardage
   }) => {
       const { bannForth, bannBeck, bannArr, setBannArr } = useBanner(array, yardage);
       useEffect (() => {
           // setBannArr should also be returned from useBanner. Or bannArr should be changed with any other suitable function returned from useBanner.
           setBannArr(array.slice(0, yardage)); 
       }, [array, yardage, setBannArr])
       return (
         ...
       );
   };
   

   在这种情况下，Banner组件可以控制自己的状态，并且当父组件更改时props，组件中的状态Banner将重置为新的props。

这是展示第二个选项的小样本。