Reatc.js : コンポーネントを純粋に保つ

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

一部の 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 (
    <ol>    
      <li> register {user} </li>
    </ol>
  );
}

export default function App() {
  return (
    <section>
      <Member user={2} />
      <Member user={4} />
    </section>
  );
}

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

材料をレシピのように考えることができます。材料はわかっていますが、調理の過程で新しい材料を導入しなければ、毎回同じ料理ができてしまいます。

結論

コンポーネントは純粋でなければなりません。つまり、

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

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

以上がReatc.js : コンポーネントを純粋に保つの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。