Day5 宣告元件 - Functional Component

React的核心就是将UI拆成不同的程序码，以元件的方式独立，让元件可以在主程序中重复利用。

而要使用这些元件前我们必须将元件宣告後输出使用。

宣告方法有两种方法：

1.Functional Component

2.Class Component

首先介绍Create React App建立的专案中，App.js中使用的元件宣告方式Functional Component。

Functional Component:

使用一般的function函式来宣告元件，可以接受props做参数，回传建立React元件的DOM元素。

src/App.js

//引用需要的档案
import logo from './logo.svg';
import './App.css';

//使用一般Function建立元件
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

//输出元件
export default App;

Functional Component有以下特点：

• 没有自己的元件状态（state）
• 没有元件周期（Lifecycle）
• 不需要以this取值
• 元件传递属性（props）的方式透过function参数传入

Functional component的程序码和Class Component比较简洁，适合使用在功能只有显示画面的简单元件。
因为没有状态，只负责UI呈现，不用考虑资料状态改变的过程，更利於元件程序码的重复利用。

React 在 16.8 版本以後出现了 React Hook 来执行Functional Component的状态及生命周期，让Functional元件可以处理状态些稍微复杂的元件。