首頁手記 useRef學習：React Hooks入門教程

useRef學習：React Hooks入門教程

標簽：

JavaScript React.JS Vue.js

概述

本文详细介绍了useRef学习，包括useRef的基本概念、使用方法以及在React Hooks中的应用场景。文章还探讨了useRef与其他Hooks结合使用的方法，并提供了多个代码示例来帮助理解。

useRef简介

什么是useRef

useRef 是 React Hooks 中的一个 Hook，它允许你在函数组件中保存一些可变的值。它返回一个可变的 ref 对象，将其 .current 属性设置为初始化时提供的值，并在组件的整个生命周期中保持不变。useRef 的主要用途是直接操作 DOM 元素或者保存一个可变值，而不需要使用状态（state）。

useRef的用法

useRef 的语法如下：

const ref = useRef(initialValue);

initialValue 是 useRef 返回的 ref 对象的 .current 属性的初始值。这个初始值可以是任何类型，如 null、string、number 等。这个 ref 对象将被用于在组件中访问和操作 DOM 元素或可变值。

useRef与ref的区别

React 提供了两种方式来获取 DOM 节点和执行副作用操作：ref 和 useRef。ref 通常用于类组件，而 useRef 用于函数组件。

类组件中的 ref

在类组件中，ref 可以通过 React.createRef 创建，并通过 this 关键字访问。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current); // 输出 <div> 元素
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

函数组件中的 useRef

在函数组件中，useRef 用于创建 ref 对象，并在组件的生命周期中保持不变。例如：

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

  useEffect(() => {
    console.log(myRef.current); // 输出 <div> 元素
  }, []);

  return <div ref={myRef}>Hello, World!</div>;
}

useRef的基本使用

创建一个useRef实例

创建一个 useRef 实例需要调用 useRef 函数，并传入初始值。初始值可以是任何类型，如 null、string、number 等。

const ref = useRef(initialValue);

例如：

function MyComponent() {
  const myRef = useRef(0); // 初始化值为 0
  console.log(myRef.current); // 输出 0
}

如何在组件中使用useRef

在组件中使用 useRef 的方式，是通过将 useRef 创建的 ref 对象传递给组件的某个元素。例如，你可以将 ref 对象传递给 div 元素：

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

  useEffect(() => {
    console.log(myRef.current); // 输出 <div> 元素
  }, []);

  return <div ref={myRef}>Hello, World!</div>;
}

在这个例子中，myRef 被传递给 div 元素，因此 myRef.current 将指向 div 元素本身。

useRef实例的current属性

useRef 返回的 ref 对象有一个名为 .current 的属性，该属性可以被设置为任何值。在组件更新过程中，该属性不会触发重新渲染，因为 useRef 并不会影响组件的输入（props）或者状态（state）。

设置current属性

你可以在组件的生命周期中任意时刻设置 .current 属性。例如：

function MyComponent() {
  const myRef = useRef(0);

  const handleClick = () => {
    myRef.current = 1; // 设置 .current 属性
    console.log(myRef.current); // 输出 1
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      <p>Current value: {myRef.current}</p>
    </div>
  );
}

读取current属性

你也可以在组件的方法中读取 .current 属性。例如：

function MyComponent() {
  const myRef = useRef(0);

  useEffect(() => {
    console.log(myRef.current); // 输出 0
  }, []);

  return <div ref={myRef}>Hello, World!</div>;
}

useRef的典型应用场景

保存DOM元素

useRef 常用于保存 DOM 元素，以便在组件中直接操作这些元素。例如，你可以使用 useRef 来获取某个 DOM 元素的尺寸或样式。

获取元素尺寸

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

  useEffect(() => {
    console.log(ref.current.offsetWidth); // 输出元素宽度
  }, []);

  return <div ref={ref}>Hello, World!</div>;
}

修改元素样式

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

  const changeStyle = () => {
    ref.current.style.color = "red"; // 改变文本颜色
  };

  return (
    <div>
      <div ref={ref}>Hello, World!</div>
      <button onClick={changeStyle}>Change Color</button>
    </div>
  );
}

保存可变值

useRef 也可以用于保存可变值，而不需要使用状态（state）。例如，你可以在 useRef 中保存一个计数器，并在某个事件触发时更新这个计数器。

function MyComponent() {
  const counter = useRef(0);

  const incrementCounter = () => {
    counter.current += 1; // 更新计数器
    console.log(counter.current); // 输出当前计数器的值
  };

  return (
    <div>
      <p>Counter: {counter.current}</p>
      <button onClick={incrementCounter}>Increment</button>
    </div>
  );
}

修改DOM属性和样式

除了保存 DOM 元素和可变值外，useRef 还可以用于修改 DOM 元素的属性和样式。例如，你可以使用 useRef 来动态改变元素的属性或样式。

修改元素属性

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

  const changeAttribute = () => {
    ref.current.setAttribute("class", "new-class"); // 修改元素的 class 属性
  };

  return (
    <div>
      <div ref={ref}>Hello, World!</div>
      <button onClick={changeAttribute}>Change Attribute</button>
    </div>
  );
}

修改元素样式

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

  const changeStyle = () => {
    ref.current.style.backgroundColor = "blue"; // 修改元素的背景颜色
  };

  return (
    <div>
      <div ref={ref}>Hello, World!</div>
      <button onClick={changeStyle}>Change Style</button>
    </div>
  );
}

useRef与其他Hooks的结合使用

useRef与useState结合

useRef 可以与 useState 结合使用，以在不触发重新渲染的情况下更新可变值。例如，你可以在 useState 中保存一个计数器，并使用 useRef 来保存该计数器的最新值。

function MyComponent() {
  const [count, setCount] = useState(0);
  const latestCount = useRef(count);

  useEffect(() => {
    latestCount.current = count; // 更新最新计数器值
  }, [count]);

  const incrementCount = () => {
    setCount(count + 1); // 更新计数器
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Latest Count: {latestCount.current}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

在这个例子中，当 count 更新时，latestCount.current 也会更新，但不会触发重新渲染。

useRef与useEffect结合

useRef 可以与 useEffect 结合使用，以在组件卸载时保存某些状态。例如，你可以使用 useRef 来保存组件卸载前的状态。

function MyComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count; // 保存最新计数器值
  }, [count]);

  useEffect(() => {
    return () => {
      console.log("Component will unmount. Latest count:", countRef.current);
    };
  }, []);

  const incrementCount = () => {
    setCount(count + 1); // 更新计数器
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
}

在这个例子中，当组件卸载时，countRef.current 将被输出。

useRef与useContext结合

useRef 可以与 useContext 结合使用，以在组件中保存上下文值。例如，你可以使用 useRef 来保存上下文值，并在组件的方法中使用这些值。

const ThemeContext = React.createContext("light");

function App() {
  const [theme, setTheme] = useState("light");

  return (
    <ThemeContext.Provider value={theme}>
      <ThemeSwitcher />
      <MyComponent />
    </ThemeContext.Provider>
  );
}

function ThemeSwitcher() {
  const setTheme = useContext(ThemeContext);

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };

  return (
    <button onClick={toggleTheme}>
      Switch Theme ({setTheme === "light" ? "Dark" : "Light"})
    </button>
  );
}

function MyComponent() {
  const theme = useContext(ThemeContext);
  const themeRef = useRef(theme);

  useEffect(() => {
    themeRef.current = theme; // 保存最新主题值
  }, [theme]);

  const changeTheme = () => {
    console.log("Current theme:", themeRef.current);
  };

  return (
    <div>
      <p>Theme: {theme}</p>
      <button onClick={changeTheme}>Change Theme</button>
    </div>
  );
}

在这个例子中，themeRef.current 将保存最新主题值，并在 changeTheme 方法中输出。

useRef常见问题解答

useRef何时使用

useRef 适用于以下几种情况：

直接操作 DOM 元素：当你需要直接访问和操作 DOM 元素时，可以使用 useRef。
保存可变值：当你需要保存一个可变值，而不需要使用状态（state）时，可以使用 useRef。
避免不必要的重新渲染：如果你需要在组件内更新某个值，但不想触发重新渲染，可以使用 useRef。

useRef与class组件ref的差异

useRef 和 class 组件中的 ref 有一些区别：

生命周期：useRef 在组件的整个生命周期中保持不变，而 class 组件中的 ref 在组件重新渲染时会更新。
直接访问：useRef 直接返回一个 ref 对象，可以立即访问其 .current 属性，而 class 组件中的 ref 需要通过 this 关键字访问。

useRef的性能影响

useRef 的性能影响相对较小，因为它不会触发重新渲染。useRef 仅在创建时运行一次，之后的更新不会导致组件重新渲染。因此，useRef 在性能敏感的应用中是安全的。

代码示例

下面是一个示例，展示了 useRef 在性能方面的影响：

function MyComponent() {
  const myRef = useRef(0);

  const handleClick = () => {
    myRef.current = 1; // 不会触发重新渲染
  };

  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
      <p>Current value: {myRef.current}</p>
    </div>
  );
}

在这个示例中，点击按钮会更新 myRef.current，但不会触发组件的重新渲染。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

www說

手記
篇

粉絲

83

獲贊與收藏

493

關注作者，訂閱最新文章

閱讀免費教程

JavaScript 入門教程

80個小節 320805 2270

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

useRef學習：React Hooks入門教程

类组件中的 ref

函数组件中的 useRef

设置current属性

读取current属性

获取元素尺寸

修改元素样式

修改元素属性

修改元素样式

代码示例

閱讀免費教程