摘要

• 這篇文章的目的是 ?
• React「元件」分享
• 連結

這篇文章的目的是 ?

各位好，今天要分享的是目前前端三大框架 Angular、React、Vue 中的 React，為什麼要介紹它呢 !? 因為這是我目前擔任前端工程師所使用的，哪會說另外兩個 Angular、Vue 不好嗎 !? 事實並不是這樣的，有前輩曾經分享一件事給我聽，如果今天您要學習的技能，是工作沒有在用的，哪目前是學一個興趣的，哪往往的是，當您學完之後，過了 2 個月，您鐵定會忘光光，因為學習一個新技能，固然是件好事，但是要是能結合目前工作所需，哪鐵定能更事半功倍。

React「元件」分享

元件是 React 的核心概念之一，這也是 React 的精髓。當描述 React function component 時，輸入在 React 中叫做 props，自己的內部狀態使用 useState Hook 來管理，輸出是使用 return 陳述式來返回渲染的元素。

接著來講古，我將介紹，React 元件撰寫方式的演進，從 createClass 到 Functional Component：

1. createClass
   在撰寫 React 的早期版本中，我們使用**createClass**方法來建立元件。距離現在這種方式已經過時，不再建議使用，但了解它的工作方式是有幫助的。

   const MyComponent = React.createClass({
     render: function() {
       return <div>Hello, World!</div>;
     }
   });
   

2. Class Component
   後來隨著 ES 6 的推出，React 定義元件的語法，也朝向 ES 6 靠龍 (畢竟寫 React 就像是在寫 JS，而且這比重是 100%)，我們不再使用**createClass來定義元件，而是使用 Class。**

   import React, { Component } from 'react';
   
   class MyComponent extends Component {
     render() {
       return <div>Hello, World!</div>;
     }
   }
   

3. Functional Component
   再後來，隨著 React 16.8.0 版本的推出，React Hook 的誕生及引用，導致撰寫 Functional Component 變得更加方便及流行，這是一個使用了純 function 來定義的元件。

   import React from 'react';
   
   const MyComponent = () => {
     return <div>Hello, World!</div>;
   }
   

React 元件的撰寫方式已經從**createClass**演進到 Class Component，然後再到 Functional Component。雖然 Class Component 仍然是一個有效的選擇，並且有些古老的專案仍然是這種寫法，但 Functional Component 在 React 撰寫的模式，已經成為了 React 開發的主要趨勢，因為它更簡潔且易於理解。後，要說的是如果是現在這個時候，要開始新的 React 專案時，強烈建議使用 Functional Component 和 React Hooks，以保持代碼的簡潔和易於維護，這樣做的好處是，隨著專案越來越龐大、業務邏輯越來越複雜，這樣的模式，有助於維護團隊程式碼一定的品質。

連結

• React：https://react.dev/