登录
首页 >  文章 >  前端

您可能不知道的 useState 性能技巧

来源:dev.to

时间:2024-10-31 15:51:59 399浏览 收藏

欢迎各位小伙伴来到golang学习网,相聚于此都是缘哈哈哈!今天我给大家带来《您可能不知道的 useState 性能技巧》,这篇文章主要讲到等等知识,如果你对文章相关的知识非常感兴趣或者正在自学,都可以关注我,我会持续更新相关文章!当然,有什么建议也欢迎在评论留言提出!一起学习!

您可能不知道的 useState 性能技巧

假设我们有一个包含 usestate 的 react 组件。

const expensivecalculation = () => {
  // ...
}

export default function aboutpage() {
  const [state, setstate] = usestate(expensivecalculation())

    return (
      // ...
    );
  }

我们用昂贵的计算函数的结果启动状态。
每次组件重新渲染时,函数 costlycalculation 都会运行,即使我们只需要它的结果作为 usestate 的初始值。该函数的结果将不会被使用。

为了避免重新渲染期间昂贵的计算,请传递函数本身而不调用它。 react 足够智能,可以在挂载时调用函数本身,而不是每次渲染时调用函数本身。

const expensiveCalculation = () => {
  // ...
}

export default function AboutPage() {
  const [state, setState] = useState(expensiveCalculation)

    return (
      // ...
    );
  }

以上就是《您可能不知道的 useState 性能技巧》的详细内容,更多关于的资料请关注golang学习网公众号!

声明:本文转载于:dev.to 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>