如何避免 React hooks 闭包陷阱?

sxkk20082年前知识分享129

什么是 React hooks 闭包陷阱?

在 react 中 提供了一些性能优化函数 react.memouseMemouseCallback

const cachedValue = useMemo((fn) => calculateValue, dependencies)

useMemo:memoized 值,只有依赖项变更的时候才会重新计算

const cachedFn = useCallback(fn, dependencies)

useCallback:memoized 函数,只有依赖项变更的时候才会重新更新

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)

memo:缓存组件,当 props 没变化的时候,不会执行 render。arePropsEqual 是一个可选函数,可以自定义对比新旧的 props, 返回 true 就会缓存,返回 false,就不会缓存。

const arePropsEqual=(oldProps: Props, newProps: Props) => boolean

有时候我们使用了这些函数来优化性能,这些函数与外围的 state 形成闭包,导致缓存函数中获取到的 state 不是最新的值,这就是闭包陷阱。

实例演示

比如下面代码,在项目中有一个计时器组件,还有一个 Child 组件, 点击 Child 组件需要返回 App 组件中的最新 state 值;

import React, { useCallback, useEffect, useLayoutEffect } from 'react'
import 'antd/dist/antd.css'
import { Button, ButtonProps } from 'antd'

const Child = ({ onClick }: ButtonProps) => {
  console.log('render')
  return (
    <Button onClick={onClick} type="primary">
      Button
    Button>
  )
}

const App: React.FC = () => {
  const [count, setCount] = React.useState(0)

  useEffect(() => {
    const time = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)
    return () => {
      clearInterval(time)
    }
  }, [])

  const handleClick = () => {
    console.log(count)
  }

  return (
    <>
      <h2>{count}h2>
      <Child onClick={handleClick} />
    >
  )
}

export default App

这样没什么问题,但是每次渲染的时候 Child 组件都会执行 render

image.png

为了防止 App 组件在更新的时候,不重复渲染(render)子组件,我们使用 React.memo 包裹下 Child 组件, handleClick 也需要使用 useCallback 包裹,这样 Child 组件只会 render 一次。

const Child = React.memo(({ onClick }: ButtonProps) => {
  console.log('render')
  return (
    <Button onClick={onClick} type="primary">
      Button
    Button>
  )
})
const handleClick = useCallback(() => {
    console.log(count);
  }, []);

这样一来 useCallback 和 state 就形成了一个闭包,每次打印的 state 就是初始化的 state。

image.png

为了获得最新的 state 值,必须将 count 参数写进 useCallback 的第二个参数。

const handleClick = useCallback(() => {
  console.log(count)
}, [count])

但这样,又会导致 Child 组件更新。那么有什么好的解决办法呢?既能防止子组件的更新,又可以获取到最新的 state 值呢?

方法:

我们可以使用 useRef 来存一个函数,每次更新的时候设置 ref.current 的值,通过函数来获取最新的 state 值。

const App: React.FC = () => {
  const [count, setCount] = React.useState(0);
  const ref = React.useRef();

  useEffect(() => {
    const time = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
    return () => {
      clearInterval(time);
    };
  }, []);

  const fn = () => {
    console.log(count);
  };

  ref.current = fn;

  const handleClick = useCallback(() => {
    ref.current();
  }, []);

  return (
    <>
      

{count}

); };

image.png

codesandbox 演示地址

小结

解决闭包陷阱的方法

  1. 当页面更新不频繁的时候,不使用 useMemouseCallback 缓存函数来优化页面;

  2. 将更新依赖的参数写进 useCallback 的第二个参数

  3. 使用 useRef 来存在一个函数,用一个函数实时获取最新的 state

以上就是本文全部内容,如果对你有帮助,可以随手点个赞,这对我真的很重要,希望这篇文章对大家有所帮助,也可以参考我往期的文章或者在评论区交流你的想法和心得,欢迎一起探索前端。

本文正在参加「金石计划 . 瓜分 6 万现金大奖」

相关文章

视频数据我找了“译学馆”中的一个API 作为我的初始数据,修改 main 函数来填充视频数据。

import example from './example.json" alt="使用 Next.js、 Prisma 和 PostgreSQL 全栈开发视频网站">

使用 Next.js、 Prisma 和 PostgreSQL 全栈开发视频网站

highlight: monokai theme: vuepress文章为稀土掘金技术社区首发签约文章,14 天内禁止转载,14 天后未获授权禁止转载,侵权必究!前言在前面的文章中,我们使用了 Not...

打字机效果的实现与应用

打字机效果的实现与应用

前言在 web 应用中,模拟编辑器或者模拟输入框中文字啪啦啪啦输入的效果,往往能够吸引人们的眼球,让用户的注意力聚焦在输入的内容上,其实使用的是 web 动画模拟打字机效果,本文将和大家探讨打字机效果...

image.png

使用 React-DnD 打造简易低代码平台

前言2016 年起,低代码概念开始在国内兴起,当年该行业总共有 10 起融资事件,之后低代码行业融资笔数整体呈上升趋势,并在 2020 年增长至 14 起,其中亿元以上融资有 13 起。从融资轮次分布...

AI与未来——探索人工智能发展趋势与影响

AI与未来——探索人工智能发展趋势与影响

  人工智能(AI)作为当下最热门的技术领域,正在改变人类的生产方式、生活方式和认知方式。AI的发展速度迅猛,在医疗、金融、教育等各行各业中都有着广泛应用。未来,AI将会给我...

上海招聘网

上海招聘网

上海人才招聘网为传爱网络(易职邦)旗下门户网站,秉承服务于天下有发展需求的人!让用户在上海没有难找的工作。人才招聘网,全国有26个门户网站,遍布全国大江南北;科技赋能数字化改造,促进产教融合,必将创...

绿证: 提供绿色通行的权益保障,加速生态文明建设进程

绿证: 提供绿色通行的权益保障,加速生态文明建设进程

  在生态文明建设的过程中,逐渐出现了绿证这一概念。绿证,即环保通行证,是指在一定生态区域内进行交通运输或经营活动时,凭借特定的资质和证明文件,获得绿色通行的权益保障。绿证制...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。