# React Componentの種類

## React でのclassとfunctionの違い

- 基本的にはfunctional component（関数コンポーネント）で書いた方が推奨されているらしい

| functional compornent                          | class component                                                            |
| ---------------------------------------------- | -------------------------------------------------------------------------- |
| class component のrender部分だけ書いている感じ | ライフサイクルメソッドを適切に使うことにより、render()制御することが可能。 |
| 状態管理によるrender()制御ができない           | props、stateが使うことができる                                             |
|                                                | 処理が散らばりやすい                                                       |


### 書き方の違い

#### functional component
```
import React from "react";

const Test = () => {
  return (
    //処理
    <div>
      <h1>{'FCの書き方！'}</h1>
    </div>
  );
};
export default Test;
```
#### class component
```
import React from "react";

class Test2 extends React.Component {
  //なくてもよい
  constructor(props) {
    super(props);
    this.state = {count: 100}; // stateも使える
  }

  // render() メソッドは、クラスコンポーネントで必ず定義しなければならない唯一のメソッドなので必要
  render() {
    return (
      //処理
      <div>{'class compornentの書き方'}</div>
    );
  }
}

export default Test2;
```

#### なぜ関数コンポーネントなのか

- クラスコンポーネントの大きな問題はしょりが散らばりやすいこと
    - 一つのコンポーネントの一つの機能が様々なメソッドの中散らばっているということ
- Hookは一つの機能は、ひとつのHookの中で完結する


### ComponentとPureComponentの違い

- props と stateが常に変化していれば、PureComponentを使わず、Componentを使うべし。（理由：shouldComponentUpdate内のshallowEqualも時間かかる）
- props と stateがあまり変わらなければ、PureComponentを使うべし。
- props と stateが変わらなければ、どちらでもOK.

### shouldComponentUpdateとは

- shallow compareをするファンクション
- 比較対象(stateやprops)のものが人惜しいかどうか浅く確認する

#### 比較対象がスカラー
- そのvalue自体を比較

#### 　


---

## Page Navigation

- Canonical URL: https://tips.weseek.co.jp/用語集/React/React%20Componentの種類
- Permalink: https://tips.weseek.co.jp/5f12aa339b1eed0048609b14
- Parent: [React](/5f163c2e647aac00495efa80.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 1 total
  - [ES7, React, Redux, GraphQL, React-Native snippetsを使いこなす](/5f127c2a9b1eed0048609b0b.md)
- Last updated: 2020-07-21T07:11:06.615Z by deleted_at_1672138394172
- Full page listing (all children regardless of count): https://tips.weseek.co.jp/_api/v3/page-listing/children?id=5f12aa339b1eed0048609b14