React Native 中如何使用 useRef Hook？

推荐答案

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

// www.javascriptcn.com code example
import React, { useRef, useEffect } from 'react';
import { TextInput, Button, View } from 'react-native';

const MyComponent = () => {
  const inputRef = useRef(null);

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

  const handleButtonPress = () => {
    // 清空输入框内容
    inputRef.current.clear();
  };

  return (
    <View>
      <TextInput ref={inputRef} placeholder="Type something..." />
      <Button title="Clear Input" onPress={handleButtonPress} />
    </View>
  );
};

export default MyComponent;

本题详细解读

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 的更新不会触发组件的重新渲染。

// www.javascriptcn.com code example
const intervalRef = useRef();

useEffect(() => {
  intervalRef.current = setInterval(() => {
    console.log('Interval triggered');
  }, 1000);

  return () => clearInterval(intervalRef.current);
}, []);

4. 注意事项

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

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