react useref 原理
React useRef 原理
React 是一个非常流行的前端框架，它是基于组件化开发的思想，提供了一种声明式的方式来构建用户界面。在 React 中，组件是构成应用的基本单元，但是组件之间的通信并不容易，因为 React 的数据流是单向的，也就是说父组件可以向子组件传递数据，但是子组件无法直接修改父组件传递过来的数据。
为了解决这个问题，React 提供了 useRef 这个 Hook，它可以让我们在函数组件中保存一些状态信息，而且这些状态信息可以在组件重新渲染时被保留下来。下面我们来详细了解一下 useRef 的原理和用法。
一、useRef 的原理
在 React 中，每个组件都有自己的状态，也就是 state。state 是一个对象，它包含了组件需要的所有数据。当组件状态发生变化时，React 会重新渲染组件，并把新的状态传递给组件的 render 方法。
但是有些情况下，我们需要在组件之间共享一些数据，而这些数据又不应该被包含在组件的状态中。比如，我们需要在一个表单组件中保存表单的输入值，这些输入值应该在表单提交时一起发送给后端，而不是每个输入框都保存一份状态。
在这种情况下，我们可以使用 useRef 来保存这些输入值。useRef 返回一个可变的 ref 对象，这个对象可以在组件重新渲染时保留其值。我们可以把 ref 对象传递给表单的输入框，然后在输入框的 onChange 事件中更新 ref 对象的值。
下面是一个简单的例子：
```javascript
function Form() {
  const inputRef = useRef(null);
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}
```
上面的例子中，我们创建了一个 inputRef 对象，并将其传递给输入框。然后在 handleSubmit 方法中，我们可以通过 inputRef.current.value 获取输入框的值。
二、useRef 的用法
除了保存表单输入值之外，useRef 还可以用于保存一些其他的信息，比如定时器的 ID、DOM 节点的引用等。下面是一些 useRef 的常见用法：
1. 保存表单输入值
```javascript
function Form() {
  const inputRef = useRef(null);
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>react开发框架
  );
}
```
2. 保存定时器 ID
```javascript
function Timer() {
  const [time, setTime] = useState(0);
  const intervalRef = useRef(null);
  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setTime((prevTime) => prevTime + 1);
    }, 1000);
  };
  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };
  return (
    <div>
      <p>Time: {time}</p>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}
```
上面的例子中，我们使用 useRef 来保存定时器的 ID。在 startTimer 方法中，我们把 setInterval 返回的 ID 赋值给 intervalRef.current，然后在 stopTimer 方法中清除定时器。
3. 保存 DOM 节点的引用
```javascript
function Modal() {
  const modalRef = useRef(null);
  const openModal = () => {
    modalRef.current.style.display = "block";
  };
  const closeModal = () => {
    modalRef.current.style.display = "none";
  };
  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      <div className="modal" ref={modalRef}>
        <button onClick={closeModal}>Close Modal</button>
        <p>Modal Content</p>
      </div>
    </div>
  );
}
```
上面的例子中，我们使用 useRef 来保存 modal 节点的引用。然后在 openModal 和 closeModal 方法中，我们可以通过 modalRef.current 来操作 modal 节点。