React中Ref的作用小结

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myInputRef = React.createRef();
  }
 
  focusInput = () => {
    this.myInputRef.current.focus();
  };
 
  render() {
    return (
      <div>
        <input type="text" ref={this.myInputRef} />
        <button onClick={this.focusInput}>聚焦输入框</button>
      </div>
    );
  }
}

import React, { useRef } from 'react';
 
const MyFunctionComponent = () => {
  const inputRef = useRef(null);
 
  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
 
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>聚焦输入框</button>
    </div>
  );
};

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myInputRef = null;
  }
 
  setMyInputRef = (element) => {
    this.myInputRef = element;
  };
 
  focusInput = () => {
    if (this.myInputRef) {
      this.myInputRef.focus();
    }
  };
 
  render() {
    return (
      <div>
        <input type="text" ref={this.setMyInputRef} />
        <button onClick={this.focusInput}>聚焦输入框</button>
      </div>
    );
  }
}

import React, { useState, useRef } from 'react';

const SimpleInputComponent = () => {
  const [inputValue, setInputValue] = useState(0); // React状态
  const inputRef = useRef(0); // DOM引用

  // 处理输入框变化，更新React状态
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  // 直接通过Ref修改DOM值（不推荐）
  const forceUpdateDOMValue = () => {
    if (inputRef.current) {
      inputRef.current.value = 1;
      // 注意：这里虽然DOM值变了，但React状态inputValue没有变
    }
  };

  // 通过useState更新状态（推荐）
  const updateStateValue = () => {
    setInputValue(2);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue} // 这里绑定的是React状态
        onChange={handleInputChange} // 更改时会更新React状态
        ref={inputRef} // 绑定DOM引用
      />
      <button onClick={forceUpdateDOMValue}>通过Ref直接修改DOM值</button>
      <button onClick={updateStateValue}>通过useState更新状态</button>
      <p>当前React状态值：{inputValue}</p>
    </div>
  );
};

export default SimpleInputComponent;