在 React 中使用 JavaScript 闭包-js教程-PHP中文网

在 React 中使用 JavaScript 闭包

WBOY

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

原创

901 人浏览过

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中文网其他相关文章！