时间戳

首页 > 解决方案 > 防止自定义挂钩在每次重新渲染时重新初始化

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

问题描述

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重新渲染，每次它进入 insiteuseOwnHook并创建新数组，是否可以防止它在每次重新渲染时移动到这个钩子内？

标签： javascriptreactjsreact-hooks

解决方案

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

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

  return {
    arr
  };
};

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

推荐阅读