Componentについて

Tweet

クラスコンポーネント

特徴

記述方法

class App extends Component {
  render(){
    return( 
      <React.Fragment>
        <label htmlFor="Test" >Test</label>
        <input type= "text" onChange={()=>{console.log("I am clicked")}}/>
        <button text= "over" onMouseOver ={()=>{console.log("MouseOver")}} onMouseOut={()=>{console.log("MouseOut")}}>Test</button>
      </React.Fragment>
    )
  }
export default App;

ファンクショナルコンポーネント

特徴

関数を定義する。returnを用意することが必要。
比較的簡単に作成することができる。

記述方法

const App = ()=>{
  return <div>HELLO</div>
}

export default App;

応用

const App = ()=>{
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
    )
}
const Hello = () =>{
  return <div>HELLO!</div>
}
export default App;

この時、出力は下画像のようになる。

どっちがいいの？

使い方による

が、基本的に、ファンクションコンポーネントのほうが好かれる。
例として、propsを受け取って、レンダーする場合とか。

クラスコンポーネントが良い場合

• コンポーネントにステータスを持たせる場合
• ライフサイクルメソッドを使用する場合
• メソッドが多い場合

ファンクションコンポーネントが良い場合

• 上記以外の場合

結論

理由次第でどちらでもOK