iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

以 React 為主的那些前端事系列 第 2

Day 02 - 那個 React Hook

如果有錯誤,歡迎留言指教~ Q_Q

什麼是 Hook?

Hook 是 React 16.8 中增加的新功能。它讓你不必寫 class 就能使用 state 以及其他 React 的功能。

Hook 是 function,他讓你可以從 function component「hook into」React state 與生命週期功能。Hook 在 class 裡面沒有辦法用——他們讓你不用 class 就能使用 React。

需要 Hook 的理由

理由1: 方便共用擁有狀態邏輯的程式碼

在 class 共用狀態邏輯很麻煩

通常用 render props 或用 provider ...等等傳遞狀態

但可能在各個 component 依賴包來包去的情況下

共用邏輯也可能需要改來改去,也會因為層級的關係,維護不便

在 Hook 就可以自己創個 customHook → 狀態直接分享使用

理由2: 不再被 lifecycle 綁手綁腳

在 lifecycle 裡面,常常不相關的邏輯會放在同一個方法

相同邏輯的程式碼又因為 lifecycle 分散在不同地方

增加了維護的麻煩,和在 Component 之間重用 Stateful 的邏輯的困難

理由3: 可以不用煩惱 this

常常搞不清楚 this (還是只有我!?)

hook 是 function, function 沒有 instance 所以沒有 this

所以不需要再 bind(this) 去設定 state 和 event

理由4:程式碼可以..少一點(我就懶)

Class Component
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          ...
        };
    }
    
    ...
};
Function Component(React Hook)
const App = () => {
    const [value, setValue] = useState({
        ...
    });

};

總之

在 Hook 不要想著生命週期,只要想著元件的狀態,和會呈現的效果

但 React 目前沒有計畫要 移除 class,所以還是要會 XD


上一篇
Day 01 - 前言
下一篇
Day 03 - 命名的規則
系列文
以 React 為主的那些前端事30

1 則留言

0
Ken Chen
iT邦新手 5 級 ‧ 2021-09-18 10:01:10

感謝分享
推推 可以不用煩惱 this 覺得開熏
/images/emoticon/emoticon01.gif

我要留言

立即登入留言