关于 useRef 的使用

关于 useRef 的使用

useRef类似于React.createRef.

1. 用于绑定 DOM

使用类组件

class App extends React.Component {
  refInput = React.createRef();
  componentDidMount() {
    this.refInput.current && this.refInput.current.focus();
  }
  render() {
    return ;
  }
}

使用函数组件

function App() {
  const refInput = React.useRef(null);
  React.useEffect(() => {
    refInput.current && refInput.current.focus();
  }, []);

  return ;
}

2. 父组件调用子组件方法

一些应用场景,需要在父组件中调用子组件定义的方法.这就需要将组件抛出给父组件.

使用类组件

class ChildComponent extends Component {
  state = { text: "" };
  setText(text = "") {
    this.setState({ text });
  }
  render() {
    return 
text: {this.state.text}
;
  }
}

class ParentComponent extends Component {
  refChild = React.createRef();
  setChildText = () => {
    if (this.refChild.current) {
      this.refChild.current.setText("text updated by parent component");
    }
  };
  render() {
    return (
      <>
        {/* 父组件引用时,直接使用 ref 即可绑定子组件实例 */}
        
        set text by parent
      
    );
  }
}

使用函数组件
需要配合useImperativeHandle使用

function Child(props, ref) {
  const [text, setText] = useState("");

  // 该 hook 需要定义抛出给父组件的可以使用的 api 方法
  // 相当于代理了子组件的方法
  useImperativeHandle(ref, () => ({
    setTextByParent(text = "") {
      setText(text);
    },
  }));

  return 
text: {text}
;
}

// 函数组件需要使用 forwardRef 包裹
const ForwardChild = forwardRef(Child);

function Parent() {
  const ref = useRef(null);

  return (
    <>
      
       {
          ref.current &&
            ref.current.setTextByParent("text updated by parent component");
        }}
      >
        set text by parent
      
    
  );
}

在 code-sand-box 中查看