快捷導(dǎo)航

React使用hook如何實(shí)現(xiàn)數(shù)據(jù)雙向綁定

更新時間：2024年03月13日 08:36:32 作者：在聽風(fēng)吟

這篇文章主要介紹了React使用hook如何實(shí)現(xiàn)數(shù)據(jù)雙向綁定方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

React使用hook實(shí)現(xiàn)數(shù)據(jù)雙向綁定

寫在前面：閱讀hook的使用前，要對Class實(shí)現(xiàn)方法有一定了解，我們也從這里開始講起：

const root = ReactDOM.createRoot(document.getElementById('root'));
  
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);}
 
setInterval(tick, 1000);

在react初級，我們學(xué)會了使用ReactDOM進(jìn)行元素的掛載、使用jsx模式編輯可視化更強(qiáng)的（<html />）、通過setInterval實(shí)現(xiàn)function的調(diào)用；如何使用Class進(jìn)行更加規(guī)范性和可編輯性的代碼書寫呢？

在React官方文檔有如下的步驟：

創(chuàng)建一個同名的 ES6 class，并且繼承于 React.Component。
添加一個空的 render() 方法。
將函數(shù)體移動到 render() 方法之中。
在 render() 方法中使用 this.props 替換 props。
刪除剩余的空函數(shù)聲明。

首先，應(yīng)用Class在我看來是一個必不可少的策略，因為原始的js編輯模式和引入react，使用react DOM進(jìn)行掛載的方式過分原始，并且缺少作用域的劃分，缺少可復(fù)用性，甚至在你想要多實(shí)現(xiàn)一個功能時變得很被動。

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}
 
setInterval(tick, 1000);

哪怕我們沒有對Java足夠熟悉，也并不清楚js中類和繼承的底層原理，但是直觀地，class的出現(xiàn)，讓我們很快的想到一個詞，那就是“面向?qū)ο?rdquo;。

眾所周知的時，JS并非面向?qū)ο蟮牡兆?，而是在發(fā)展后期不斷通過新的貢獻(xiàn)而看上去（或者說使用上）更加的面向?qū)ο螅鳛殚_發(fā)程序的工程師，尤其是遇“JS”不久的小白而言，使用是優(yōu)于理解的，因為只有實(shí)踐，才是掌握理論的不二法門。

接下來，我們通過一段相同效果的代碼來說Class的問題和hook的使用：

import React, { useState } from 'react';
 
function Example() {
  // 聲明一個叫 "count" 的 state 變量  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
 
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

誠然，代碼行數(shù)的減少可以使我們顯得更加專業(yè)和高級，function的聲明也似乎比class extends React.Component 云云更精簡，不過真正值得注意的不僅僅于此：

關(guān)于this：

有過前端面試經(jīng)驗的小伙伴都清楚，this使用不當(dāng)是一件很不好的事情，如果你想學(xué)好this，可以到掘金刷刷前端經(jīng)典面試題，或者沒事的時候打開Chrome的F12來動手試試，不過在你尚未吃透這個原理的所有場景，或者你單純就是個謹(jǐn)慎的程序開發(fā)者，那么避免在一些可能出錯的地方使用this將會是一個很好的選擇，Hook的操作最大優(yōu)點(diǎn)由此顯示：通過前端開發(fā)的同學(xué)們更加熟悉的function寫法，避免在各層調(diào)用中this指向不準(zhǔn)而導(dǎo)致bug的出現(xiàn)；除此之外，通過count, setCount的綁定方法分離state和action層，const阻止變量污染，以上，是我想要分享的hook的優(yōu)勢，接下來將介紹hook的使用方法：useState, useEffect。

（新內(nèi)容）

關(guān)于useState

基于上述內(nèi)容，我們已經(jīng)清楚hook的聲明方式：

const [count, setCount] = useState(0); // 0是初始值

我們從這條語句開始說起，const是ES6中對于不可改變的量的聲明方式，我們可以清晰地得到“不可以在程序中直接修改count的值"的字面意思，[ ]只是形式不去管他，count和setCount由自己定義，我們習(xí)慣于將前面的變量加上set的名稱作為其修改方法，useState固定寫法，（ 0 ）是初始值，可以傳入js中有實(shí)際意義的各類對象，例如對象{}數(shù)組[]時間new Date或者一個簡單的null。

關(guān)于set方法

第一次接觸的同學(xué)會有疑問？如何使用修改方法呢，很簡單，在相同的上下文內(nèi)，直接使用setCount(*新的值*)，“那上下文...." 還是轉(zhuǎn)化成白話文吧：在當(dāng)下組件可以直接使用，把useState聲明的值當(dāng)作當(dāng)前組件的私有變量，如果需要在其他地方使用，請學(xué)習(xí)如何傳值（這是另外一個話題，也可能在接下來一段時間更新到后續(xù)文章）；

學(xué)習(xí)到此，我們大概會覺得這個方法好極了，不會被污染，自己私域可用，寫法規(guī)范，可以綁定到DOM上，等等，記得開始時候我們說得是雙向綁定，set方法對應(yīng)的應(yīng)該有一個get才對，那么hook的使用方法是什么呢？

異步與副作用：

首先來看一段不簡單的代碼：

  const [count, setCount] = useState(0);
 
  setCount(1);
  console.log(count); // 控制臺輸出：0

好學(xué)的你一定知道這是setCount方法的異步性，官方文檔給的解釋叫做：“useState可能是個異步操作”，如何理解可能不重要，我們不可能將程序置于可能當(dāng)中，于是官方提供了useState的兄弟方法：useEffect。

關(guān)于useEffect

  const [count, setCount] = useState(0);
 
  setCount(1);
  console.log(count); // 控制臺輸出：0
 
  useEffect(() => {
    console.log(count); // 控制臺輸出：1
  });

這段代碼不做解釋，接著來講：

熟悉vue的同學(xué)在開發(fā)過程中應(yīng)當(dāng)會應(yīng)用到computed和watch屬性，使得頁面的數(shù)據(jù)保持“時時正確”性，很多情況，一個按鈕會導(dǎo)致多個展示項的刷新，而延誤是我們應(yīng)當(dāng)避免的，useEffect就是這樣一個方法，他會在react內(nèi)部啟動監(jiān)聽，當(dāng)某個對象發(fā)生改變，觸發(fā)響應(yīng)的函數(shù)，在這個函數(shù)中我們可以使用上述的useState所聲明的set方法改變某個綁定到頁面的數(shù)據(jù)項從而渲染新的頁面。

舉手：你剛剛講的“某個對象”是怎么一回事？

請看這段代碼：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // 僅在 count 更改時更新

OK，當(dāng)你閱讀到這個位置，就已經(jīng)有相當(dāng)深入的“入門“知識了，你可以選擇新建一個react項目，隨便輸出幾條內(nèi)容，綁定一兩個數(shù)據(jù)，實(shí)踐出真知。

接著看代碼，我們通常——或者說被規(guī)定——使用useEffect（function(), props)；的方式來綁定useEffect的監(jiān)視對象，在上面的例子中，count的值發(fā)生改變（by any reason）就會隨之進(jìn)行標(biāo)題修改的語句。

OK，那么props既然是數(shù)組，我們可以傳入多條監(jiān)視源么？No。

使用Effect方法可以解決useState的異步問題么？Yes。

使用Effect方法能實(shí)現(xiàn)聲明周期函數(shù)么？是的，我們將props的內(nèi)容填空，即[]，就會在組件創(chuàng)建之初進(jìn)行一次且僅一次的調(diào)用，類似于Vue中的created聲明周期鉤子。

useEffect方法有異步性么？無關(guān)緊要，因為頁面會隨著useEffect中的語句更新。

useEffect的實(shí)現(xiàn)方式是什么樣的？useEffect因為可以監(jiān)測多個數(shù)據(jù)源，故一個組件會存在多個use Effect函數(shù)，他們會被當(dāng)做一個整體，也就是一顆方法樹，每個新的方法都會掛載在上面，在發(fā)生改變之后，整顆樹一塊刷新，并對應(yīng)DOM樹進(jìn)行改變。