useRef和useState在 react Hooks中用法

useRef在 react Hooks中用法

useRef()

• 返回ref对象在组件整个生命周期内持续存在.
• 值存在.current属性中.
• 将 ref 对象以
  形式传入组件，则无论该节点如何改变，React 都会将ref对象的.current 属性设置为相应的 DOM 节点.
• 和普通对象的区别：useRef() 和自建一个 {current: …} 对象的唯一区别是，useRef 会在每次渲染时返回同一个 ref 对象
• 应用场景:
  1. input输入框 绑定ref属性；
  2. 计数count，eg倒计时记录每一次time

useState()

const [state, setState] = useState(initialState);
1

setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

• useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

const [state, setState] = useState({});
setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});
1
2
3
4
5

为什么不用let外部变量替代useRef

1. 代码：

import { useEffect, useState } from "react";
import "./styles.css";
const AppDemo14 = () => {
  console.log("render");
  const [count, setCount] = useState(0);
  let prevCount;
  useEffect(() => {
    console.log("useEffect", prevCount);
    prevCount = count;
  }, [count]);
  return (
    <div className="App">
      <h1>
        Now: {count}, before: {prevCount}
      </h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. 结果及分析：useEffect（）里prevCount赋值会在每次render时跳过，一直是undefined值。况且组件外的变量在不同渲染时可被公用。而useRef,作为组件实例的变量，保证获取到的数据肯定是最新的。

useRef() 和useState()区别

1. 两者都在渲染周期和 UI 更新期间保留其数据，但只有useState具有更新程序功能的 Hook 会导致重新渲染
2. 返回不同。useRef返回一个对象，该对象具有current保存实际值的属性。相反，useState返回一个包含两个元素的数组：第一项构成状态，第二项表示状态更新器函数。
3. useRef的current属性是可变的，但useState状态变量不是。
4. useRef可以对 React 组件或 DOM 元素的直接访问

参考资料

1. useState 与 useRef：相同点、不同点和用例\
2. 官方文档API
3. useState和useRef的区别
   的区别](https://cloud.tencent.com/developer/article/1884542)
4. useRef详细总结