useRef

image.png

const HelloWorld = function (props) {
  const ref = useRef();

  return <h2>HelloWorld</h2>;
};

useRef返回一个ref对象，这个helloWorld不论被执行多少次，这个ref返回的都是同一个对象。
两种用法：
1.引用DOM
这种用法和createRef的用法一样。
不能直接使用原生方法

import React, { memo, useEffect } from "react";

const App = memo(() => {
  useEffect(() => {
    const titleEl = document.querySelector(".title");
  }, []);
  return (
    <div>
      <h2 className="title">Hello World</h2>
      <button>查看titel的dom</button>
    </div>
  );
});

export default App;

并不能确保全部只有一个title属性，其他地方也有，
以前再类组件中有一个createRef。

 myRef = React.createRef();
<input
             ref={this.myRef}
             type="text"
             placeholder="点击按钮提示数据"
           />

```

再函数组件中使用useRef
```js
import React, { memo, useRef } from "react";

const App = memo(() => {
const titleRef = useRef();
const inputRef = useRef();
const showTitleDom = () => {
 console.log(titleRef.current); //节点对象
 console.log(titleRef.current.innerHTML); //Hello World
 inputRef.current.focus();
};
return (
 <div>
   <h2 className="title" ref={titleRef}>
     Hello World
   </h2>
   <button onClick={showTitleDom}>查看titel的dom</button>
   <input type="text" ref={inputRef}></input>
 </div>
);
});

export default App;
```

2.使用ref保存上一次的某一个值，解决闭包陷阱
useRef最大的特点就是不论你调用多少次，返回的都是同一个对象。
![image.png](https://img.haomeiwen.com/i27388007/01e6f0ca7dbd93d0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
想在第一次挂载完拿useEffect里面的值，把它保存到组件里面，就可以用useRef定义一个值，设置current，以后在别的地方
![image.png](https://img.haomeiwen.com/i27388007/755b5a55ed87a4f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
就可以直接使用了。
```js
import React, { memo, useState, useRef } from "react";

let obj = null;
const App = memo(() => {
const [count, setCount] = useState(0);
const nameRef = {};
/* 如果定义一个对象，每次都是返回新的对象 */
const nameRef1 = useRef();
/* 这样的化，在整个声明周期里面，这个nameRef1始终都是同一个 */
console.log(obj === nameRef1);
obj = nameRef1;
return (
 <div>
   <h2>{count}</h2>
   <button onClick={(e) => setCount(count + 1)}>点我加一</button>
 </div>
);
});

export default App;
```
```js
import React, { memo, useState, useRef, useCallback } from "react";

let obj = null;
const App = memo(() => {
const [count, setCount] = useState(0);

const countRef = useRef();
countRef.current = count;
const increment = useCallback(() => {
 setCount(countRef.current + 1);
}, []);

console.log(increment === obj);
obj = increment;

return (
 <div>
   <h2>{count}</h2>
   <button
     onClick={(e) => {
       increment();
     }}
   >
     点我加一
   </button>
 </div>
);
});

export default App;

```


#总结：
1.绑定dom
2.使用ref保存上一次的某一个值（解决闭包陷阱）