反応ライフサイクル&条件レンダリング?

React Life Cycle ??

反応器には基本ライフサイクルと親子関係におけるライフサイクルがある.
もしあなたがこのライフサイクルを正確に理解していないならば、あなたはこいつが多くの間違った順序を招くことを知っているはずです.
下から見て!!

ライフサイクルのデフォルト順序

constructor

render

componentDidMount

(キャプチャ完了)

render

(setState)

コンポーネントの更新(設定状態)

が発生する.

componentWillUnmount

今回は親子順でライフサイクルを知る
次のコードを見て、順序を考えてみましょう.

n/a.両親

やれやれ。

以上のコードの順序は次のとおりです.

ライフサイクルの親-子の順序

では、親子の順序のため、私たちが解決できる誤りはどれらがあるのだろうか.
下を見て

このコードを見たことがあるかもしれません.
私は確かに両親にstateを初期化し、fetchで値を取得しました.
サブコンポーネントにもpropsとして値を送信しましたが、なぜか!!そんなのありますか?
理由は先ほど確認した親子関係のライフサイクルで理解できる.
(fetchを取得する前に初期化された空の状態値がレンダリングされているから!!)

条件付きレンダリング？

ライフサイクルが理解されている場合は、対応する条件に従って構成部品をレンダリングできます.これにより、問題を解決できます.
それは「条件付きレンダリング」です!
条件付きレンダリングを実行する場合は、3つの演算子を使用できます.
ほとんどの&&演算子は可読性が良いと言っています!!
(0はfalse、文字列「」はfalse)
では、次のコードで条件付きレンダリングを行いましょう.
(次のコードはisLoginがtrueの場合にウェルカムメッセージが表示されます!)

import React, { Component } from "react";

class Greetin extends Component {
  render() {
    const { isLogin, name, point } = this.props;
    return (
      <div>
        {isLogin && (
          <div>
            <p>{name}님 환영합니다!</p>
            <p>현재 보유중인 포인트는 {point}원 입니다.</p>
          </div>
        )}
      </div>
    );
  }
}

上のコードと同様に&&演算子を使うと、コードの末尾にnullを省略できるので、読みやすさがいいです!