記事が気に入ったら、コーヒーを買ってサポートしてください。「コーヒーを買って」

コンポーネントを純粋に保つ

一部の JavaScript 関数は純粋である必要があります。純粋関数は計算のみを実行し、それ以外は何も実行しません。コンポーネントを純粋関数として記述することで、コード ベースが増大するにつれて発生する混乱を招くエラーや予測不可能な動作をすべて回避できます。 コンポーネントを管理しやすくすることができます。

純度

では、純粋な関数を作成するにはどうすればよいでしょうか?そして、関数が純粋であるためには、関数にはどのような特性が必要なのでしょうか?純粋関数は、次の特性を持つ関数である必要があります:

• それは自分自身のことを気にします。呼び出される前に存在していたオブジェクトや変数は変更されません。

• 同じ入力、同じ出力。同じ入力が与えられた場合、純粋関数は常に同じ結果を返す必要があります。同じ入力に対して異なる結果を与えるべきではありません。

数式を考えてみましょう : y = 2x

x = 2、y = 4 の場合、この不変式は常に同じ結果になります。

x = 3 の場合、y = 6。この不変式は常に同じ結果になります。

x = 3 の場合、他の状況によっては y が 9、-1、または 2.5 にならないことがあります。

y = 2x および x = 3 の場合、y は常に 6 になります。

これを JavaScript 関数にすると:

function getDouble(number) {
  return 2 * number;
}

getDouble は純粋な関数です。 3 を渡すと、6 が返されます。常に。

React はこの概念に基づいて構築されています。これは、各コンポーネントが純粋な関数のように動作することを前提としています。つまり、React コンポーネントは、同じ入力が与えられた場合に常に同じ JSX 出力を返す必要があります。

純粋な化合物を例を挙げて説明しましょう。

function Member({ user }) {
  return (
    
    
      
 register {user} 
    
  );
}

export default function App() {
  return (
    

      
      
    
  );
}

ユーザー パラメータが指定されたものは常に返されます。数式のように

結論

コンポーネントは純粋でなければなりません、意味:

それは自分自身のことを気にします。レンダリング前に存在していたオブジェクトや変数を変更してはなりません。

同じ入力、同じ出力。同じ入力が与えられた場合、コンポーネントは常に同じ JSX を返す必要があります。