ReactJS - 建構函式

---

---

一般來說，類中的建構函式方法用於設定新建立物件的初始值。React 也使用 constructor() 來實現相同的初始化目的。然而在 React 中，建構函式也用於狀態初始化和事件繫結。

本章我們將學習如何在 React 元件中使用建構函式。

屬性初始化

眾所周知，每個 React 元件都有 props 和 state。應該使用 super 關鍵字在建構函式中初始化 props。如果在基於類的 React 元件中沒有正確初始化 props，則 this.props 將無法正常工作並導致錯誤。讓我們建立一個具有正確建構函式方法的簡單元件。

class Welcome extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      return (
         <div><h3>Welcome {this.props.name}</h3></div>
      )
   }
}

這裡：

• super(props) 將在 Welcome 元件中初始化 props。

• this.props.* 將提供對 props 詳情的訪問。

元件可以使用如下所示：

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome name={'John'} />
            </div>
         </div>
      </div>
   );
}

元件將渲染歡迎訊息，如下所示：

狀態初始化

與 props 初始化類似，狀態初始化非常重要，可以在建構函式中完成。一般來說，React 提供了不同的方法來設定和獲取元件中的狀態資訊。它們如下：

使用 this.state = obj

這用於使用物件初始化狀態

this.state = {
   pageSize: 10
}

使用 this.state.*

這用於訪問狀態資訊。(this.state.pageSize)

使用 this.setState()

這是一個接受物件或 lambda 函式的函式。用於設定狀態資訊

this.setState({
   pageSize: 20
})
this.setState((state, props) => ({
   pageSize: state.pageSize + 1
}))

讓我們建立一個具有正確狀態初始化的簡單元件

class Welcome extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         welcomeMessage: "Hello"
      }
   }
   render() {
      return (
         <div><h3>{this.state.welcomeMessage}, {this.props.name}</h3></div>
      )
   }
}

這裡，this.state 用於設定歡迎訊息的預設（初始）值。元件可以使用如下所示：

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome name={'John'} />
            </div>
         </div>
      </div>
   );
}

元件將渲染歡迎訊息，如下所示：

事件繫結

與 props 和 state 初始化類似，事件處理程式必須正確繫結，以便 this 將在事件處理程式中被正確訪問。讓我們在 Welcome 元件中建立一個新按鈕來更改歡迎訊息，並新增一個事件處理程式來處理按鈕的 onClick 事件，如下所示：

import React from "react";
class Welcome extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         welcomeMessage: "Hello"
      }
      this.changeMessageHandler = this.changeMessageHandler.bind(this)
   }
   changeMessageHandler() {
      this.setState(prevState => ({
         welcomeMessage: prevState.welcomeMessage == "Hello" ? "Welcome" : "Hello"
      }));
   }
   render() {
      return (
         <div>
            <div><h3>{this.state.welcomeMessage}, {this.props.name}</h3></div>
            <div><button onClick={this.changeMessageHandler}>Change welcome message</button></div>
         </div>
      )
   }          
}
export default Welcome;

這裡：

步驟 1 - 新增一個帶有 onClick 事件的按鈕

<div><button onClick={this.changeMessageHandler}>Change welcome message</button></div>

步驟 2 - 設定 this.changeMessageHandler 方法作為 onClick 事件處理程式

步驟 3 - 在建構函式中繫結事件處理程式 this.changeMessageHandler

this.changeMessageHandler = this.changeMessageHandler.bind(this)

步驟 4 - 新增事件處理程式並使用 this.setState 更新狀態。

changeMessageHandler() {
   this.setState(prevState => ({
      welcomeMessage: prevState.welcomeMessage == "Hello" ? "Welcome" : "Hello"
   }));
}

元件可以使用如下所示：

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <Welcome name={'John'} />
            </div>
         </div>
      </div>
   );
}

元件將渲染歡迎訊息，如下所示：

總結

建構函式在基於類的 React 元件中非常重要。它的主要工作是設定元件，以便正確配置 props、state 和事件，並準備好被元件事件和渲染方法訪問。