本文共 1326 字，大约阅读时间需要 4 分钟。

• 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 (    
   
      
    
     {
   count}
    
      
     {
   setCount(count+1)}}>+    
   
  )}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 (    
   
      
    
     {
   count}
    
      
    +      
    点击    
   
  )}export default Example

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

参考

转载地址：http://xfqii.baihongyu.com/