我应该使用 createRef 还是 useRef，为啥？

Posted 2023-02-22

【中文标题】我应该使用 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() 这样需要直接访问组件的东西。

***.com/questions/54620698/…

我也有一个阶段，我想将 useRef 用于文本输入，因为我不喜欢每次更改文本时状态更改如何导致重新渲染……这不值得。 useState 要简单得多，它可以正常工作。此外，Facebook 每隔一段时间就会改变 refs 的工作方式，一天是 ref.value，另一天是 ref.current.value ......这只是一件麻烦事。 ref 还包含许多您不需要的元信息。只使用状态。 :)

【参考方案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) />