先看一个小案例,点击+1案例
第一个是使用useRef写的
第二个是使用useState写的
那么这两个有什么区别呢
点击第一个按钮
控制台打印,《这是用ref写的count: 1》
但是为什么页面显示的还是:0
区别1:渲染不同
useRef:值发生改变不会触发页面重新渲染,并且useRef的值可以在组件重新渲染时保持不变。
useState:值发生改变会使页面重新渲染,
注意:useState如果存储的是对象类型的数据,即使值发生了改变也不会渲染,因为新值和旧值的引用地址还是一样的,如果想要让他进行渲染,需要提供一个新的对象
区别2:获取数据方式不同
useRef:countRef.current。(获取数据)
useState:直接获取即可
区别3:获取的数据不同
useRef:获取的数据是最新的值
useState:获取的数据是旧值,因为useState是异步操作
接下来看一下区别3的演示
可以看到,当我点击第二个按钮时,页面渲染了,因为可以看到第二个count值,但是为什么第一个count也变成了1呢?
答:
这也验证了区别1:并且useRef的值可以在组件重新渲染时保持不变
因为我点了一下按钮1,值已经发生改变了,只是页面没有渲染,接着我点了按钮2,state的值发生改变,渲染页面,也就使count1的值也渲染了一下,
最后总结一下
当使用useState
时,您可以创建和管理组件的状态。它接受一个初始值作为参数,并返回一个包含当前状态值和更新状态的函数的数组。通过调用更新状态的函数,您可以更新状态的值,并触发组件的重新渲染。
当使用useRef
时,您可以创建一个可变的引用对象,用于存储和访问值。它返回一个包含.current
属性的ref对象,该属性可以用来存储和访问值。与状态不同,useRef
的值可以在组件重新渲染时保持不变。
总结起来,useState
用于创建和管理组件的状态,而useRef
用于存储和访问可变值。它们都是React中常用的钩子,用于在函数式组件中进行状态管理。
差点忘了,还有代码示例
import React, {useRef, useState} from 'react';
export default function App(props) {
const countRef = useRef(0);
const increment = () => {
countRef.current += 1;
console.log('这是用ref写的count:', countRef.current);
};
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
console.log('这是用state写的count:', count);
};
return (
<div>
<h1>这是用ref写的count: {countRef.current}</h1>
<button onClick={increment}>Increment1</button>
<hr/>
<h1>这是用state写的count: {count}</h1>
<button onClick={incrementCount}>Increment2</button>
</div>
);
}