react性能优化之useRef和useState

一、两者的区别

1.更新机制不同

useState : 当值更新时会触发组件重新渲染

useRef : 更新值不会触发重新渲染

2.值的存储方式

useState : 返回一个状态值和更新函数的数组，每次更新都会创建新的状态值

useRef : 返回一个可变的 ref 对象，该对象在组件的整个生命周期内保持不变

3.使用场景

useState : 适用于需要在视图层显示的数据，比如用户输入、UI状态等

useRef : 适用于需要在组件生命周期内保持的值，但不需要触发重新渲染，比如：
DOM 引用、定时器 ID、防抖节流的标记等

4.访问和修改方式

useState : 通过解构获得状态值和设置函数，如 const [value, setValue] = useState(initialValue)

useRef : 通过 .current 属性访问和修改值，如 const ref = useRef(initialValue); ref.current = newValue

二、总结

它的状态变化需要触发UI更新的使用useState

它是内部状态管理，不需要触发重新渲染的，使用useRef，可以减少性能开销。