我应该使用 createRef 还是 useRef，为什么？答案

【问题标题】：Should I use createRef or useRef and why?我应该使用 createRef 还是 useRef，为什么？
【发布时间】：2021-05-08 02:59:25
【问题描述】：

在这个组件中，我不确定是否应该使用 createRef 和 useRef 从输入中获取信息。你能帮我弄清楚我应该如何选择其中一个吗？提前致谢

import React from 'react'

const AddBook = (props) => {

    const handleNewBook = props.handle
    let titleInput = React.createRef();
    let authorInput = React.createRef();

    return (
      <div className="add-book">
        <span className="add-book-title">Add a book:</span>
        <form>
          <input type="text" ref={titleInput} placeholder="Title" />
          <input type="text" ref={authorInput} placeholder="Author" />
          <button
            type="reset"
            onClick={() =>
              handleNewBook(titleInput.current.value, authorInput.current.value)
            }
          >
            Add
          </button>
        </form>
      </div>
    );
}

export default AddBook

【问题讨论】：

最好使用受控输入，value、onChange 并保持值处于状态。通常你会使用ref 来处理像inputRef.focus() 这样需要直接访问组件的东西。
stackoverflow.com/questions/54620698/…
我也有一个阶段，我想将 useRef 用于文本输入，因为我不喜欢每次更改文本时状态更改如何导致重新渲染……这不值得。 useState 要简单得多，它可以正常工作。此外，Facebook 每隔一段时间就会改变 refs 的工作方式，一天是 ref.value，另一天是 ref.current.value ......这只是一件麻烦事。 ref 还包含许多您不需要的元信息。只使用状态。 :)

标签： reactjs jsx

【解决方案1】：

CreateRef 通常用于类组件中。

useRef（创建引用的钩子）用于功能组件。

由于您正在使用功能最佳使用useRef。

【讨论】：

【解决方案2】：

关于useRef和createRef的区别：What's the difference between `useRef` and `createRef`?

无论如何，在您的情况下，如果您需要受控输入，您应该处理组件状态：

import React, { useState } from 'react';

const AddBook = (props) => {

    const handleNewBook = props.handle
    const [state, setState] = useState({})

    return (
      <div className="add-book">
        <span className="add-book-title">Add a book:</span>
        <form>
          <input type="text" value={state.title} onChange={e => setState(prev => ({...prev, title: e.target.value}))} placeholder="Title" />
          <input type="text" value={state.author} onChange={e => setState(prev => ({...prev, author: e.target.value}))} placeholder="Author" />
          <button
            type="reset"
            onClick={() =>
              handleNewBook(state.title, state.author)
            }
          >
            Add
          </button>
        </form>
      </div>
    );
}

【讨论】：

通常您会使用const [title, setTitle] = useState('');，author 也是如此。这将使您的输入更具可读性<input type="text" value={title} onChange={e => setTitle(e.target.value)} />