Wecode 36日目

6250 ワード
WeCode 条件付きレンダリング lifecycle テキストリンク

LifeCyclのデフォルトの順序

  • constructor
  • render
  • componentDidMount
  • (キャプチャ完了)
  • render
  • (setState)
  • コンポーネント更新
  • componentWillUnmount
    • 場合によっては、特定の条件でのみ要素をレンダリングできます.
    この場合、要素の特定の値に応じて選択的にレンダリングすることを条件レンダリングと呼ぶ.
    条件レンダリングを実装する場合、3つの演算子も便利ですが、&&演算子の読み取りがより良いです.
    class Greetin extends Component {
	render() {
		const { isLogin, name, point } = this.props;
		return {
			<div>
				{isLogin ? (
					<div>
						<p>{name}님 환영합니다!</p>
						<p>현재 보유중인 포인트는 {point}원 입니다.</p>
					</div>
				) : null}
			</div>
	}
}
    上記のコードに示すようにfalseと記入すると値を指定する必要があるのでnullを入力します.
    class Greetin extends Component {
	render() {
		const { isLogin, name, point } = this.props;
		return {
			<div>
				{isLogin && (
					<div>
						<p>{name}님 환영합니다!</p>
						<p>현재 보유중인 포인트는 {point}원 입니다.</p>
					</div>
				)}
			</div>
	}
}
    ただし、前述したように&&演算子で記述するとnullは省略され、より読みやすさが良い.

    &&演算子を使用する際の注意事項!


  • 変数が数値タイプの場合、0はfalse

  • 変数が文字タイプの場合、「」もfalseです.

    • ライフサイクルに関連するエラー



    map関数を実行すると、上記のエラーメッセージが表示されることがあります.この場合、この値はある瞬間から空になり、ライフサイクルに関連します.
    义齿
    InnoDB Status Output – Buffer Pool and Spin Rounds