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