挑战 React 第九篇

什么是 Function Component?

上篇文章我们了解Component的概念就是UI的其中一个部分，也可以重複利用。
而以官方文档解释的话：

component 就像是 JavaScript 的 function，它接收任意的参数（称之为「props」）并且回传描述画面的 React element[color=#7cb21e]

因此就上述已知的观念，转换成以下步骤理解 function Component

首先要有 Javascript functionfunction 可选择性的接收 props 物件function 内容回传一个 React element， 而 React Element 通常以 Jsx 的方式撰写

步骤示意图：

实作範例

目标

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

在 src 资料夹新增一个 Hello Component

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

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

亦或也可以写成React主推ES6的写法

import React from 'react';const Hello = () => <h1>Hello Tom</h1>export default Hello;

在把 index.js 写入 Hello Componentimport Hello档案里的 App Component 换成 Hello Component移除不需要的 import App

如下图一样

yarn start 成果

程式码解析

若不引入 import React From 'react';会发生什么事?

若注解掉import React，则在 compile 的时候会认不得Jsx 语法糖

export default Hello

预设汇出 Hello 组件，因此在 Index.js 引入的时候输入任何名字都可以解析

若改成汇出时没有写 default会发生什么事？

学习心得

老实说我是看了官方网站才知道有function Component，当自己实作了一遍才更理解 Component 所代表的意义，甚至也深入了解export default Component，此篇自己学到了很多。