[[426178]]

【51CTO.com快譯】如果您是一名React開發(fā)人員，那么一定對狀態(tài)管理策略并不陌生。當我們在使用React去構(gòu)建Web應(yīng)用時，所有信息都被保存在所謂的狀態(tài)之中。我們只需要更新該狀態(tài)，即可實現(xiàn)對Web應(yīng)用的更新。而狀態(tài)管理，是指在應(yīng)用程序的生命周期中，處理各種事件，并控制不同組件之間數(shù)據(jù)傳遞的過程。

一直以來，我們都習慣于使用針對JavaScript應(yīng)用的、流行且強大的Redux庫，作為狀態(tài)容器。而React本身在其16.8版中已增加了Hooks。在本文中，我將根據(jù)自己在使用React SDK，構(gòu)建生產(chǎn)級數(shù)據(jù)可視化工具過程中的經(jīng)驗，和您探討這兩種狀態(tài)管理的方法，并介紹作為第三種方法的混合使用。

狀態(tài)管理戰(zhàn)略規(guī)劃

首先，讓我們來考慮狀態(tài)管理的兩個難題：需要存儲什么狀態(tài)，以及為什么要如此。畢竟，在數(shù)據(jù)可視化的應(yīng)用中，并非所有狀態(tài)都是相同的。

如下應(yīng)用示例所示，我們希望通過圖表中顯示的節(jié)點和鏈接，以獲悉當前的各個連接，以及與時間線組件共享的數(shù)據(jù)，進而甄別出數(shù)據(jù)集中的時間戳。其Sidebar包括了用于搜索和更新圖表、及時間線的UI元素。簡單而言，我們的目標就是實現(xiàn)如下圖形和時間線的可視化。具體請參見--KronoGraph(。

在狀態(tài)管理策略的規(guī)劃階段，我們可以通過在軸上繪制狀態(tài)，以了解正在處理的具體內(nèi)容：

如上圖所示，我們在此所遵循的原則為：

• 條目類型：除非您正在構(gòu)建一個通用應(yīng)用，否則圖表和時間線中的節(jié)點類型(如：人員、地點、車輛)都應(yīng)當盡可能是靜態(tài)的。由于我們可以提前定義它們，因此它們不需要帶有狀態(tài)，可以位于存儲庫的配置文件中。
• 條目樣式：包含了每個節(jié)點和鏈接類型的核心樣式，以及它們的預期邏輯。
• 主題選擇：為用戶提供了在暗模式與亮模式之間切換的選項，并通過該狀態(tài)的變化，去跟蹤用戶的偏好。
• UI狀態(tài)：UI狀態(tài)包括靜態(tài)和臨時等。雖然我們沒有必要在狀態(tài)中，存儲所有關(guān)于表單的交互，但是需謹防那些可能導致應(yīng)用處于無響應(yīng)狀態(tài)的常見錯誤。
• 條目位置和時間線范圍：網(wǎng)絡(luò)中的節(jié)點位置可能并不固定：

1. 在圖表中，用戶可以根據(jù)偏好進行布局，并手動定位節(jié)點。
2. 在時間線中，用戶可以放大其感興趣的時間范圍。
3. 在不同的會話中，通過位置的保持，用戶可以從上一次中斷處繼續(xù)。

• 撤消與重做棧：在高級應(yīng)用中，我們需要通過設(shè)計，讓用戶能夠在各自的當前會話中，保留撤消與重做數(shù)據(jù)的權(quán)限。
• 來自API的數(shù)據(jù)：功能強大的應(yīng)用程序，需要將那些從外部端點或API接收來的、動態(tài)且臨時的數(shù)據(jù)緩存起來，并保存它們在應(yīng)用中的狀態(tài)。

狀態(tài)管理的方法

有了前面狀態(tài)管理的規(guī)劃，我們來考慮應(yīng)用中的數(shù)據(jù)層次結(jié)構(gòu)。目前，我們有三種主要的狀態(tài)管理方法可供選擇：

• 處理組件中的狀態(tài)，并按需使用Hook在狀態(tài)間進行傳遞。這種方法通常被稱為“prop drilling”或“提升狀態(tài)”，常被推薦用于基礎(chǔ)類的應(yīng)用。
• 使用某種全局存儲，以便所有組件都可訪問。Redux之類的庫可以提供該功能。
• 使用混合方法，將Hook與那些經(jīng)過慎重選擇的重要狀態(tài)相結(jié)合。

下面，讓我們通過上述數(shù)據(jù)可視化的應(yīng)用，來進一步探索這三種方法。

Redux狀態(tài)管理

自2015年被發(fā)布以來，Redux已經(jīng)成為了React生態(tài)系統(tǒng)的關(guān)鍵部分。它使用不變性(immutability)來簡化應(yīng)用程序的開發(fā)和邏輯設(shè)計。通過將處于某種狀態(tài)的所有條目，強制設(shè)置為不變性，我們可以跟蹤對于數(shù)據(jù)的任何更改，進而避免可能導致意外錯誤發(fā)生的數(shù)據(jù)突變。

雖然Redux目前仍是狀態(tài)復雜的大型應(yīng)用的絕佳選擇，但是隨著時間的推移，它變得日漸臃腫。為了協(xié)助降低其復雜性，Redux Toolkit于2019年應(yīng)運而生，并成為了Redux的首推方式。

一致性的狀態(tài)更新

Redux的一個核心概念是reducer。對于那些具有函數(shù)編程經(jīng)驗的人而言，這是一個能夠接受多個輸入，并將其減少為單個輸出的函數(shù)。在狀態(tài)管理中，該擴展能夠讓您通過采用一個或多個狀態(tài)的更新指令，為圖表生成一致性的狀態(tài)更新。

讓我們來考慮一個標準化的圖形可視化用例：在圖表中添加和刪除節(jié)點。為了在全局存儲中創(chuàng)建一個狀態(tài)“切片”，我們在store.js中創(chuàng)建了如下代碼：

JavaScript

import { configureStore } from '@reduxjs/toolkit'; 
import itemsReducer from '../features/chart/itemsSlice'; 
  
export const store = configureStore({ 
 reducer: { 
   items: itemsReducer 
 } 
}); 

為了讓應(yīng)用程序中的其他組件能夠訪問該存儲，我們可以對應(yīng)用程序進行如下“包裝”：

JavaScript

importReactfrom 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import { store } from './app/store'; 
import { Provider } from 'react-redux'; 
import * as serviceWorker from './serviceWorker'; 
  
ReactDOM.render( 
 <React.StrictMode> 
   <Provider store={store}> 
     <App /> 
   </Provider> 
 </React.StrictMode>, 
 document.getElementById('root') 
); 

其中的Provider段意味著，其任何下游都可以訪問該存儲。在itemsSlice.js中，我們?yōu)楦鱾€條目定義了狀態(tài)切片：

JavaScript

import { createSlice, createEntityAdapter } from '@reduxjs/toolkit'; 
  
export const itemsAdapter = createEntityAdapter(); 
const initialState = itemsAdapter.getInitialState(); 
  
export const itemsSlice = createSlice({ 
 name: 'items', 
 initialState, 
 reducers: { 
   addItems: itemsAdapter.addMany, 
   addItem: itemsAdapter.addOne, 
   removeItems: itemsAdapter.removeMany, 
   removeItem: itemsAdapter.removeOne, 
 }, 
}); 
  
export const { addItems, addItem, removeItems, removeItem } = itemsSlice.actions; 
  
export const { select, selectAll, selectTotal } = itemsAdapter.getSelectors((state) => state.items); 
  
export default itemsSlice.reducer; 

通過上述代碼段，我們可以獲悉：

• ReGraph的條目是各種通過ID索引的節(jié)點和鏈接對象。其核心數(shù)據(jù)結(jié)構(gòu)十分常見。Redux Toolkit會通過一些輔助函數(shù)，來處理此類格式數(shù)據(jù)。在此，我們用到了由createEntityAdapter提供的addMany、addOne、removeMany、以及removeOne等功能。
• 在Redux中，Selector允許我們從存儲中獲取一個狀態(tài)片。我可以利用getSelectors適配器，來避免自行編寫狀態(tài)查詢代碼。
• 最后，我們導出所有內(nèi)容，以便在應(yīng)用程序的其他地方使用。

在應(yīng)用的其他代碼中，我們還用到了store、reducer和selectors：

JavaScript

import React from 'react'; 
import { useSelector, useDispatch } from 'react-redux'; 
  
import { Chart } from 'regraph'; 
import { addItems, addItem, removeItems, removeItem, selectAll, selectTotal } from './itemsSlice'; 
  
import mapValues from 'lodash/mapValues'; 
  
import styles from './NetworkChart.module.css'; 
  
const colors = ['#173753', '#6daedb', '#2892d7', '#1b4353', '#1d70a2']; 
  
const defaultNodeStyle = (label) => ({ 
 label: { 
   text: `User ${label}`, 
   backgroundColor: 'transparent', 
   color: 'white', 
 }, 
 border: { width: 2, color: 'white' }, 
 color: colors[(label - 1) % colors.length], 
}); 
  
const styleItems = (items, theme) => { 
 return mapValues(items, (item) => { 
   if (item.id1) { 
     return { ...defaultLinkStyle(item.id), ...theme[item.type] }; 
   } else { 
     return { ...defaultNodeStyle(item.id), ...theme[item.type] }; 
   } 
 }); 
}; 
  
export function NetworkChart() { 
 const dispatch = useDispatch(); 
  
 const items = useSelector(selectAll); 
 const itemCount = useSelector(selectTotal); 
  
 const theme = { user: {} }; 
 const styledItems = styleItems(items, theme); 
  
 return ( 
   <div className={styles.container}> 
     <Chart 
       items={styledItems} 
       animation={{ animate: false }} 
       options={{ backgroundColor: 'rgba(0,0,0,0)', navigation: false, overview: false }} 
     /> 
     <div className={styles.row}> 
       <button 
         className={styles.button} 
         aria-label="Add items" 
         onClick={() => dispatch(addItem({ id: itemCount + 1, type: 'user' }))} 
       > 
         Add User 
       </button> 
       <button 
         className={styles.button} 
         aria-label="Remove Items" 
         onClick={() => dispatch(removeItem(itemCount))} 
       > 
         Remove User 
       </button> 
     </div> 
   </div> 
 ); 
} 

通過使用Redux Hook的suseSelector，我們可以輕松利用切片代碼，來提供選擇器。同時，其useDispatch允許我們根據(jù)狀態(tài)的“調(diào)度(dispatch)”動作(Redux的另一個實用部分)，去變更狀態(tài)。

使用Redux管理狀態(tài)去添加和刪除節(jié)點

Redux Toolkit使用時下流行的不變性庫--Immer，對狀態(tài)進行“純凈”地更新，而無需額外編寫復雜的克隆和更新邏輯。在此，我們直接在組件中設(shè)置了圖表項的樣式。

當您從外部來源獲取數(shù)據(jù)時，應(yīng)用程序的狀態(tài)和數(shù)據(jù)庫的存儲之間，很難被清晰地界定。與Redux Toolkit同源的RTK Query則通過與諸如react-query之類的庫相配合，避免了從零開始編寫緩存等功能。

如果您的應(yīng)用單純依賴Redux，那么可以將整個應(yīng)用的狀態(tài)放在全局存儲中，以便每個組件都能訪問它。當然，實際上只有某一些可視化組件的狀態(tài)，需要通過Hooks和Redux的混合方法，實現(xiàn)存儲。

Prop Drilling

著名的軟件工程教育者--Kent C. Dodds曾提出了一個重要的觀點：應(yīng)保持狀態(tài)盡可能地靠近需要的地方。對于上述示例，這意味著如果我們希望在圖表和時間線組件之間共享數(shù)據(jù)，則可以通過Prop Drilling來簡化并實現(xiàn)。這將是一種跨組件共享狀態(tài)的有效且純凈的方式。也就是說，如果我們將狀態(tài)帶到VisualizationContainer應(yīng)用中，則可以將數(shù)據(jù)作為prop傳遞到每個組件處。當然，如果我需要在復雜的層次結(jié)構(gòu)中上下傳遞，則仍可以使用Redux。

憑借著其強大的API和一些精心設(shè)計的prop，ReGraph在控制其內(nèi)部狀態(tài)方面，非常有效。我們甚至不需要讓過多的prop流轉(zhuǎn)到圖表的組件之外。

React Hooks

就示例中的圖表組件而言，我們可以使用simpleuseState和useRefHooks，來處理狀態(tài)中的基本配置。ReGraph可以將那些對于狀態(tài)的多次更新處理，通過單獨調(diào)用useState對方式來實現(xiàn)，進而免去了prop組的頻繁更新。

JavaScript

const [layout, setLayout] = useState(defaults.layout); 
setLayout({name: 'sequential'}) 

對于使用過Redux的人來說，Hook的useReducer以及如下代碼段，一定不會陌生。

JavaScript

import React, { useState, useReducer, useCallback } from 'react'; 
  
const [combine, combineDispatch] = useReducer(combineReducer, defaults.combine) 
  const combineItems = useCallback(property => combineDispatch({ type: 'COMBINE', property }), []) 
  const uncombineItems = useCallback(property => combineDispatch({ type: 'UNCOMBINE', property }), []) 
  
  
function combineReducer(combine, action) { 
  const newCombine = { ...combine }; 
  if (action.type === 'COMBINE') { 
    newCombine.properties.push(action.property); 
    newCombine.level = combine.level + 1; 
  } 
  else if (action.type === 'UNCOMBINE') { 
    newCombine.properties.pop(); 
    newCombine.level = combine.level - 1; 
  } else { 
    throw new Error(`No action ${action.type} found`); 
  } 
  return newCombine; 
} 

值得注意的是，沒有了Redux Toolkit的幫助，我們需要人工更新已組合的對象。這就意味著，更多的代碼需要被編寫。在上述ReGraph之類的小型應(yīng)用示例中，我們手動編寫了reducer。

React的useReducer與Redux中的reducer之間存在概念上的差異。在React中，我們編寫了任意數(shù)量的reducer。它們只是各種便于更新狀態(tài)的Hooks。而在Redux中，它們作為概念性的分離，以應(yīng)對集中式的存儲。

正如下面代碼段所示，我們可以為ReGraph編寫一個定制的Hook，來封裝所有需要用到的prop：

JavaScript

import React, { useState, useReducer, useCallback } from 'react'; 
  
import { has, merge, mapValues, isEmpty } from 'lodash'; 
import { chart as defaults } from 'defaults'; 
  
const linkColor = '#fff9c4'; 
const nodeColor = '#FF6D66'; 
  
function isNode(item) { 
  return item.id1 == null && item.id2 == null; 
} 
  
function transformItems(items, itemFn) { 
  return mapValues(items, (item, id) => { 
    const newItem = itemFn(item, id); 
    return newItem ? merge({}, item, newItem) : item 
  }); 
}; 
  
function styleItems(items) { 
  return transformItems(items, item => { 
    return defaults.styles[isNode(item) ? 'node' : 'link']; 
  }); 
} 
  
  
function itemsReducer(items, action) { 
  const newItems = { ...items }; 
  if (action.type === 'SET') { 
    return { ...newItems, ...styleItems(action.newItems) } 
  } 
  else if (action.type === 'REMOVE') { 
    Object.keys(action.removeItems).forEach(removeId => { delete newItems[removeId]; }) 
    return newItems; 
  } else { 
    throw new Error(`No action ${action.type} found`); 
  } 
} 
  
function combineReducer(combine, action) { 
  const newCombine = { ...combine }; 
  if (action.type === 'COMBINE') { 
    newCombine.properties.push(action.property); 
    newCombine.level = combine.level + 1; 
  } 
  else if (action.type === 'UNCOMBINE') { 
    newCombine.properties.pop(); 
    newCombine.level = combine.level - 1; 
  } else { 
    throw new Error(`No action ${action.type} found`); 
  } 
  return newCombine; 
} 
  
function useChart({ initialItems = {} }) { 
  
  const styledItems = styleItems(initialItems) 
  
  const [items, dispatch] = useReducer(itemsReducer, styledItems) 
  const addItems = useCallback(newItems => dispatch({ type: 'SET', newItems }), []) 
  const removeItems = useCallback(removeItems => dispatch({ type: 'REMOVE', removeItems }), []) 
  
  const [combine, combineDispatch] = useReducer(combineReducer, defaults.combine) 
  const combineItems = useCallback(property => combineDispatch({ type: 'COMBINE', property }), []) 
  const uncombineItems = useCallback(property => combineDispatch({ type: 'UNCOMBINE', property }), []) 
  
  const [animation, setAnimation] = useState(defaults.animation); 
  const [view, setView] = useState(defaults.view); 
  
  const [layout, setLayout] = useState(defaults.layout); 
  const [positions, setPositions] = useState(defaults.positions); 
  const [selection, setSelection] = useState(defaults.selection); 
  const [map, setMap] = useState(defaults.map); 
  
  const [options, setOptions] = useState(defaults.options); 
  
  const chartState = { items, options, layout, positions, selection, map, animation, combine } 
  return [chartState, { addItems, removeItems, setPositions, setSelection, combineItems, uncombineItems }] 
} 
  
export { useChart, isNode } 

值得注意的是，由于ReGraph會針對每一個prop用到大量的useState調(diào)用，因此我們可以將它們放入一個簡單的對象中，并通過單個函數(shù)處理，來實現(xiàn)更新。為了簡單起見，我們可以使用lodash merge，來合并條目的更新。同時，在生產(chǎn)環(huán)境中，我們會使用Immer之類的工具，來提高更新的效率。

Context API

我們定制的useChart Hook足以滿足讓單個組件去控制圖表。但是，我們又該如何處置Sidebar呢?此時，我們就需要通過全局范圍的Redux來解決。

作為React API的一部分，由于Context可以讓各種數(shù)據(jù)在用戶定義的范圍內(nèi)，被訪問到，因此它可以協(xié)助我們實現(xiàn)在Redux中，創(chuàng)建全局存儲。

雖然，業(yè)界有對于context是否能成為Redux useContext替代品的爭論，但是有一點可以肯定：它是一種純凈的API，可以在組件之間一致性地共享context。 如下代碼段展示了如何使用Hook和Context：

JavaScript

import React, { useState, useReducer, useCallback } from 'react'; 
  
import merge from 'lodash/merge'; 
import mapValues from 'lodash/mapValues'; 
  
import { chart as defaults } from 'defaults'; 
  
const ChartContext = React.createContext(); 
  
function isNode(item) { 
 return item.id1 == null && item.id2 == null; 
} 
  
function transformItems(items, itemFn) { 
 return mapValues(items, (item, id) => { 
   const newItem = itemFn(item, id); 
   return newItem ? merge({}, item, newItem) : item; 
 }); 
} 
  
function styleItems(items) { 
 return transformItems(items, (item) => { 
   return defaults.styles[isNode(item) ? 'node' : 'link']; 
 }); 
} 
  
function itemsReducer(items, action) { 
 const newItems = { ...items }; 
 if (action.type === 'SET') { 
   return { ...newItems, ...styleItems(action.newItems) }; 
 } else if (action.type === 'REMOVE') { 
   Object.keys(action.removeItems).forEach((removeId) => { 
     delete newItems[removeId]; 
   }); 
   return newItems; 
 } else { 
   throw new Error(`No action ${action.type} found`); 
 } 
} 
  
function combineReducer(combine, action) { 
 const newCombine = { ...combine }; 
 if (action.type === 'COMBINE') { 
   newCombine.properties.push(action.property); 
   newCombine.level = combine.level + 1; 
 } else if (action.type === 'UNCOMBINE') { 
   newCombine.properties.pop(); 
   newCombine.level = combine.level - 1; 
 } else { 
   throw new Error(`No action ${action.type} found`); 
 } 
 return newCombine; 
} 
  
function ChartProvider({ children }) { 
 const [items, dispatch] = useReducer(itemsReducer, {}); 
 const addItems = useCallback((newItems) => dispatch({ type: 'SET', newItems }), []); 
 const removeItems = useCallback((removeItems) => dispatch({ type: 'REMOVE', removeItems }), []); 
  
 const [combine, combineDispatch] = useReducer(combineReducer, defaults.combine); 
 const combineItems = useCallback((property) => combineDispatch({ type: 'COMBINE', property }),[]); 
 const uncombineItems = useCallback((property) => combineDispatch({ type: 'UNCOMBINE', property }),[]); 
  
 const [animation, setAnimation] = useState(defaults.animation); 
 const [view, setView] = useState(defaults.view); 
  
 const [layout, setLayout] = useState(defaults.layout); 
 const [positions, setPositions] = useState(defaults.positions); 
 const [selection, setSelection] = useState(defaults.selection); 
 const [map, setMap] = useState(defaults.map); 
  
 const [options, setOptions] = useState(defaults.options); 
  
  
 const value = [ 
   { view, items, options, layout, positions, selection, map, animation, combine }, 
   { addItems, removeItems, setOptions, setMap, setView, setLayout, setAnimation, setPositions, setSelection, combineItems, uncombineItems }, 
 ]; 
  
 return <ChartContext.Provider value={value}>{children}</ChartContext.Provider>; 
} 
  
function useChart() { 
 const context = React.useContext(ChartContext); 
 if (context === undefined) { 
   throw new Error('useChart must be used within a ChartProvider'); 
 } 
 return context; 
} 
  
export { ChartProvider, useChart }; 

下面，我使用定制的ChartProvider上下文，來包裝那些需要訪問圖表的詳細信息，以及設(shè)置器的任何組件：

HTML

<App> 
    <ChartProvider> 
        <VisualizationContainer> 
            <Chart/> 
            <Timeline/> 
        </VisualizationContainer> 
        <Sidebar/> 
    </ChartProvider> 
</App> 

接著，我們需要通過如下簡單的調(diào)用，導入useChart，并獲取當前圖表的狀態(tài)，以及應(yīng)用層次結(jié)構(gòu)中任意位置的調(diào)度函數(shù)。

const  [state, { setLayout }] = useChart(); 

Context與Redux

可見，使用Context和Redux存儲之間的關(guān)鍵區(qū)別在于，Context必須由您來定義范圍，而不會自動地為應(yīng)用程序的其余部分提供服務(wù)。這會迫使我們更加有意識地去規(guī)劃應(yīng)用程序的邏輯。正如useReducer那樣，我們通常的做法是：創(chuàng)建許多不同的上下文，以供應(yīng)用程序去使用。

小結(jié)

綜上所述，我們先介紹了如何使用Redux Toolkit的綜合狀態(tài)管理策略，去實現(xiàn)全局存儲;然后探究了一個簡單的應(yīng)用程序，如何通過使用核心的React Hooks，去實現(xiàn)狀態(tài)管理的各個細節(jié);最后得出兩者可以混合使用，相互補足的使用建議。

原文標題：React Hooks vs. Redux: Choosing the Right State Management Strategy ，作者：Christian Miles

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】