React での JavaSCRIPT クロージャの使用-jsチュートリアル-php.cn

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 の外部で呼び出され、メイン関数であっても、値 vat パラメーターを取得できます。関数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 中国語 Web サイトの他の関連記事を参照してください。