学习内容:
react -hook
useRef 存值的方法。
useRef:
const refContainer = useRef(initialValue);
useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内持续存在。
一个常见的用例便是命令式地访问子组件:
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。
你应该熟悉 ref 这一种访问 DOM 的主要方式。如果你将 ref 对象以
然而,useRef() 比 ref 属性更有用。它可以很方便地保存任何可变值,其类似于在 class 中使用实例字段的方式。
这是因为它创建的是一个普通 Javascript 对象。而 useRef() 和自建一个 {current: …} 对象的唯一区别是,useRef 会在每次渲染时返回同一个 ref 对象。
请记住,当 ref 对象内容发生变化时,useRef 并不会通知你。变更 .current 属性不会引发组件重新渲染。如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码,则需要使用回调 ref 来实现。
注:
React中的Refs为我们提供了一种在组件的整个生命周期中存储可变值的方法,并且通常用于与DOM交互而无需重新渲染组件。换句话说,我们不需要依赖状态管理来使用Refs更新元素。这在某些特定的使用案例中非常有用,但在代替状态管理或生命周期方法集成时,也被视为一种反模式。
(使用useRef进行参数的存储,例如:使用
inputEl.current.自定义 去修改存入的参数,方法去取值的参数有变化,但是里面的数据变化并不会让dome 重新渲染,所以需要进行动态修改的值不要存放在useref 里面,用useState去进行存储)