Hooks基礎

從 react 16.8開始，Hooks 出現，只能在函式元件中使用。

注意點：

有了hooks之後，為了相容老版本，class類元件並沒有被移除，倆者都可以使用。
有了hooks之後，不能在把函式成為無狀態元件了，因為hooks為函式元件提供了狀態。

Hooks 解決了什麼問題

Hooks的出現解決了兩個問題

1. 元件的狀態邏輯複用
2. class元件自身的問題
   class元件就像一個厚重的‘戰艦’ 一樣，大而全，提供了很多東西，有不可忽視的學習成本，比如各種生命週期，this指向問題等等，
   而我們更多時候需要的是一個輕快靈活的’快艇’。

useState

​ useState為函式元件提供狀態（state）

1、使用步驟

1. 匯入 useState 函式
2. 呼叫 useState 函式，並傳入狀態的初始值
3. 從useState函式的返回值中，拿到狀態和修改狀態的方法
4. 在JSX中展示狀態
5. 呼叫修改狀態的方法更新狀態

import { useState } from 'react';

function App() {
    // 引數：狀態初始值比如,傳入 0 表示該狀態的初始值為 0
    // 返回值：陣列,包含兩個值：1 狀態值（state） 2 修改該狀態的函式（setState）
    const [ count, setCount ] = useState( 0 );
    return (
        <
 
button onClick={ () => {
            setCount( count + 1 );
        } }>{ count }</button>
    );
}

export default App;

2、注意

1. 不能巢狀在if/for/其它函式中（react按照hooks的呼叫順序識別每一個hook）。
2. useState 函式可以執行多次，每次執行互相獨立，每呼叫一次為函式元件提供一個狀態。

useEffect

副作用（useEffect）是相對於主作用來說的，一個函式除了主作用，其他的作用就是副作用。
對於 React 元件來說，主作用就是根據資料（state/props）渲染 UI，除此之外都是副作用（比如，手動修改 DOM）。