---
# System prepended metadata

title: Hook
tags: [React]

---

# Hook
###### tags: `React`
(暫放)https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/developing-react-redux-from-zero-to-one-e27eddfbce39
>  function component「hook into」React state 與生命週期功能。

Hook is function，功能: 不需要 class 就能使用 React。

-----
State Hook
* useState()

```
function Example() {
    // 宣告一個新的 state 變數
    const [count, setCount] = useState(0);

    return (
        ----
    );
}
```
-----
Effect Hook
* useEffect(<didUpdate>, [dependencies])
    整合componentDidMount，componentDidUpdate，componentWillUnmount為此單一API。
    預設之下，React 在每一次 render 之後執行 effect(包括第一次)
    ![](https://i.imgur.com/CnbaagN.png)

    [dependencies] :  渲染後，
    如果 dependencies 有改變，才會呼叫 useEffect 內的 function 
    (useEffect內需有條件判斷執行與否，否則會陷入無窮迴圈)
    ![](https://i.imgur.com/3XcWCQs.png)



