05｜深入理解useRef

基本概念

在 FunctionComponent 中创建 ref 需要使用到useRef这个hook，函数签名如下

const refContainer = useRef(initalValue) 

useRef 函数接收一个初始值，并返回一个可变的（mutable） ref 对象，也就是我们的变量refContainer。这个对象上面会存在一个属性——current，它的默认值就是initalValue。这里有个比较重要的点就是useRef 创建返回的对象是可变的，并且它会在组件的整个生命周期中都存在，这也就以为着无论你在何时何地访问这个对象，它的值永远都是最新的值。

useState 创建出来的值是不可变的（immutable），每一次 render 都是新的值，而 useRef 创建出来的对象始终都是最开始的那个对象，其属性 current可以被赋值。

被 state 的数据更新所折磨的你是不是心里乐开了花儿 🤪 🤪 🤪

能替代useState吗？

不过不要高兴的太早，我们来看下它能不能代替“烦人”的 useState

function App() {const count = useRef(0)const addCount = () => {count.current++}const [num, setNum] = useState(0)const addNum = () => {setNum(num + 1)}const logCount = () => {console.log(count.current)}return (<div><div><span>count：{count.current}</span><span>num：{num}</span></div><button onClick={addCount}>count+1</button><button onClick={logCount}>查看count</button><button onClick={addNum}>更新num，重新render</button></div>)
} 

效果如下👇