Help us understand the problem. What is going on with this article?

ReactのFunctional ComponentとClass Componentの特徴

Functional Componentの特徴

・ES6のアロー関数で記述する
・stateを持たない
(※2019.02.06に関数コンポーネントにステートを持たせられるAPIが出ている↓)
https://ja.reactjs.org/docs/hooks-state.html

・propsを引数に受け取る
・JSXをreturnする
(※主に使用されているのが、Functional Component)

Class Componentの特徴

・Classを宣言及びReact Componentを継承
・constructorで初期化、propsを引数に受け取る
・renderメソッド内で、JSXをreturnし、引数(props)を受け取るには、thisが必要
・ライフサイクルやStateを持つことができる
(※基本、使用するのはClass Componentではなく、Functional Componentを推奨)

Stateが肥大化した場合の管理の問題

① stateを多くの場所で使用する→Reduxのstoreで管理
② stateを特定の少数の場所で使用→Class Componentで管理

基本的には上記の軸として考えてみると良いかも。

Functional Componentのコード例

import React from 'react';

const Hoge = (props) => {
  return (
   <div>
    <h1>{props.title}</h1>
   </div>
  );
};

Class Componentのコード例

import React from 'react';

Class Hoge extends from React.Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div>
       <h1>{this.props.title}</h1>
      </div>
    );
  }
}

いずれも、最後に

export

を記述し、

export 例)↓

export default Hoge;

さらに、index.js側で

import

import 例)↓

import Hoge from './Hoge';



ここは違う、ここはこうした方が?
等々ございましたら、ご指摘いただけますと幸いです。

pontarou194
得意分野:SEO、広告、求人 経験  :HTML,CSS,Ruby(Rails),JavaScript,JQery,AWS,Python,WordPress ツール :KeywordMap, ahref , DemandMetrics その他 :中小から大手のSEO、広告、求人関係(求人サイトの作成)までやってました
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした