Skip to main content

[React] Hooks

Hooks​

「具有狀態(State)」的「可邏輯重用」的函式寫法。

React v16.8 推出了 hooks功能之後（2019/2/6發布），Class Component已不再被官方推薦使用。Function Component 搭配 hooks使用也可以有 State。

延伸閱讀​

The Ugly Side of Hooks（譯） 反對 hooks的文章

一篇看懂 React Hook

React(v16.8)Hooks簡析

useState​

const { useState } = React

// 寫在 render function內
const [input, setValue] = useState("")

範例

https://codepen.io/cdpqdnvr/pen/ZEeawKx?editors=1010

useEffect​

和 Vue的 watch有點像，但在 React裡面被認為是一種 state變更的附作用，可見背後思考邏輯的不同

官方範例

https://zh-hant.reactjs.org/docs/hooks-effect.html#example-using-hooks-1

import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // 指定如何在這個 effect 之後執行清除：
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

image-20210501154533400

圖片截取至 Modern React with Redux @ Udemy/Stephen Grider

useRef​

延伸閱讀​

[React Hook 筆記] useRef

useContext​

useContext 使用的情境是在需要跨層傳值的情況，就不需要透過 props一層一層傳下去

img

圖片截取至 [React Hook 筆記] useContext @ Medium/Hannah Lin

// App.js
export const ThemeContext = React.createContext() 
const App = () => {
    const [dark, setDark] = useState(true);
    return (
        <>
            <ThemeContext.Provider value={dark}>
              <FunctionComponent />
              <ClassComponent />
            </ThemeContext.Provider>
        </>
    );
}

// FunctionComponent.js
const FunctionComponent = () => {
    return (
        <ButtonGroupComponent />
    );
}

// ButtonGroupComponent.js
import { ThemeContext } from './App.js';
const ButtonGroupComponent = () => {
  // get dark value from ThemeContext
  const darkTheme = useContext(ThemeContext)
  const themeStyle = {
    backgroundColor: darkTheme ? '#2c3e50': '#f1c40f',
    color: darkTheme ? '#ecf0f1' : '#2c3e50'
  }
  return (
    <button style={themeStyle}>useContext</button>
  );
}

範例截取至 [React Hook 筆記] useContext @ Medium/Hannah Lin

延伸閱讀​

[React Hook 筆記] useContext @ Medium/Hannah Lin

useContext & useReducer 實作 Redux 的功能（取代Redux？）​

（我研究到後來覺得有點複雜，乾脆就直接使用 Redux了）

Redux 作者 Dan Abramov 的推薦文章：How to fetch data with React Hooks?

其他：

【译】不要再问我React Hooks能否取代Redux了

如何使用 React Hooks 搭配 Context API 取代 Redux 快速範例入門

React | 在 Hooks 中以 useContext 與 useReducer 實現 Redux

npm uninstall redux