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

Question

我创建了 useBanner 钩子

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

  return {
   ....
  };
};

我在做正确的事吗？道具会在 useState 中抛出。 可以使用useBanner。

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

什么时候道具会在这里改变。 将改变 useBanner 中的状态。 还是它被认为是反模式我必须在 useMemo 中写下所有这些

const useBanner = (array, yardage) => {
  const [bannArr, setBannArr] = useState([]);
  const [bannListIndex, setBannIndex] = useState(1);

 useMemo(() => {
    setBannArr(array.slice(0, yardage));
    setBannIndex(1);
  }, [array, yardage]);


  return {
   ....
  };
};

Answer 1

是的，在 React 中可以使用自定义钩子。这是讨论custom hooks的单独文档。

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

1. 如果你只想初始化一次状态，当组件Banner第一次被创建时，你可以像你的第一个示例那样做

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

   这将完美地工作。但是如果 props array 和 yardage 发生变化，这不会反映在组件中。所以props 将只使用一次作为初始值，然后即使更改也不会在useBanner 中使用（无论您是直接使用useBanner 还是useState 都没有关系）。这个答案highlight这个。

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。

这是showcase second option的小样本。