useRef in react native

先搬上学习的内容文章：https://medium.com/@codenova/useref-in-react-native-b22f52a294b5

useRef的用处是：

Component References:

• useRef is often used to reference React Native components such as TextInput, ScrollView, or custom components. With these references, you can directly interact with the components by calling methods like focusing an input field or scrolling a view.
• Example: You can focus a TextInput or scroll a ScrollView using a reference created with useRef.

Storing Mutable Values:

• Another key use of useRef is to store mutable values that need to be updated or accessed between renders but should not trigger a re-render. This is useful when you want to track values like timers, counters, or other data that doesn’t affect the UI.
• Unlike state, updating a useRef value doesn’t re-render the component, making it ideal for scenarios where you need to maintain internal data that isn’t tied to the visual rendering.

Persistent Across Renders:

• Values stored in a useRef object are persistent between renders. This means that even when the component re-renders, the useRef value stays the same, unlike variables which reset on every render.

以下是我做的小测试：

import { useState, useRef } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'


// let countVar = 0;
function App() {
  const [count, setCount] = useState(0)
  const countRef = useRef(count);  // For storing mutable value


  // let countVar = 0;

  const incrementWithoutRerender = () => {
    countRef.current += 1;  // Updates ref without causing re-render
    console.log(countRef.current+' in WithoutRerender');  // Logs the updated value
    // countVar += 1;
    // console.log(countVar+' in WithoutRerender');
  };

  const incrementWithRerender = () => {
    setCount(count + 1);  // Updates state and triggers re-render
    console.log(countRef.current+' in WithRerender');
    // console.log(countVar+' in WithRerender');
  };

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={incrementWithRerender}>
          count is {count}
        </button>
        <p/><p/>
        <button title="Increment Without Re-render" onClick={incrementWithoutRerender} >
          countRef is {countRef.current}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

 

1.  按上述代码运行。countRef的值不受count变量的变化影响，只受incrementWithoutRerender 方法的影响，而且调用这个方法改变的时候，countRef在界面的值并不变化，这是因为UI没有被重新render，而countRef并不是state变量，因此界面上这个值并不会自动变化。当点击第一个按钮改变count的时候，第二个按钮的countRef的值在界面上就改变了，因为count的变化使得界面重新Render了。每次新的render并没有使得countRef的值变为0或count的当前值，这证明了useRef的变量值是可以cross render而保存数值的。

2.  我想为什么要用useRef呢，直接定一个普通的countVar变量不就行了吗？这时我定义了countVar在，但是定义在了App模块中。结果发现，如果点击第二个按钮让countVar变为大于0的数值后，再点击第一个按钮，count被加1，这时发现countVar变为0了。说明每次count刷新的时候会render页面，而定义在App函数中的其他普通变量都被重新赋值了。这就是render的作用。

3.  只有当把countVar定义在App函数外，才能达到和用useRef一样的效果，但是这样变量countVar就不是模块函数App的一部分了。

结论：
       useRef的变量可以保存可变的变量，并且在每次render的时候保持该变量不变。