React-hooks使用之useRef

今天抽个时间来讲讲useRef这个hooks叭~

useRef(初始参数)返回一个可变的对象:{current:value}，返回的对象保持整个组件周期内都不会变，所以在函数组件中的一个全局变量，不会因为多次render 重复申明，相当于类式组件的this.***

第一个用法：

export default function Demo() {
  const refTest = useRef(0);
  console.log(refTest);
  const add = () => {
    refTest.current += 1;
    console.log(`${refTest.current}`);
  };
  return (
    <div className="Demo">
      <h1>当前current:{refTest.current}</h1>
      <button onClick={add}>点击+1</button>
    </div>
  );
};

第一次控制台打印出current，初始值为0，是定义时传入的0

并且useRef的变化不会引发页面重新渲染，点击button按钮，current变为1，页面的current依旧为0。

第二个用法

作用于dom元素上：
学过vue的小伙伴对于绑定ref应该不陌生
react中是通过内置的current属性得到dom元素上的值：

 const iref=React.useRef(null)
  const func=()=>{
    console.log(iref.current.value);
  }
  return (
    <div>
      <input ref={iref} type='text'/>
      <button onClick={func}>点击获取input值</button>
    </div>
  )

结果：
好啦，今天的分享到此结束，后续继续更新react的几个hooks，下篇文章见~~