在 React 中使用 JavaScript 閉包-js教程-PHP中文網

在 React 中使用 JavaScript 閉包

WBOY

發布： 2024-07-17 18:23:19

原創

902 人瀏覽過

USING JAVASCRIPT CLOSURES IN REACT

閉包是一種 Javascript 功能，其中包含在另一個函數（外部函數）內的函數將被傳回並在外部函數外部呼叫。

當內部函數保持對其作用域（即詞法作用域）之外的變數的存取時，就會形成閉包；即使在外部函數執行後也可以存取外部函數的變數和參數。

讓我們建立一個稅務計算器閉包函數，根據酒精和非酒精飲料的稅率計算稅金。

const taxCalculator = (vat ) => {
  return function taxableAmount (amount) {
    const tax = amount * vat / 100;
    return tax
  }
}

//alcoholic drinks have their on VAT, lets say 16%
const alcoholTax = taxCalculator(16)
const alcoholA = alcoholTax(1200) // an Alcohol that costs 1200
const alcoholB=alcoholTax(800) // an Alcohol that costs 800

//non-alcoholic have their own VAT, let say 12%

const nonAlcoholTax = taxCalculator(12);
const water = nonAlcoholTax(500)
const Juice=nonAlcoholTax(300)

登入後複製

如您所見，每種飲料都會根據其是酒精飲料還是非酒精飲料來記住其稅率，即返回的函數是在taxCalculator之外調用的，並且能夠檢索增值稅參數值，即使主函數函數taxCalculator已被執行。

在 React js、JavaScript UI 函式庫中，事件處理程序在 JSX 上內嵌聲明。

<button  onClick={handleClick}>Click me</button>

登入後複製

如果事件處理程序有參數，它將在函數內部呼叫。

function ActionButtons(){
const actions = ["Create", "Edit", "Delete"]
const handleAction = (action) => {
    switch (action) {
      case actions[0]:
        //do something
        break;
      case actions[1]:
        //do something
        break;
      case actions[2]:
        //do something
        break;

      default:
        // do nothing
        break;
    }
  }
return (
<div className="flex flex-col md:flex-row w-full p-4 gap-4 ">
  { actions.map(action => 
<button 
className="w-full md:w-60" 
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
onClick={()=>handleAction(action)}>{action}</button>)}
  </div>)
}

登入後複製

請注意，在將handleAction 指派給onclick 事件處理程序時，它是由箭頭函數封裝的。

透過閉包，我們可以簡單地使用操作參數呼叫handleAction，然後傳回一個內部函數，該函數取得操作參數並執行其餘操作，如下所示。

function ActionButtons() {
  const actions = ["Create", "Edit", "Delete"];
  const handleAction = (action) => {
    return function () {
      console.log(` ${action} Action button clicked`);
      switch (action) {
        case actions[0]:
          //do something
          break;
        case actions[1]:
          //do something
          break;
        case actions[2]:
          //do something
          break;

        default:
          // do nothing
          break;
      }
    };
  };
  return (
    <div className="flex flex-col md:flex-row  w-full p-4 gap-4 justify-between">
      {actions.map((action) => (
        <button 
className="w-full md:w-60"
  style={{
            backgroundColor: "palevioletred",
            color: "white",
            outline: "none",
          }}
 onClick={handleAction(action)}>
          {action}
        </button>
      ))}
    </div>
  );
}

登入後複製

注意到我們如何直接在 OnClick 事件上呼叫handleAction 了嗎？也注意到我們重構了handleAction 函數，以便它傳回一個有開關執行必要操作的函數？

在元件安裝時呼叫handleAction，當handleAction傳回的函數抓取並保留handleAction參數的值時，即使它（handleAction）在第一次渲染期間執行，也會發生閉包。
這是在 Javascript 中處理事件的巧妙方式。您覺得怎麼樣？

以上是在 React 中使用 JavaScript 閉包的詳細內容。更多資訊請關注PHP中文網其他相關文章！