[[426178]]

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

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

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

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

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

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

如上圖所示，我們?cè)诖怂裱脑瓌t為：

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

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

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

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

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

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

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

Redux狀態(tài)管理

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

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

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

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

讓我們來(lái)考慮一個(gè)標(biāo)準(zhǔn)化的圖形可視化用例：在圖表中添加和刪除節(jié)點(diǎn)。為了在全局存儲(chǔ)中創(chuàng)建一個(gè)狀態(tài)“切片”，我們?cè)趕tore.js中創(chuàng)建了如下代碼：

JavaScript

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

為了讓?xiě)?yīng)用程序中的其他組件能夠訪問(wèn)該存儲(chǔ)，我們可以對(duì)應(yīng)用程序進(jìn)行如下“包裝”：

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段意味著，其任何下游都可以訪問(wèn)該存儲(chǔ)。在itemsSlice.js中，我們?yōu)楦鱾€(gè)條目定義了狀態(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; 

通過(guò)上述代碼段，我們可以獲悉：

• ReGraph的條目是各種通過(guò)ID索引的節(jié)點(diǎn)和鏈接對(duì)象。其核心數(shù)據(jù)結(jié)構(gòu)十分常見(jiàn)。Redux Toolkit會(huì)通過(guò)一些輔助函數(shù)，來(lái)處理此類(lèi)格式數(shù)據(jù)。在此，我們用到了由createEntityAdapter提供的addMany、addOne、removeMany、以及removeOne等功能。
• 在Redux中，Selector允許我們從存儲(chǔ)中獲取一個(gè)狀態(tài)片。我可以利用getSelectors適配器，來(lái)避免自行編寫(xiě)狀態(tài)查詢(xún)代碼。
• 最后，我們導(dǎo)出所有內(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> 
 ); 
} 

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

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

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

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

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

Prop Drilling

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

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

React Hooks

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

JavaScript

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

對(duì)于使用過(guò)Redux的人來(lái)說(shuō)，Hook的useReducer以及如下代碼段，一定不會(huì)陌生。

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; 
} 

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

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

正如下面代碼段所示，我們可以為ReGraph編寫(xiě)一個(gè)定制的Hook，來(lái)封裝所有需要用到的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會(huì)針對(duì)每一個(gè)prop用到大量的useState調(diào)用，因此我們可以將它們放入一個(gè)簡(jiǎn)單的對(duì)象中，并通過(guò)單個(gè)函數(shù)處理，來(lái)實(shí)現(xiàn)更新。為了簡(jiǎn)單起見(jiàn)，我們可以使用lodash merge，來(lái)合并條目的更新。同時(shí)，在生產(chǎn)環(huán)境中，我們會(huì)使用Immer之類(lèi)的工具，來(lái)提高更新的效率。

Context API

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

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

雖然，業(yè)界有對(duì)于context是否能成為Redux useContext替代品的爭(zhēng)論，但是有一點(diǎn)可以肯定：它是一種純凈的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上下文，來(lái)包裝那些需要訪問(wèn)圖表的詳細(xì)信息，以及設(shè)置器的任何組件：

HTML

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

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

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

Context與Redux

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

小結(jié)

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

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

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