REDO構成部品を使用した重複の削除

11583 ワード
component テキストリンク

再使用構成部品の削除


コードを作成すると、同じ機能を複数実装したい場合に重複します.
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

const increment = () => {
  setCount(count + 1);
};

const increment1 = () => {
  setCount1(count1 + 1);
};

const increment2 = () => {
  setCount2(count2 + 1);
};
return (
  <div className="App">
    <button onClick={increment}>Click {count}</button>
    <button onClick={increment1}>Click {count1}</button>
    <button onClick={increment2}>Click {count2}</button>
  </div>
);
同じ機能を持つ3つのClickボタンを作成するには、同じコードを3回繰り返し使用する必要があります.構成部品を使用して重複を減らすことができます.

構成部品


＜コンポーネントのメリット＞
  • では、コンポーネントとして一般的な機能が使用されます.これにより、毎回書く必要がなく、好きなようにコードを書くことができます.
  • 論理を変更する場合、同じ機能のコードを1つずつ変更することなく、構成部品ファイルで1回変更するだけで、すべての機能を簡単に実現できます.
    • import React, { useState } from 'react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div className="App">
          <button onClick={increment}>Click {count}</button>
        </div>
    );
};

export default Counter;
    Clickボタン機能をコンポーネントとしてエクスポートし、使用するファイルからインポートして使用できます.
    import Counter from './components/Counter';

function App() {
  
  return (
    <div className="App">
			{/* 컴포넌트 사용 */}
      <Counter />
      <Counter />
      <Counter />
    </div>
  );
}

export default App;
    JavaScript
    C符号の性能向上のためのスパンの利用