ReactJS のコンポーネント

#１．コンポーネントの定義
ReactJSでは小さなコンポーネントで使って、サイトが構築することができる。コンポーネントをさまざまな状態や属性で、さまざまな場所で再利用できて、コンポーネント内に別のコンポーネントを含めることがある。ReactJSの各コンポーネントは別々のステータスを持って、変更することができる。Reactはステータスの変更に基づいてコンポーネントのアップデートを実行します。コンポーネントはReactの最も重要な成分の1つです。したがって、方法と操作方法とおよび方法の役割が理解できることが必要です。

#２．コンポーネントの機能・メソッド一覧

• constructor(props) :
• コンポーネントのstateの設定を行う。
• super(props)を使うことの意味はコンストラクタ関数内でthis.propsが使用できるようになる。

qiita.js

constructor(props){
   super(props)
   }

• componentWillMount() :

• いくつかのタスクを実行すると、この関数はレンダリングが行われる前にクライアントとサーバーの両方で一度呼び出される。

• componentDidMount() :

• いくつかのタスクを実行すると、この関数はレンダリング後にクライアント方で一度だけ呼び出される。

• この関数はMapを使うときに非常に便利のだ。DOMにnode(id)があるときだけMapがレンダリングできるからのだ

• componentWillUnmount() :

• 一度だけ実行して、コンポーネントがunmountする時、コンポーネントが終る前にこの関数は呼び出される。

• この関数は、未使用のタイマーを削除する必要があるときに便利のだ。

• componentWillReceiveProps(nextProps) :

• この関数はpropsが変わるたびに実行される

• shouldComponentUpdate(nextProps, nextState) :

• この関数はpropsとstateが変わるたびに実行される。

• この関数はtrue / falseを返する。コンポーネントを更新する必要がある場合は、この関数を使って処理する必要がある。

• componentWillUpdate(nextProps, nextState) :

• この関数はshouldComponentUpdate関数の結果に基づいて動作する。shouldComponentUpdate関数がfalseを返した場合、Reactはこの関数を呼び出さない。

• componentDidUpdate(prevProps, prevState) :

• この関数は、componentWillUpdateの結果から、コンポーネントが再度レンダリングされた後に実行される。

• render() :

qiita.js

render() {
            return (
              <div>
                //　レンダリングが行われる
              </div>
            );
          }