筆記-React-Hooks

一、矛與盾的問題？（Class組件與函數式組件）

  在 React 中 Class 組件好用還是函數式組件好用呢，各有各的說法，如果你一味的去說這個好還是另一個好，那麼終歸還是太年輕啊。
  對此，我的建議是：把兩個都好好看看，各有千秋，如果你是領導你想用那個就用哪個，如果你是螺絲，領導讓你用哪個你就用哪個就行了。

Class組件優缺點

• 👍Class組件可以定義自己的state，用於保存內部狀態
• 👍Class組件有自己的生命週期，用於相關邏輯
• 👍Class組件在改變狀態時，只會重新執行render、componentDidUpdate更新函數

---

• 👎隨着業務增多，Class組件越累越臃腫複雜
• 👎難以理解的Class、this綁定等
• 👎組件的狀態複用比較困難

函數式組件優缺點

• 👍語法上更加簡潔，易於理解
• 👍不再需要考慮this的問題
• 👍性能消耗小，不需要創建實例

---

• 👎不能保存狀態，每次調用函數都會產生新的臨時變量
• 👎沒有生命週期，重新渲染時，整個函數都會被執行（函數中發送網絡請求，意味着每次重新渲染都會發送一次新的網絡請求）

對於上面 函數式組件 這些情況， 我們通常都會編寫 Class組件，直到 Hooks 的出現

• 👍Hooks的出現基本可以代替我們之前所有使用Class組件的地方
• 👍它可以讓你在不編寫 Class 的情況下使用 state 以及其他的 React 特性🌟🌟🌟🌟🌟
• ⚠️Hook只能在函數組件中使用，不能在類組件，或者函數組件之外的地方使用

---

二、Hooks使用規則

Hook使用規則

• 1、只在最頂層使用 Hook。（不要在循環，條件或嵌套函數中調用 Hook）
• 2、只在 React 函數中調用 Hook。（不要在普通的 JavaScript 函數中調用 Hook）
• 具體原因以後文檔會具體分析一下，或者直接去官網鏈接查看（面試常考）⌛️⌛️⌛️⌛️

---

三、基礎Hooks的使用

3.1、State Hook

• 認識useState

- 調用：useState會幫助我們定義一個state變量，它與class裏面的this.state提供的功能完全相同
- 傳參：useState接收唯一的參數就是初始 state，在第一次組件被調用時使用來作爲初始化值（如果沒有則爲undefine）
- 返回值：useState返回值是一個數組，可以通過數組的解構來拿到值

使用場景：
如果你在編寫函數組件並意識到需要向其添加一些 state，以前的做法是必須將其轉化爲 class。現在你可以在現有的函數組件中使用 Hook

• useState的初使用

import React, {useState} from 'react';

export default function CounterHook() {
    /**
     * Hook：useState
     *
     * 本身是一個函數，來自react包
     * 
     * 1、參數：作用是給創建出來的狀態一個默認值
     * 2、返回值：元素1（當前count的值）、元素2（設置新的值時，使用的一個函數）
     */
    
    const [count, setCount] = useState(0);
    return (
        <div>
            <h2>當前計數：{count}</h2>
            <button onClick={e => setCount(count + 1)}>+1</button>
            <button onClick={e => setCount(count - 1)}>-1</button>
        </div>
    );
}

• useState中使用多個複雜變量

import React, {useState} from 'react';

export default function MultipleState() {
    const [friends, setFriends] = useState(['li', 'zhi']);
    const [students, setStudents] = useState([
        {id: 110, name: 'li', age: 18},
        {id: 111, name: 'zhi', age: 19},
        {id: 112, name: 'qiang', age: 20},
    ]);

    function incrementAgeWithIndex(index) {
        const newStudents = [...students];
        newStudents[index].age += 1;
        setStudents(newStudents);
    }

    return (
        <div>
            <h2>好友列表：</h2>
            <ul>
                {
                    friends.map((item, index) => {
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
            <button onClick={e => setFriends([...friends, 'qiang'])}>添加朋友</button>

            <h2>學生列表</h2>
            <ul>
                {
                    students.map((item, index) => {
                        return (
                            <li key={item.id}>
                                <span>名字：{item.name}, 年齡：{item.age}</span>
                                <button onClick={e => incrementAgeWithIndex(index)}>age+1</button>
                            </li>
                        );
                    })
                }
            </ul>
        </div>
    );
}

• 3.2、Effect Hook

• 認識 useEffect

- useEffect 可以完成一些類似於Class生命週期的功能
- 把 useEffect 看做Class組件中 componentDidMount，componentDidUpdate 和 componentWillUnmount 這三個函數的組合

使用場景
- 一般用於網絡請求、DOM手動更新、事件監聽等

• useEffect的初使用

import React, {useState, useEffect} from 'react';

export default function ChangeTitleHook() {
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        document.title = counter;
    })

    return (
        <div>
            <h2>當前計數：{counter}</h2>
            <button onClick={e => setCounter(counter + 1)}>+1</button>
        </div>
    );
}

• 函數清除

Class 組件中，通常會在 componentDidMount 中設置訂閱，並在 componentWillUnmount 中清除它，下面介紹一下在 useEffect 中如何清除

import React, {useEffect, useState} from 'react';

function DispatchEffectHook() {
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        console.log('訂閱');

        // 如果外部將此組件清除，會調用內部函數，取消訂閱
        return () => {
            console.log('取消訂閱');
        }
    }, []);

    return (
        <div>
            <h2>DispatchEffectHook</h2>
            <h2>{counter}</h2>
            <button onClick={e => setCounter(counter + 1)}>+1</button>
        </div>
    );
}

export default DispatchEffectHook;

• 性能優化：通過跳過 Effect 進行性能優化

import React, {useEffect, useState} from 'react';

function MultiEffectHook() {
    const [counter, setCounter] = useState(0);

    /**
     * 參數二：[counter]
     * 
     * 表示僅在 counter 更改時更新
     */
    useEffect(() => {
        console.log('修改dom', counter);
    }, [counter]);

    /**
     * 如果想執行只運行一次的 effect（僅在組件掛載和卸載時執行），可以傳遞一個空數組（[]）作爲第二個參數。
     * 
     * 這就告訴 React 你的 effect 不依賴於 props 或 state 中的任何值，所以它永遠都不需要重複執行。
     */
    useEffect(() => {
        console.log('網絡請求');
    }, []);

    return (
        <div>
            <h2>DispatchEffectHook</h2>
            <h2>{counter}</h2>
            <button onClick={e => setCounter(counter + 1)}>+1</button>
        </div>
    );
}

export default MultiEffectHook;

四、自定義HOOK

• 本質將函數之間一些共同的代碼提取到單獨的函數中，而不是React新特性
• 自定義 Hook 是一個函數，其名稱必須以 “use” 開頭，函數內部可以調用其他的 Hook

import React, {useEffect} from 'react';

const Home = (props) => {
    useLoggingLife('Home');
    return <h2>Home</h2>
}

const Profile = (props) => {
    useLoggingLife('Profile');
    return <h2>Profile</h2>
}

function CustomerLifeHookDemo01() {
    useLoggingLife('CustomerLifeHookDemo01');
    return (
        <div>
            <Home/>
            <Profile/>
        </div>
    );
}

/**
 * 自定義hook必須以use開頭
 * @param name
 */
function useLoggingLife(name) {
    useEffect(() => {
        console.log(`${name}組件被創建`);
        return () => {
            console.log(`${name}組件被銷燬`);
        }
    }, []);
}

export default CustomerLifeHookDemo01;

---

五、useReducer

- 放到後期的Redux中講解

---

六、深入拓展（待更新）

---

參考文章

• React官網-Hook
• 《小碼哥-React視頻》
• 30分鐘精通React Hooks