Open TakayasuNasu opened 3 years ago
componentDidMount()
componentDidMount()
は、コンポーネントがマウントされた(ツリーに挿入された)直後に呼び出されます。DOM ノードを必要とする初期化はここで行われるべきです。リモートエンドポイントからデータをロードする必要がある場合、これはネットワークリクエストを送信するのに適した場所です。このメソッド内ですぐに setState() を呼び出すことができます。
componentDidUpdate(prevProps, prevState, snapshot)
更新が行われた直後に componentDidUpdate()
が呼び出されます。このメソッドは最初のレンダーでは呼び出されません。
componentWillUnmount()
componentWillUnmount()
は、コンポーネントがアンマウントされて破棄される直前に呼び出されます。タイマーの無効化、ネットワークリクエストのキャンセル、componentDidMount()
で作成された購読の解除など、このメソッドで必要なクリーンアップを実行します。
constructor
を下記に変更 constructor(props) {
super(props);
this.state = {
date: new Date(),
count: 0
}
this.countUp = this.countUp.bind(this)
}
Clock.js
に下記を追加
componentDidMount() {
console.log('%ccomponentDidMount', 'color:skyblue; font-size: 20px;')
}
componentWillUnmount() {
console.log('%ccomponentWillUnmount', 'color: orange; font-size: 20px;')
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('%ccomponentDidUpdate', 'color: lime; font-size: 20px')
}
countUp() {
let presentCount = this.state.count
presentCount += 1
this.setState({count: presentCount})
}
render
内に下記を追加<button onClick={this.countUp}>Count UP</button>
<p>Count {this.state.count}</p>
src
ディレクトリ直下にClockWithUse.js
を作成
下記をコピペ
import React, { useState, useEffect } from 'react'
const ClockWithUse = props => {
return (
<React.Fragment>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</React.Fragment>
)
}
export default ClockWithUse
ClockWithUse.defaultProps = {
date: new Date()
}
Clock.js
と同じように、ページが表示されたタイミングでログ出力と、ボタン押下でカウントアップする機能を実装する。
npm install --save styled-components styled-media-query styled-reset
または
yarn add styled-components styled-media-query styled-reset
参考: morajabi/styled-media-query: 💅💍 Better media queries for styled-component