React Native 中如何使用 useRef Hook？

推荐答案

在 React Native 中，useRef Hook 用于创建一个可变的引用对象，该对象在组件的整个生命周期中保持不变。useRef 通常用于访问 DOM 元素或存储任意可变值。

-- -------------------- ---- -------
------ ------ - ------- --------- - ---- --------
------ - ---------- ------- ---- - ---- ---------------

----- ----------- - -- -- -
  ----- -------- - -------------

  ------------ -- -
    -- -------------
    -------------------------
  -- ----

  ----- ----------------- - -- -- -
    -- -------
    -------------------------
  --

  ------ -
    ------
      ---------- -------------- ----------------- ------------- --
      ------- ------------ ------ --------------------------- --
    -------
  --
--

------ ------- ------------

本题详细解读

1. useRef 的基本用法

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的对象在组件的整个生命周期内保持不变。

const refContainer = useRef(initialValue);

2. 访问 DOM 元素

在 React Native 中，useRef 常用于访问 DOM 元素。通过将 ref 属性传递给组件，可以在 useRef 的 .current 属性中访问该组件的实例。

const inputRef = useRef(null);

// 在组件挂载后自动聚焦输入框
useEffect(() => {
  inputRef.current.focus();
}, []);

3. 存储可变值

useRef 也可以用于存储任意可变值，类似于类组件中的实例属性。与 useState 不同，useRef 的更新不会触发组件的重新渲染。

-- -------------------- ---- -------
----- ----------- - ---------

------------ -- -
  ------------------- - -------------- -- -
    --------------------- ------------
  -- ------

  ------ -- -- -----------------------------------
-- ----

4. 注意事项

• useRef 的 .current 属性是可变的，因此可以在任何时候修改它。
• 修改 useRef 的 .current 属性不会触发组件的重新渲染。
• useRef 的初始值只在组件的初始渲染时使用，后续渲染时会被忽略。

通过以上内容，你应该能够在 React Native 中正确使用 useRef Hook 来访问 DOM 元素或存储可变值。