之前介绍表单元素的时候我们在 class 类型的组件里，使用 ref 对象引用过页面元素。创建一个 ref 对象，让它作为元素的 ref 属性的值，react 就会把对应的页面元素交给 ref 对象的 current 属性，也就是你可以通过 ref 对象的 current 属性的值，控制使用这个页面元素。

在函数式的组件里，可以使用 useRef 创建一个 ref 对象，再把它交给要引用的元素。在 AppHook 组件里，声明一个 textInput，用一下 useRef 这个 hook，默认值设置成 null，然后设置一下值的类型，因为一会儿要把它交给一个 Input 元素，所以这里可以把值的类型设置成 HTMLInputElement。

下面再用一个 useEffect，提供一个回调函数，里面用 console.log 输出 textInput，后面加上 textInput.current 这个属性的值。然后再用一下 textInput.current! ，这个属性的值应该是一个 text 类型 input 元素，我们调用一下元素上的 focus() 方法让它进入焦点状态。

在组件的视图这里，找个地方添加一个 text 类型的 input 元素，设置一下它的 ref 属性，值就是上面我们创建的这个 ref 对象，名字是 textInput， react 会把这个元素作为这个 ref 对象的 current 这个属性的值。

在浏览器观察一下，现在界面上会显示一个文本框元素，显示它的时候会自动进入焦点状态，因为我们使用了一个 ref 对象获取到了这个文本框元素，然后调用了元素上的 foucs() 方法让它进入焦点状态。在控制台上，你会发现输出的 ref 对象里的 current 属性的值，就会是在页面上显示的这个 input 元素。