react函数组件 生命周期ref

很抱歉，您提供的引用内容中没有提到React函数组件的生命周期和ref。但是，我可以为您提供一些React函数组件的相关信息。

React函数组件是一种定义为JavaScript函数的组件，它接收一个props对象并返回一个React元素。与类组件不同，函数组件没有实例，也没有生命周期方法。但是，React 16.8版本引入了Hooks，它们允许函数组件具有状态和其他特性，例如生命周期方法。

关于ref，它是React中用于访问DOM节点或React元素的机制。在函数组件中，可以使用useRef Hook来创建ref。useRef返回一个可变的ref对象，可以在组件的整个生命周期中保持不变。可以将ref对象传递给组件的子元素，以便在需要时访问子元素的属性或方法。

下面是一个使用useRef Hook创建ref的示例：

import React, { useRef } from 'react';

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

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

在上面的示例中，useRef Hook创建了一个名为inputRef的ref对象，并将其传递给input元素的ref属性。当按钮被点击时，handleClick函数将调用inputRef.current.focus()来聚焦输入框。