代码之家 › 专栏 › 技术社区 › Rico Kahler

“useref”和“createref”有什么区别?

react-hooks reactjs javascript

Rico Kahler · 技术社区 · 6 年前

当我偶然发现钩子文档时 useRef .

看看他们的例子

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

看起来像 乌瑟夫 可替换为 createRef .

function TextInputWithFocusButton() {
  const inputRef = createRef(); // what's the diff?
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputRef.current.focus();
  };
  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

为什么我需要一个钩子作为参考?为什么 乌瑟夫 存在?

2 回复 | 直到 6 年前

Ryan Cogswell 6 年前

区别在于 createRef 将始终在基于类的组件中创建一个新的引用,通常在构造期间将该引用放在实例属性中(例如 this.input = createRef() )在函数组件中没有此选项。 useRef 注意每次返回与初始渲染相同的引用。

下面是一个示例应用程序,演示了这两个函数的行为差异:

import React, { useRef, createRef, useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [renderIndex, setRenderIndex] = useState(1);
  const refFromUseRef = useRef();
  const refFromCreateRef = createRef();
  if (!refFromUseRef.current) {
    refFromUseRef.current = renderIndex;
  }
  if (!refFromCreateRef.current) {
    refFromCreateRef.current = renderIndex;
  }
  return (
    <div className="App">
      Current render index: {renderIndex}
      <br />
      First render index remembered within refFromUseRef.current:
      {refFromUseRef.current}
      <br />
      First render index unsuccessfully remembered within
      refFromCreateRef.current:
      {refFromCreateRef.current}
      <br />
      <button onClick={() => setRenderIndex(prev => prev + 1)}>
        Cause re-render
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Joe Clay 6 年前

createRef 总是返回一个新的引用,通常将其存储为类组件实例上的字段。 useRef 收益率 同样的裁判 函数组件实例的每次呈现时。这允许在渲染之间保持引用的状态,尽管您没有将其明确存储在任何位置。

在第二个示例中,将在每次渲染时重新创建引用。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

9 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

10 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

10 月前

Luckkks · 过渡色工作不正常

10 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

10 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

10 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

10 月前

noblerare · Vite错误-未定义导出(SSR)

10 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

10 月前