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 来实现

参考链接