React hooks - Ref 使用实例

  • useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。
  • useRef() ,它可以很方便地保存任何可变值,其类似于在 class 中使用实例字段的方式

1.获取state的旧值

  • demo
import React,{useState,useRef,useEffect} from "react";

function Example () {
  const [count, setCount] = useState(0);
  const usePrevious = (value)=> {
    const ref = useRef()
    useEffect(() => {
      ref.current = value
    })
    return ref.current
  }
  const previousCount = usePrevious(count);

  console.log(previousCount, count, '之前的状态和现在的状态')
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => {setCount(count+1)}}>+</button>
    </div>
  )
}
export default Example

2.异步回调中获取state最新的值

  • 在异步回调中获取最近的value值,用 一个 ref 来保存它,修改它,并从中读取
  • demo
import React,{useState,useRef} from "react";

function Example () {
  const [count, setCount] = useState(0);
  const ref = useRef(0)

  function handleAlertClick () {
    setTimeout(() => {
      console.log(`最新值:${ref.current}`)
      console.log(`非最新值:${count}`);
    }, 3000)
  }

  function increment () {
    const newCount = count + 1;
    setCount(newCount)
    ref.current = newCount
  }

  return (
    <div>
      <div>{count}</div>
      <button onClick={increment}>+</button>
      <button onClick={handleAlertClick}>点击</button>
    </div>
  )
}
export default Example

  • 请记住,当 ref 对象内容发生变化时,useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码,则需要使用回调 ref 来实现

参考链接

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值