Question

import React, { useState } from "react";

import useInterval from "use-interval";

const useOwnHook = () => {
  const arr = [...Array(100)].map((_, index) => index);

  return {
    arr
  };
};

const Component = ({ count }) => {
  const { arr } = useOwnHook();
  console.log(arr, "arr");
  return (
    <div className="App">
      <h1>{count + 1}</h1>
    </div>
  );
};

export default function App() {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <Component count={count} />;
}

我已经创建了钩子useOwnHook，以演示每次Component每次重新渲染，每次进入useOwnHook并创建新数组时，都可以防止它发生每次重新渲染时都在钩子内部移动吗？

Answer 1

您可以将useState添加到自定义挂钩中，如下所示：

const useOwnHook = () => {
  const [arr] = useState([...Array(100)].map((_, index) => index));

  return {
    arr
  };
};

这样做可以将相同的数组保留在useOwnHook中。

您也可以导入为import { useState } from 'react'。

另请参见Using the State Hook文档-具有不同变量的示例：

我们声明一个称为count的状态变量，并将其设置为0。React将记住在重新渲染之间的当前值，并为我们的函数提供最新的值。如果要更新当前计数，可以调用setCount。

Answer 2

我个人会使用带有init函数的状态变量：

const useOwnHook = () => {
  const [arr] = useState(() => [...Array(100)].map((_, index) => index));

  return {
    arr
  };
};

init函数的好处是它是惰性计算的，因此您不必在每次渲染组件时都构造数组。

防止自定义钩子在每次重新渲染时重新初始化

2 个答案: