React 學習筆記【二】

state狀態

state中定義的資料可以動態改變。

小案例：【點選button呼叫state資料改變其狀態】

1.在元件中呼叫this.state，定義likes為0，

constructor 是用於建立和初始化類中建立的一個物件的一種特殊方法。
呼叫super的原因：在ES6中，在子類的constructor中必須先呼叫super才能引用this
super(props)的目的：在constructor中可以使用this.props複製程式碼

constructor(props) {
    super(props)
    this.state = {
        likes: 0
    }
}複製程式碼

2.在render中建立button，

用onClick={（）=>this.increaseLikes()}  } 為button繫結點選事件increaseLikes()，

注意：【1.繫結事件必須用駝峰式  2.（）=>箭頭函式是為了使用state中的this】，

在react中state裡定義的資料是不能被直接this.拿去函式中用的，必須將this轉出，

將this.state中的likes資料繫結在button上，也就是初始的0，

render(){
    return(
       <div className="likes-button-compoent">
           <button
               type="button"
               className="btn btn-outline-primary btn-lg"
               onClick={()=>{this.increaseLikes()}}
             >
               ?{this.state.likes}
           </button>
       </div>
    )
}複製程式碼

將this轉出還有一種方法：this.increaseLikes = this.increaseLikes.bind(this)

constructor(props) {
    super(props)
    this.state = {
        likes: 0
    }
    //this.increaseLikes = this.increaseLikes.bind(this)
}複製程式碼

3.定義click事件的邏輯

this.setState（）是更新state的唯一途徑

increaseLikes(){
    this.setState({
        likes:++this.state.likes
    })
}複製程式碼

最終效果

react生命週期

1.元件初始化

2.元件更新

3.元件解除安裝

生命週期小案例：【電子鐘錶】

1.構造一個state，建立一條資料date：new Date（）定義當前時間

constructor(props){
    super(props)
    this.state = {
        date: new Date()
    }
}複製程式碼

2.在render中建立檢視，展示date資料，把 Date 物件的時間部分轉換為字串

render(){
    return(
        <div className="digital-clock-compoent jumbotron">
            <h1>{this.state.date.toLocaleTimeString()}</h1>
        </div>
    )
}複製程式碼

3.呼叫鉤子函式componentDidMount() ，在第一次渲染後呼叫

在鉤子函式內定義this.timer定時器，呼叫this.setState更新state中的內容，讓date資料每秒重新整理一次

componentDidMount(){
    this.timer = setInterval(()=>{
        this.setState({
            date: new Date()
        })
    },1000)
}複製程式碼

4.最後呼叫componentWillUnmount鉤子函式，在元件從 DOM 中移除之前清除定時器。

componentWillUnmount(){
    clearInterval(this.timer)
}複製程式碼

最終效果