摘要

本文深入比較了 React 中的類別元件與函式元件，幫助開發者理解它們各自的優缺點及實際應用情境。 歸納要點:

• 類別元件在複雜狀態管理和生命週期事件上仍具優勢,但函式元件因引入 Hooks 而逐漸成為主流。
• 函式元件效能通常更佳,特別是在大型應用中,而類別元件的 `shouldComponentUpdate()` 方法則可有效控制渲染次數。
• 函式元件程式碼結構簡潔易讀,Hooks 的使用讓功能更豐富;相比之下,類別元件需掌握 `this` 指向及其他概念。

React 元件：可重用性、靈活性與效能最佳化

我們在研究許多文章後,彙整重點如下

React Hooks：賦予函式元件更強大功能

import React, { useState, useEffect } from 'react';  function UserProfile() {   const [user, setUser] = useState(null);    useEffect(() => {     fetchUserData().then(data => setUser(data));   }, []);    return (     
       {user ? `Welcome, ${user.name}` : 'Loading...'}     
   ); }

Class 和函式元件：React 開發中的優缺點比較

import React, { Component } from 'react';  class App extends Component {   render() {     return 
Hello, welcome to the app!
;   } }  export default App;

class ClassComponent extends Component {   constructor(props) {     super(props);     this.state = {       data: null,     };   }    componentDidMount() {     this.fetchData();   }    fetchData = () => {     // Fetch data from an API and update state   }    render() {     return 
Data: {this.state.data}
;   } }  export default ClassComponent;

Class元件與函式元件在React應用程式中的比較

import React from 'react';  function UserProfile({ user }) {   return 
Welcome, {user.name}!
; }  export default UserProfile;

import React, { useState, useEffect } from 'react';  function Weather({ location }) {   const [weather, setWeather] = useState(null);    useEffect(() => {     fetchWeather(location).then(data => setWeather(data));   }, [location]);    return (     
       {weather ? `Current temperature: ${weather.temp}°C` : 'Loading weather...'}     
   ); }  export default Weather;

class UserGreeting extends React.Component {   constructor(props) {     super(props);     this.state = { greeted: false };   }    componentDidMount() {     this.setState({ greeted: true });   }    render() {     return 
{this.state.greeted ? 'Hello, user!' : 'Welcome'}
;   } }

function UserGreeting() {   const [greeted, setGreeted] = useState(false);    useEffect(() => {     setGreeted(true);   }, []);    return 
{greeted ? 'Hello, user!' : 'Welcome'}
; }

最佳化 React 元件效能：功能性元件與自訂 Hook 的威力

 Copy code class LocalStateComponent extends React.Component {   constructor(props) {     super(props);     this.state = { count: 0 };   }    increment = () => {     this.setState(prevState => ({ count: prevState.count + 1 }));   };    render() {     return (       
         
{this.state.count}
         Increment       
     );   } }

function LocalStateComponent() {   const [count, setCount] = useState(0);    const increment = () => {     setCount(prevCount => prevCount + 1);   };    return (     
       
{count}
       Increment     
   ); }

function OptimizedComponent({ userId }) {   const user = useMemo(() => fetchUserById(userId), [userId]);   const handleClick = useCallback(() => {     console.log('Clicked!');   }, []);    return (     
       
User: {user.name}
     
   ); }

React元件選擇：函式元件與 Hooks 如何提升效能

class UserData extends React.Component {   componentDidMount() {     this.fetchData();   }    fetchData = () => {     // API call to fetch user data   }    render() {     return 
Welcome to your profile!
;   } }

class ComplexComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       part1: false,       part2: true,       combinedState: false     };   }    render() {     return (       
                         
     );   } }

class ErrorBoundary extends React.Component {   constructor(props) {     super(props);     this.state = { hasError: false };   }    static getDerivedStateFromError(error) {     return { hasError: true };   }    render() {     if (this.state.hasError) {       return 
Something went wrong.
;     }     return this.props.children;   } }

類別元件與功能性元件：在 React 中選擇最佳的元件方式

function WelcomeMessage({ name }) {   return 
Hello, {name}!
; }

function Counter() {   const [count, setCount] = useState(0);    useEffect(() => {     document.title = `You clicked ${count} times`;   });    return (      setCount(count + 1)}>       Click me        ); }

React 函式元件：更簡潔、更強大的開發模式

React 元件開發最佳實踐：簡化、重用與效能提升

參考來源

ReactJS入門－ React Component 元件. 元件的概念 - 碼農思考中/ Ted

本篇文章介紹了兩種元件的建立方式，我個人偏好於function 的方式建立元件，簡單明瞭。但是class 的方式建立是最符合物件導向設計的方式，可以用有元件 ...

來源： Medium

[react] 元件（component） | PJCHENder 未整理筆記

React 中的元件（component）是一個小而可重複使用的程式碼，每一個元件都必須從 Component 這個類別（class）而來，component class 就像是一個可以用來 ...

來源： PJCHENder

React Class-based vs Functional Component: 從特性淺談兩種寫法之 ...

React 要寫出一個元件，有 Class-based 或是 Functional 兩種方式，這篇文章會從寫法比較、元件特性、週期去談兩種寫法的差異，結論先直接推薦 ...

來源： 前端三分鐘

定義元件 - Pies Doc

在React 中，您可以使用類別(class) 或是函式(function) 來定義元件。兩者可以做到的事情幾乎相同，但由於函式元件不僅樣板程式碼(boilerplate) 較少，也 ...

來源： piesdoc.com

【React 學習】認識元件Component | 蕭宇廷的沙龍

元件(Component) 是React 的核心概念，不同的元件組成UI，有點像拼樂高一樣。以往我們都說HTML 是網頁的架構，再搭配CSS 進行美化以及JavaScript 添加 ...

來源： Vocus

建立React 元件(Component ) - iT 邦幫忙

建立元件. React元件有兩種建立方式，這篇會用Functional的方式來建立元件: Class-based 類別元件 ... Functional 函式元件(在16.8版React新增了新功能hook後，即讓函式元件 ...

來源： iT 邦幫忙

改用class Component | 從Hooks 開始，讓你的網頁React 起來

在React 中建立元件的方式有兩種，一種是使用函式（function）建立的，稱作function component；另一種則是使用類別（class）來建立的，稱作class component。

來源： PJCHENder

【React.js入門- 21】 各階層Component的溝通 - iT 邦幫忙

在使用component時，我們常會遇到不同元件需要互相傳資料、呼叫函式的情況，大致可分為: 子對父; 父對子; 子對子(同父的子類別之間); 祖先和某代孫子之間.

來源： iT 邦幫忙