挑战 React 第十篇

什么是 Class Component?

与上篇提到的 function Component 的前三点叙述流程几乎一样，只是把 function 变成 Class。

首先要有 Es6 的 ClassClass 可选择性的接收 props 物件内容回传一个 React element， 而 React Element 通常以 Jsx 的方式撰写最大差别在于 Es6 Class 有 private 的 state 可以灵活运用 (state 与 props 下篇再介绍)

实作範例

目标

把下图预设的 React 画面换成 Hi Tom 文字

在 src 资料夹新增一个 Hi Component

在 Hi.js 档案写入以下程式码

import React, { Component} from 'react';class Hi extends Component {  render(){    return <h1>Hi Tom</h1>  }}export default Hi

3.把 index.js 写入 Hi Component

yarn start 成果

两种Component程式码比较

// function Componentimport React from 'react';function Hello() {  return <h1>Hello Tom</h1>}export default Hello;

// Class Componentimport React, { Component} from 'react';class Hi extends Component {  render(){    return <h1>Hi Tom</h1>  }}export default Hi

两种Component比较

FunctionEs6 Class有无state要用 useState hooks有有无this无有UI偏向笨组件偏向聪明组件

学习心得

这篇对我来说与上篇的 function Component 极相似，但差在于写法跟效能上的问题。
提一个题外话，在查询资料过程当中发现了hooks这个东西，function Component hooks大概就是为了与 Class Component 一样有 state 且变得更灵活，但让程式码可读性更好，而衍伸出来的一种写法，突然觉得前端的世界变化好快啊啊啊啊！！！但我还是会先研究组内的写法 Es6 Class + Redux