React useRef useEffect

useRef是一个方法,且useRef返回一个可变的ref对象

1. 最传统的用法:

首先通过useRef创建一个对象叫h3Dom,并且赋值给button的ref上,这样在获取节点打印处,我们可以打印出对应的DOM

import {useState,useRef} from "react";
export const ShowDiv =()=>{
    const [ color,serColor] = useState('red')
    const h3Dom =useRef()
    //获取节点打印
    const getDom =()=>{
        console.log(h3Dom.current)
    }
    return(
  <div>
       <h3 ref={h3Dom}>字体颜色</h3>
       <button ref={{h3Dom}} onClick={()=>getDom()}>点击获取节点</button>
   </div>
    )
}

2.useRef使用在函数组件的时候

  funcation App(){
    const refInputNum = React.useRef(null);
    React.useEffect(()=>{
      refInputNum.current && refInputNum.current.focus();
    },[])
  return <input ref={refInputNum}/>
},

这里出现了useEffect,那么就简单介绍一下关于

useEffectuseEffect:hook函数的生命周期
替代

componentDidMount、
componentDidUpdate、
componentWillUnmount

关于useEffect的使用:

useEffect(()=>{
    console.log('组件执行挂载加载')
    return()=>{
        console.log('组件销毁时候执行')
    }
    //这里空数组不观察任何状态,只执行主线
},[])

useEffect(()=>{
    console.log('组件执行挂载加载')
    return()=>{
        console.log('组件销毁时候执行')
    }
    //这里观察count,count改变整个执行
},[count])

3.useRef实现跨渲染周期保存数据

在一个组件中有什么东西可以跨渲染周期,也就是在组件被多次渲染之后依旧不变的属性?第一个想到的应该是state。没错,一个组件的state可以在多次渲染之后依旧不变。但是,state的问题在于一旦修改了它就会造成组件的重新渲染。

那么这个时候就可以使用useRef来跨越渲染周期存储数据,而且对它修改也不会引起组件渲染。

import React, { useState, useEffect, useMemo, useRef } from 'react';

export default function App(props){
  const [count, setCount] = useState(0);

  const delOneCount = useMemo(() => {
    return  count - 1;
  }, [count]);

  const countNum= useRef();
  
  useEffect(() => {
    countNum.current = setInterval(()=>{
        setCount(count => count + 1);
    }, 1000); 
  }, []);
  
  useEffect(()=>{
      if(count < 10){
          clearInterval(countNum.current);
      }
  });
  
  return (
    <>
      <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, delNum: {countNum}</button>
    </>
  );
  }

在上面的例子中,我用ref对象的current属性来存储定时器的ID,这样便可以在多次渲染之后依旧保存定时器ID,从而能正常清除定时器。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值