Re: 新手让网页 act 起来: Day18 - React Hooks 之 useRef

前言

探索完 useState 与 useEffect ,今天就让我们回来继续介绍其他的 React hooks 吧! 当我们刚开始使用 React 的时候,相信有不少人都会有个感觉,就是不用为了改变一个区块的 state 一再的抓取 DOM node ,然後修改 DOM node 的 value。在 React 中,我们只要定义好元件与 state,让 React 帮我们更新状态。但或许在某些操作上,我们还是必须获得 DOM node ,这个时候我们就能够使用 useRef 来达成!接下来,就先让我们来介绍 useRef 的使用方式吧!

useRef

与 useState 和 useEffect 相比,useRef 的使用方式简单许多。 useRef 接收一个任意型别的 initialValue 作为初始值,然後会回传一个 mutable object 。

const refContainer = useRef(initialValue)

refContainer 这个物件中会含有 current 属性,而值就会是一开始传进去的 initialValue。可以把它想像成一个含有 current 属性的盒子让你存放任何值。而且,当每次元件触发 re-render 重新呼叫 useRef 时,都会回传同一个盒子回来。

再来,既然这个物件是可变动的,所以我们随时可以变更这个物件

refContainer.current = newValue

有特别一点要注意的是,当我们变更 refContainer object 时,并不会像 setState 一样,触发元件 re-render。

接下来让我们实际练习看看怎麽使用它吧!

To top 与 To bottom

来看看范例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .box {
    width: 300px;
    height: 300px;
    overflow: auto;
    padding: 10px;
    border: 1px solid black;
  }
</style>

<body>

  <div id='root'></div>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>

  <script type='text/babel'>

    function App() {

      return (
        <div>
          <button>To top</button>
          <button>To bottom</button>
          <p className='box'>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aspernatur blanditiis quo culpa molestias harum minus quasi ab! Labore illum, distinctio ratione expedita ipsum nulla sequi totam fuga voluptas esse!
            Ipsa enim ex ut nesciunt non corrupti deleniti, inventore reiciendis esse velit. Maxime quisquam ipsa consequuntur aut expedita beatae tempora dicta quidem excepturi. Dolorem ut odit repellat, porro labore nostrum.
            Laudantium sapiente, tempora voluptatibus culpa cupiditate doloremque sed. Quidem quis eius, aspernatur atque hic quo eligendi inventore saepe facilis, tempora quaerat officiis enim distinctio quas adipisci nisi deleniti, minima eveniet?
            Aspernatur cupiditate ipsum error officiis possimus necessitatibus, ut ratione quibusdam iste impedit ad fugiat voluptas exercitationem sit. Molestias, quaerat. Eveniet assumenda omnis ipsam ea doloremque. Consectetur accusamus modi magnam possimus.
            Repellat aliquam at nesciunt. Fugit modi maxime, aspernatur qui accusamus sapiente repellendus temporibus suscipit! Debitis nostrum aperiam eos, fugit quae soluta libero, pariatur praesentium excepturi incidunt unde, non facilis voluptate.
          </p>
        </div>
      )
    }


    ReactDOM.render(<App />, document.getElementById('root'))
  </script>


</body>

</html>

这个范例中,当我们点选 To top 与 To bottom 按钮时,下方的卷轴会分别到最顶端与最底端。

  1. 使用 useRef 建立一个 mutable 物件,并且在 box 的 ref 属性挂上 mutable 物件 ,让我们可以获取 box DOM node
const boxContainer = React.useRef(null)
<p className='box' ref={boxContainer}></p>
  1. 建立点击事件,并透过 boxContainer.current 取得 box DOM node 然後更改 scrollTop
const toTop = () => {
  boxContainer.current.scrollTop = 0
}

const toBottom = () => {
  const { current: boxEl } = boxContainer
  boxEl.scrollTop = boxEl.scrollHeight
}
<button onClick={toTop}>To top</button>
<button onClick={toBottom}>To bottom</button>

这样就子就完成啦!顺利的话,当点选 To top 与 To bottom 按钮时,下方的卷轴会分别到最顶端与最底端。

以上就是 useRef 的介绍,如果有任何问题都欢迎在下方留言~~

该文章同步发布於:我的部落格


<<:  【React Hook 01】概述

>>:  D18 - 吃一颗 Class 语法糖 (下)比较 Constructor 与 Class

Day 26 Singleton Pattern、UML

Singleton Pattern: 单例模式是程序设计中常见的一种方法,其顾名思义,就是只有一个人...

Kubernetes 和云原生教程

Kubernetes 开源有 6 年时间了,为什么还要写一篇 Kubernetes 入门的文章?”...

Day43 ( 游戏设计 ) 音阶记忆游戏

音阶记忆游戏 教学原文参考:音阶记忆游戏 这篇文章会介绍,使用 Scratch 3 里的音乐扩充功能...

[Python 爬虫这样学,一定是大拇指拉!] DAY07 - URL / URN / URI (3)

URI 之 URL 语法 URL 语法图: 图片来源 根据图片,我们可以知道所谓的 URL ,是由 ...

Day 25:推销自己

前言 为什麽推销自己很重要呢,在这个竞争的市场中,需要有一些东西来证明自己的身价。 在我搜寻 And...