如何使用react hooks來進行狀態管理？

一、如何使用redux

首先要明確為什么要使用redux，這一點很重要，如果不知道為什么使用redux，那么在開發的過程中肯定不能合理的使用redux.首先來看redux的本質：

redux做為一款狀態管理工具，主要是為了解決組件間通信的問題。

既然是組件間的通信問題，那么顯然將所有頁面的狀態都放入redux中，是不合理的，復雜度也很高。

 

(1)全量使用redux

筆者在早期也犯了這個問題,在應用中，不管什么狀態，按頁面級路由拆分，全部放在redux中，頁面任何狀態的更改，通過react-redux的mapState和mapDispatch來實現。

redux中的狀態從狀態更新到反饋到視圖，是一個過程鏈太長，從dispatch一個action出發，然后走reducer等邏輯，一個完整的鏈路包含：

創建action，創建redux中間件，創建相應type的reducer函數，創建mapState和mapDispatch等。

如果將所有狀態都保存在redux中，那么每一個狀態必須走這幾步流程，及其繁瑣，毫無疑問增加了代碼量

 

(2)減少局部狀態和redux狀態的不合理混用

全量使用redux的復雜度很高，我們當然考慮將一部分狀態放在redux中，一部分狀態放在local state中，但是這種情況下，很容易產生一個問題，就是如果local State跟redux中的state存在狀態依賴。

舉例來說，在redux中的狀態中有10個學生

//redux students = [{name:"小明",score:70},{name:"小紅",score:50}....]

在local state中我們保存了分數在60分以上的學生

// local state state = [{name:"小明",score:70}]

如果redux中的學生改變了，我們需要從redux中動態的獲取students信息，然后改變局部的state.結合react-redux，我們需要在容器組件中使用componentWillReceivedProps或者getDerivedStateFromProps這個聲明周期，來根據props改變局部的local state.

componentWillReceivedProps這里不討論，為了更高的安全性，在react中用靜態的getDerivedStateFromProps代替了componentWillReceivedProps這里不討論，而getDerivedStateFromProps這個聲明周期函數在props和state變化的時候都會去執行，因此如果我們需要僅僅在props的改變而改變局部的local state，在這個聲明周期中會存在着很復雜的判斷邏輯。

redux中的狀態和local state中的狀態相關聯的越多，getDerivedStateFromProps這個聲明周期函數就越復雜

給我們的啟示就是盡可能的減少getDerivedStateFromProps的使用，如果實在是redux和local state有關聯性，用id會比直接用對象或者數組好，比如上述的例子，我們可以將學生分組，並給一個組號，每次在redux中的學生信息發生改變的時候會改變相應的組號。
這樣在getDerivedStateFromProps只需要判斷組號是否改變即可：

    class Container extends React.Component{ state = { group_id:number } static getDerivedStateFromProps(props,state){ if(props.group_id!==state.group_id){ ... 更新及格的學生 }else{ return null } } }

這里推薦https://github.com/paularmstrong/normalizr，state關聯性強，可以先將數據范式化，范式化后的數據類似於給一個復雜結構一個id，這樣子會簡化getDerivedStateFromProps的邏輯.

 

(3)本節小結

如何使用redux,必須從redux的本質出發，redux的本質是為了解決組件間的通信問題，因此組件內部獨有的狀態不應該放在redux中,此外如果redux結合class類組件使用，可以將數據范式化，簡化復雜的判斷邏輯。

 

二、react hooks管理local state

前面將了應該如何使用redux,那么如何維護local state呢，React16.8中正式增加了hooks。通過hooks管理local state，簡單易用可擴展。

在hooks中的局部狀態常見的有3種，分別是useState、useRef和useReducer

 

(1) useState

useState是hooks中最常見的局部狀態，比如：

const [hide, setHide] = React.useState(false); const [name, setName] = React.useState('BI');

理解useState必須明確，在react hooks中：

每一次渲染都有它自己的 Props and State

一個經典的例子就是：

    function Counter() { const [count, setCount] = useState(0); function handleAlertClick() { setTimeout(() => { alert('You clicked on: ' + count); }, 3000); } return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> <button onClick={handleAlertClick}> Show alert </button> </div> ); }

如果我按照下面的步驟去操作：

• 點擊增加counter到3
• 點擊一下 “Show alert”
• 點擊增加 counter到5並且在定時器回調觸發前完成

猜猜看會alert出什么？結果是彈出了3，alert會“捕獲”我點擊按鈕時候的狀態，也就是說每一次的渲染都會有獨立的props和state.

 

(2) useRef

在react hooks中,我們知道了每一次的渲染都會有獨立的props和state，那么如果我們需要跟類組件一樣，每次都能拿到最新的渲染值時，應該怎么做呢？此時我們可以用useRef

useRef提供了一個Mutable可變的數據

我們來修改上述的例子，來是的alert為5:

    function Counter() { const [count, setCount] = useState(0) const late = useRef(0) function handleAlertClick() { setTimeout(() => { alert('You clicked on: ' + late.current) }, 3000) } useEffect(() => { late.current = count }) return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={handleAlertClick}>Show alert</button> </div> ) }

如此修改以后就不是alert3 而是彈出5

 

(3) useReducer

react hooks中也提供了useReducer來管理局部狀態.

當你想更新一個狀態，並且這個狀態更新依賴於另一個狀態的值時，你可能需要用useReducer去替換它們。

同樣的用例子來說明：

    function Counter() { const [state, dispatch] = useReducer(reducer, initialState); const { count, step } = state; useEffect(() => { const id = setInterval(() => { dispatch({ type: 'tick' }); }, 1000); return () => clearInterval(id); }, [dispatch]); return ( <> <h1>{count}</h1> <input value={step} onChange={e => { dispatch({ type: 'step', step: Number(e.target.value) }); }} /> </> ); } const initialState = { count: 0, step: 1, }; function reducer(state, action) { const { count, step } = state; if (action.type === 'tick') { return { count: count + step, step }; } else if (action.type === 'step') { return { count, step: action.step }; } else { throw new Error(); } }

解釋上面的結果主要來看useEffect部分：

    useEffect(() => { const id = setInterval(() => { dispatch({ type: 'tick' }); }, 1000); return () => clearInterval(id); }, [dispatch]);

在state中的count依賴與step,但是使用了useReducer后，我們不需要在useEffect的依賴變動數組中使用step,轉而用dispatch來替代,這樣的好處就是減少不必要的渲染行為.

此外:局部狀態不推薦使用 useReducer ，會導致函數內部狀態過於復雜，難以閱讀。 useReducer 建議在多組件間通信時，結合 useContext 一起使用。

 

三、react hooks如何解決組件間的通信

react hooks中的局部狀態管理相比於類組件而言更加簡介，那么如果我們組件采用react hooks，那么如何解決組件間的通信問題。

 

(1) UseContext

最基礎的想法可能就是通過useContext來解決組件間的通信問題。

比如：

function useCounter() { let [count, setCount] = useState(0) let decrement = () => setCount(count - 1) let increment = () => setCount(count + 1) return { count, decrement, increment } } let Counter = createContext(null) function CounterDisplay() { let counter = useContext(Counter) return ( <div> <button onClick={counter.decrement}>-</button> <p>You clicked {counter.count} times</p> <button onClick={counter.increment}>+</button> </div> ) } function App() { let counter = useCounter() return ( <Counter.Provider value={counter}> <CounterDisplay /> <CounterDisplay /> </Counter.Provider> ) } 

在這個例子中通過createContext和useContext，可以在App的子組件CounterDisplay中使用context,從而實現一定意義上的組件通信。

如果context太多，那么如何維護這些context

也就是說在大量組件通信的場景下，用context進行組件通信代碼的可讀性很差。這個類組件的場景一致，context不是一個新的東西，雖然用了useContext減少了context的使用復雜度。

 

(2) Redux結合hooks來實現組件間的通信

hooks組件間的通信，同樣可以使用redux來實現。也就是說：

在React hooks中，redux也有其存在的意義

在hooks中存在一個問題，因為不存在類似於react-redux中connect這個高階組件，來傳遞mapState和mapDispatch, 解決的方式是通過redux-react-hook或者react-redux的7.1 hooks版本來使用。

redux-react-hook：在redux-react-hook中提供了StoreContext、useDispatch和useMappedState來操作redux中的store，比如定義mapState和mapDispatch的方式為：

import {StoreContext} from 'redux-react-hook'; ReactDOM.render( <StoreContext.Provider value={store}> <App /> </StoreContext.Provider>, document.getElementById('root'), ); import {useDispatch, useMappedState} from 'redux-react-hook'; export function DeleteButton({index}) { // Declare your memoized mapState function const mapState = useCallback( state => ({ canDelete: state.todos[index].canDelete, name: state.todos[index].name, }), [index], ); // Get data from and subscribe to the store const {canDelete, name} = useMappedState(mapState); // Create actions const dispatch = useDispatch(); const deleteTodo = useCallback( () => dispatch({ type: 'delete todo', index, }), [index], ); return ( <button disabled={!canDelete} onClick={deleteTodo}> Delete {name} </button> ); }

react-redux 7.1的hooks版：這也是官方較為推薦的，react-redux 的hooks版本提供了useSelector()、useDispatch()、useStore()這3個主要方法，分別對應與mapState、mapDispatch以及直接拿到redux中store的實例.

簡單介紹一下useSelector,在useSelector中除了能從store中拿到state以外，還支持深度比較的功能，如果相應的state前后沒有改變，就不會去重新的計算.

舉例來說，最基礎的用法：

import React from 'react' import { useSelector } from 'react-redux' export const TodoListItem = props => { const todo = useSelector(state => state.todos[props.id]) return <div>{todo.text}</div> }

實現緩存功能的用法:

import React from 'react' import { useSelector } from 'react-redux' import { createSelector } from 'reselect' const selectNumOfDoneTodos = createSelector( state => state.todos, todos => todos.filter(todo => todo.isDone).length ) export const DoneTodosCounter = () => { const NumOfDoneTodos = useSelector(selectNumOfDoneTodos) return <div>{NumOfDoneTodos}</div> } export const App = () => { return ( <> <span>Number of done todos:</span> <DoneTodosCounter /> </> ) } 

在上述的緩存用法中，只要todos.filter(todo => todo.isDone).length不改變，就不會去重新計算.

廣州VI設計公司https://www.houdianzi.com

四、總結

react中完整的狀態管理分為全局狀態和局部狀態，而react hooks簡化了局部狀態，使得管理局部狀態以及控制局部渲染極其方便，但是react hooks本質上還是一個視圖組件層的，並沒有完美的解決組件間的通信問題，也就是說，redux等狀態管理機和react hooks本質上並不矛盾。

在我的實踐中，用redux實現組件間的通信而react hooks來實現局部的狀態管理，使得代碼簡單已讀的同時，也減少了很多不必要的redux樣板代碼.