ReactJS - 無狀態組件：初學者指南

你好，未來的 React 巫師們！今天，我們將踏上一段令人興奮的旅程，探索 React 組件的世界，特別聚焦於無狀態組件。如果你是編程新手，別擔心；我將成為你的友好導遊，逐步解釋一切。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們一起來深入探讨吧！

ReactJS - Stateless Component

React 中的組件是什麼？

在我們討論無狀態組件之前，讓我們先了解 React 中的組件是什麼。可以把組件想像成 LEGO 块。正如你可以用簡單的 LEGO 块建造複雜結構一樣，你也可以使用 React 組件來創建精緻的網頁應用程序。

組件類型

在 React 中，我們主要有兩種類型的組件：

有狀態組件（類組件）
無狀態組件（函數組件）

今天，我們將專注於無狀態組件，但讓我們先簡單了解一下有狀態組件，以便我們能夠理解它們之間的差別。

有狀態組件：快速概覽

有狀態組件，也稱為類組件，就像是 React 的瑞士軍刀。它們可以做很多事情，包括管理它們自己的狀態。以下是一個簡單的例子：

import React, { Component } from 'react';

class Greeting extends Component {
constructor(props) {
super(props);
this.state = { name: 'World' };
}

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

在這個例子中，Greeting 是一個有狀態組件，它管理自己的 name 狀態。但有時候，我們不需要這麼多的功能，這就是無狀態組件的用武之地！

無狀態組件：簡潔之美

無狀態組件，也稱為函數組件，就像是 React 的效率工人。它們做一件事情，並且做得很好：根據它們接收到的 props 來渲染 UI。讓我們看一下一個例子：

const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

這不是很好嗎？這個組件與我們之前的類組件做相同的工作，但卻用更少的代碼。這就像是使用大錘和普通錘子來掛一幅畫框一樣——有時候，簡單就是更好！

為什麼使用無狀態組件？

簡潔性：它們更容易閱讀和編寫。
性能：它們稍微快一些，因為 React 不需要設置狀態管理。
可測試性：零件更少，它們更容易測試。
可重用性：它們更專注，因此更容易重用。

創建你的第一個無狀態組件

讓我們創建一個簡單的無狀態組件，用於部落格文章預覽：

const BlogPostPreview = ({ title, excerpt, author }) => {
return (
<div className="blog-post-preview">
<h2>{title}</h2>
<p>{excerpt}</p>
<span>By {author}</span>
</div>
);
};

這裡發生了什麼：

我們定義了一個名為 BlogPostPreview 的函數。
它接受一個對象作為參數，我們立即解構以獲取 title、excerpt 和 author。
函數返回 JSX，描述了組件應該渲染的內容。

要使用這個組件：

const App = () => {
return (
<div>
<BlogPostPreview
title="React 是超級棒！"
excerpt="了解 React 如何風靡網頁開發界。"
author="Jane Doe"
/>
</div>
);
};

Props：無狀態組件的生命線

Props（屬性的簡稱）是我們傳遞給無狀態組件數據的方式。它們就像給廚師的食材——組件將這些 props "烹飪" 成美味的 UI！

讓我們創建一個更複雜的例子：用戶個人資料卡。

const ProfileCard = ({ name, job, avatar, socialLinks }) => {
return (
<div className="profile-card">
<img src={avatar} alt={`${name}'s avatar`} />
<h2>{name}</h2>
<p>{job}</p>
<div className="social-links">
{socialLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.platform}
</a>
))}
</div>
</div>
);
};

在這裡，我們使用了更複雜的 props，包括社交鏈接的數組。讓我們分解一下：

我們從 props 中解構 name、job、avatar 和 socialLinks。
我們使用這些值來填充我們的 JSX。
對於 socialLinks，我們使用 map 函數為每個社交平台創建一個鏈接。

要使用這個組件：

const App = () => {
const socialLinks = [
{ platform: 'Twitter', url: 'https://twitter.com/johndoe' },
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe' }
];

return (
<ProfileCard
name="John Doe"
job="React 開發者"
avatar="https://example.com/avatar.jpg"
socialLinks={socialLinks}
/>
);
};

無狀態組件的最佳實踐

以下是一些讓你的無狀態組件閃耀的提示：

保持專注：每個組件應該做好一件事情。
使用 prop-types：雖然這個教程沒有涵蓋，但 prop-types 有助於通過檢查 props 的類型來捕獲錯誤。
使用默認 props：當有時候提供默認值是有意義時，使用它們。
解構 props：它使你的代碼更乾淨，更容易閱讀。

結論

恭喜你！你剛剛踏出了進入 React 無狀態組件世界的第一步。記住，就像學習任何新技能一樣，熟練需要練習。試著創建你自己的無狀態組件，嘗試不同的 props，最重要的是，享受樂趣！

在我們的下一次課程中，我們將深入探讨如何使用這些組件來構建真實世界的應用程序。在那之前，快樂編程！ | 方法 | 描述 | |--------|-------------| | props | 一個包含傳遞給組件的屬性的對象 | | useState | 一個讓你能在函數組件中添加 React 狀態的 Hook | | useEffect | 一個在函數組件中執行副作用操作的 Hook | | useContext | 一個讓你能在函數組件中訂閱 React context 而不引入嵌套的 Hook | | useReducer | 一個在函數組件中管理更複雜狀態邏輯的 Hook | | useCallback | 一個用於記憶化函數以優化性能的 Hook | | useMemo | 一個用於記憶化昂貴計算的 Hook | | useRef | 一個用於創建在渲染之間持續的變量的 Hook |

Credits: Image by storyset

上一教程:

ReactJS - 狀態管理API

下一教程:

ReactJS - 使用 React Hooks 進行狀態管理