ReactJS - Constructor：React組件的基石

你好，有志於成為React開發者的你！今天，我們將深入React的一個基本概念：構造函數（constructor）。你可以將構造函數視為房屋的基礎——一切從這裡開始。在這堂課結束之前，你將能像專業人士一樣建立React組件！

ReactJS - Constructor

構造函數是什麼？

在我們深入了解React相關的細節之前，讓我們先了解一般在編程語言中構造函數是什麼。

構造函數是一個特殊的方法，當創建該類的對象時會自動調用。它就像組件的誕生——當你的組件問世時首先發生的事情。

在React中，構造函數是我們設置組件初始狀態和綁定事件處理器的位置。這是我們的組件第一次說「你好，世界！」的機會。

讓我們來看一個基本範例：

class Welcome extends React.Component {
constructor(props) {
super(props);
console.log("Hello, I'm born!");
}

render() {
return <h1>Welcome to React!</h1>;
}
}

在這個例子中，每次創建Welcome組件時，它都會在控制台中打印出"Hello, I'm born!"。就像組件的第一聲啼哭！

初始化Props

現在，讓我們來談談props。Props（屬性的簡稱）是父組件傳遞數據給子組件的方式。在構造函數中，我們可以訪問這些props並用它們來設置我們的組件。

這樣做：

class Greeter extends React.Component {
constructor(props) {
super(props);
console.log(`I received a name: ${props.name}`);
}

render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

在這個例子中，我們正在打印傳遞給我們Greeter組件的名稱prop。注意super(props)的調用——這是關鍵的！它調用了父類（React.Component）的構造函數並將props傳遞給它。記住，在構造函數中首先調用super(props)。

你可以用這來：

為了除錯而打印接收到的props
根據props進行計算
根據props設置初始狀態（我們會在下一節中涵蓋）

初始化狀態

狀態是組件存儲可變數據的地方。構造函數是初始化這個狀態的完美位置。讓我們看看怎麼做：

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return <h1>Current count: {this.state.count}</h1>;
}
}

在這裡，我們用count屬性設置初始狀態為0。這是唯一一個你可以直接賦值this.state的地方。在其他地方，使用this.setState()來更新狀態。

你也可以使用props來初始化狀態：

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {
secondsElapsed: 0,
interval: props.interval || 1000
};
}

// ... 組件的其余部分
}

在這個例子中，我們使用了一個prop（interval）來初始化我們的狀態，如果沒有提供prop，則默認值為1000。

事件綁定

構造函數的最後一個主要用途是綁定事件處理器。在JavaScript中，類方法默認不綁定。如果你忘記綁定它們並將它們傳遞給事件處理器，當方法被調用时this會是undefined。

這樣綁定方法：

class ClickCounter extends React.Component {
constructor(props) {
super(props);
this.state = { clicks: 0 };
this.handleClick = this.handleClick.bind(this);
}

handleClick() {
this.setState(prevState => ({
clicks: prevState.clicks + 1
}));
}

render() {
return (
<div>
<p>Clicks: {this.state.clicks}</p>
<button onClick={this.handleClick}>Click me!</button>
</div>
);
}
}

在這個例子中，我們在構造函數中綁定了this.handleClick。這樣可以確保當調用handleClick時，this指的是我們的組件實例，允許我們調用this.setState。

組合所有概念

讓我們創建一個使用所有這些概念的組件：

class UserGreeting extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoggedIn: false,
username: props.username || 'Guest'
};
this.toggleLogin = this.toggleLogin.bind(this);
}

toggleLogin() {
this.setState(prevState => ({
isLoggedIn: !prevState.isLoggedIn
}));
}

render() {
return (
<div>
<h1>Hello, {this.state.username}!</h1>
<p>You are {this.state.isLoggedIn ? 'logged in' : 'not logged in'}.</p>
<button onClick={this.toggleLogin}>
{this.state.isLoggedIn ? 'Log out' : 'Log in'}
</button>
</div>
);
}
}

這個組件：

初始化props（username）
設置初始狀態（isLoggedIn和username）
綁定toggleLogin方法

常見構造函數方法

這裡有一個表格，列出了你可能會在構造函數中使用的一些常見方法：

方法	描述
`super(props)`	調用父類構造函數
`this.state = {...}`	初始化狀態
`this.methodName = this.methodName.bind(this)`	綁定方法
`console.log(props)`	打印接收到的props
`this.intervalId = setInterval(...)`	設置計時器或間隔

記住，構造函數只是你的組件旅程的開始。它是你為其他一切奠定基礎的地方。明智地使用它，你的組件將會有一個良好的開始！

我希望這個教程能幫助你更好地理解React的構造函數。繼續練習，很快你就能夠在睡夢中構建React組件了！快樂編程！

Credits: Image by storyset