useRef

useRef 在你的 React 组件中创建和管理可变容器。

用法

ReScriptJS Output

let refContainer = React.useRef(initialValue);

React.useRef 返回可变的 ref 对象，它的 .current 记录字段被初始化为 initialValue。返回的对象将存活到组件的整个生命周期结束。

实质上，React.ref 就像一个”盒子“，它将可变值保存在 .current 记录字段。

作为访问 DOM 节点的主要方式，你可能对 refs 很熟悉。如果你通过 <div ref={ReactDOM.Ref.domRef(myRef)} /> 将一个 ref 对象传给 React，当相应的 DOM 节点发生改变的时候， React 会将 .current 属性设置为该节点。

然而，useRef() 不仅适用于 ref 属性。它可以方便地保存可变值，类似于在类中使用实例字段的方式。

这是因为 useRef() 创建了一个普通 JavaScript 对象。使用 useRef() 和自己创建 {current: ...} 对象的区别是，useRef 会在每次渲染时给你相同的 ref 对象。

请记住，useRef 在它的内容变更时不会通知你。修改 .current 记录字段不会导致重新渲染。如果你想要在 React 向 DOM 节点附加或分离 ref 时运行一些代码，你可能需要使用回调 ref。

关于直接操作 DOM 的更多信息，参见 Refs & DOM。

示例

管理 Text Input 的焦点

ReScriptJS Output

// TextInputWithFocusButton.res

@send external focus: Dom.element => unit = "focus"

@react.component
let make = () => {
  let inputEl = React.useRef(Js.Nullable.null)

  let onClick = _ => {
    inputEl.current
    ->Js.Nullable.toOption
    ->Belt.Option.forEach(input => input->focus)
  }

  <>
    <input ref={ReactDOM.Ref.domRef(inputEl)} type_="text" />
    <button onClick> {React.string("Focus the input")} </button>
  </>
}

使用回调 Ref

Refs & DOM 章节的例子：

ReScriptJS Output

// CustomTextInput.res

@send external focus: Dom.element => unit = "focus"

@react.component
let make = () => {
  let textInput = React.useRef(Js.Nullable.null)
  let setTextInputRef = element => {
    textInput.current = element;
  }

  let focusTextInput = _ => {
    textInput.current
    ->Js.Nullable.toOption
    ->Belt.Option.forEach(input => input->focus)
  }

  <div>
    <input type_="text" ref={ReactDOM.Ref.callbackDomRef(setTextInputRef)} />
    <input
      type_="button" value="Focus the text input" onClick={focusTextInput}
    />
  </div>
}