添加一個類建構式來初始化狀態 this.state，類組件應始終使用 props 呼叫基礎建構式
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
class Clock extends React.Component{
constructor(props){
super(props);
this.state={
time:new Date()
}
}
render(){
return(
<div>{this.state.time.toLocaleTimeString()}</div>
)
}
}
ReactDOM.render(
<div>
<Clock/>
</div>,
document.getElementById('example')
);
serviceWorker.unregister();
將生命周期方法添加到類中
每當 Clock 組件第一次加載到 DOM 中的時候，我們都想生成定時器，這在 React 中被稱為掛載，
同樣，每當 Clock 生成的這個 DOM 被移除的時候，我們也會想要清除定時器，這在 React 中被稱為卸載，
componentDidMount() 與 componentWillUnmount() 方法被稱作生命周期鉤子，
在組件輸出到 DOM 后會執行 componentDidMount() 鉤子，我們就可以在這個鉤子上設定一個定時器，
this.timerID 為定時器的 ID，我們可以在 componentWillUnmount() 鉤子中卸載定時器，
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
class Clock extends React.Component{
constructor(props){
super(props);
this.state={
time:new Date()
}
}
//當 Clock 的輸出插入到 DOM 中時
componentDidMount(){
this.timer=setInterval(()=>{
this.tick()
},1000);
}
//Clock 組件被從 DOM 中移除
componentWillUnmount(){
clearInterval(this.timer)
}
tick(){
this.setState({
time:new Date()
})
}
render(){
return(
<div>{this.state.time.toLocaleTimeString()}</div>
)
}
}
ReactDOM.render(
<div>
<Clock/>
</div>,
document.getElementById('example')
);
serviceWorker.unregister();
資料自頂向下流動/單向資料流
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
function DateFormat(props){
return(
props.date.toLocaleTimeString()
)
}
class Clock extends React.Component{
constructor(props){
super(props);
this.state={
time:new Date()
}
}
//當 Clock 的輸出插入到 DOM 中時
componentDidMount(){
this.timer=setInterval(()=>{
this.tick()
},1000);
}
//Clock 組件被從 DOM 中移除
componentWillUnmount(){
clearInterval(this.timer)
}
tick(){
this.setState({
time:new Date()
})
}
render(){
return(
<DateFormat date={this.state.time}/>
)
}
}
ReactDOM.render(
<div>
<Clock/>
</div>,
document.getElementById('example')
);
serviceWorker.unregister();
為了表明所有組件都是真正隔離的，我們可以創建一個 App 組件，它渲染三個Clock
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124770.html
標籤：JavaScript
上一篇：React 組件簡單演示
下一篇：React Props簡單演示