[ Day 07 ] Class Component

上一篇介绍了元件和 React Component 其中之一的 Function Component 的基本概念後，今天就要接着带大家来看 React Component 中的另一个元件类型： Class Component

Class Component

使用 JavaScript ES6 的 Class 语法糖所撰写，并且使用 extends 来继承 React.js 所定义的 Component 物件的元件。

因此要介绍 Class Component 的内容之前会需要先了解 ES6 的 Class 语法结构和内容，所以这边先提供一篇优质文章给大家复习一下 ES6 的 Class 语法结构。

复习完 ES6 Class 语法和结构之後，我们就直接来看要怎麽撰写一个 Class Component ：

从上面的范例程序码中我们可以看到，要宣告一个 Class Component 时要先引入 React.js 中的 Component 物件，引入後使用 extends 继承该 Component 物件，最後再使用 render() 函式来 return 要渲染到画面上的内容就完成一个 Class Component 了。

引用 Test 元件的方式就参照 Function Component 的汇入方式：

import Test from "./components/Test";

ReactDOM.render(
  <React.StrictMode>
    <Test />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

Function Component 和 Class Component 的差异？

React Component 会存在着两个不同类型的元件绝对是有其功能所在。从上一篇的 Function Component 到本篇的 Class Component ，这两个元件究竟差在哪里？

在 React Hooks 之前

在 React Hooks 尚未出现的时候，我们只能使用 Class Component 来撰写 State 以及绑定使用 React 的生命周期（ Life Cycle ）。所以在当时，如果需要绑定生命周期做特定的更新和挂载时就一定得使用 Class Component 才可以达到目的。而 Function Component 所应用的场景就会是在处理比较单纯的 UI （没有 State 的状态），加上 Function Component 在撰写时因为较为接近原生的写法，并不需要额外写 extends 来继承 React Component 和 render() 函式，所以在编译的效能上会比 Class Component 还要来得更好。

在 React Hooks 之後

在 React Hooks 出现之後，原本只是作为单纯处理 UI 画面的 Function Component 现在能够使用 React Hook 的 useState 来操作 State ； 使用 React Hook 的 useEffect 来达到类似操作生命周期的功能。
搭配刚刚上述提及的 Function Component 在撰写上的便利性，让 Function Component 成为了近代 React.js 开发元件时的热门选项。

备注：关於 React Hooks, State 以及 React 的生命周期都将会在未来的篇幅做介绍，之後会再为大家附上传送门。

今天这篇跟大家介绍了 Class Component 以及其与 Function Component 之间的差异，如果大家还想要更了解两者的不同的话可以参考林彦成大大的这篇文章：React Class-based vs Functional Component - 从特性浅谈两种写法之异同 ，文章内有更详细的介绍两个 React Component 之间的差异和用法唷！

那这篇就到这边结束啦！有任何问题都非常非常欢迎提出和指教唷～
我们下篇见ʘ‿ʘ