6月安卓手機(jī)性能榜：vivo/iQOO霸占旗艦排行榜前三
2023年上半年已經(jīng)正式過(guò)去了，我們也迎來(lái)了安兔兔V10版本，在新的驍龍8Gen3和天璣9300發(fā)布之前，性能榜的榜單大體會(huì)以驍龍8Gen2和天璣9200+為主，至于那顆3.36GHz的驍龍8Gen2領(lǐng)先
今天，我們將深入挖掘Redux的靈魂所在——其核心原則。通過(guò)理解單一事實(shí)來(lái)源（Single Source of Truth）、狀態(tài)的只讀性（Read-only State）以及如何通過(guò)純函數(shù)（Pure Functions）來(lái)執(zhí)行狀態(tài)變化，我們不僅能夠更好地把握Redux的設(shè)計(jì)哲學(xué)，還能在實(shí)際開發(fā)中更加得心應(yīng)手地應(yīng)用它。這些原則不僅為Redux的強(qiáng)大功能奠定了基礎(chǔ)，也為我們提供了清晰、可靠的狀態(tài)管理方案。
在深入Redux之前，有幾項(xiàng)技術(shù)是必須要了解的：
除了上述技術(shù)，對(duì)JavaScript生態(tài)系統(tǒng)的廣泛理解，包括使用npm或Yarn這樣的包管理器、使用Webpack進(jìn)行打包、Babel進(jìn)行代碼轉(zhuǎn)譯以確保跨環(huán)境兼容性、使用ESLint進(jìn)行代碼檢查，都是搭建Redux應(yīng)用的重要組成部分。
Redux的核心之一是將整個(gè)應(yīng)用的狀態(tài)集中存儲(chǔ)在一個(gè)被稱為“Redux store”的單一對(duì)象中。這個(gè)原則有幾個(gè)關(guān)鍵的好處：
Redux Actions:
在一個(gè)計(jì)數(shù)器應(yīng)用中，我們通常會(huì)有增加（INCREMENT）和減少（DECREMENT）兩種操作。在Redux中，這兩種操作會(huì)被定義為動(dòng)作（Actions）：
// 定義增加和減少的動(dòng)作類型export const INCREMENT = 'INCREMENT';export const DECREMENT = 'DECREMENT';這些動(dòng)作類型代表了觸發(fā)狀態(tài)變化的事件。在Redux中，改變狀態(tài)的唯一方式是通過(guò)分發(fā)（dispatch）一個(gè)動(dòng)作。這樣做的好處是讓所有狀態(tài)的改變都可預(yù)測(cè)且可追蹤。在計(jì)數(shù)器應(yīng)用的例子中，無(wú)論是增加還是減少計(jì)數(shù)，都會(huì)通過(guò)分發(fā)對(duì)應(yīng)的動(dòng)作來(lái)實(shí)現(xiàn)，這些動(dòng)作最終會(huì)被送到reducer函數(shù)，根據(jù)動(dòng)作的類型來(lái)更新?tīng)顟B(tài)。
Reducer：精確控制狀態(tài)變化
在Redux架構(gòu)中，Reducer扮演著至關(guān)重要的角色。它負(fù)責(zé)定義應(yīng)用狀態(tài)如何響應(yīng)不同的動(dòng)作（Actions）并返回新的狀態(tài)。這個(gè)過(guò)程不僅保證了狀態(tài)的不可變性，而且也確保了應(yīng)用狀態(tài)變化的可預(yù)測(cè)性。通過(guò)深入理解和合理利用Reducer，我們可以更加精確地控制應(yīng)用的狀態(tài)變化，從而打造出既穩(wěn)定又高效的應(yīng)用。
以計(jì)數(shù)器應(yīng)用為例，counterReducer函數(shù)展示了一個(gè)Reducer的基本結(jié)構(gòu)：
export const counterReducer = (state = { value: 0 }, action) => { switch (action.type) { case INCREMENT: return { value: state.value + 1 }; case DECREMENT: return { value: state.value - 1 }; default: return state; }};在這個(gè)例子中，Reducer接受當(dāng)前的狀態(tài)和一個(gè)動(dòng)作作為參數(shù)。根據(jù)動(dòng)作的類型，Reducer決定如何更新?tīng)顟B(tài)，并返回一個(gè)新的狀態(tài)對(duì)象。這里有幾點(diǎn)值得注意：
Redux Store：應(yīng)用狀態(tài)的核心
在Redux架構(gòu)中，Store是連接應(yīng)用與狀態(tài)管理的關(guān)鍵。它不僅保存了應(yīng)用的狀態(tài)，還提供了一系列的方法來(lái)讓你能夠進(jìn)行狀態(tài)的讀取、更新和監(jiān)聽(tīng)。通過(guò)合理配置Store，我們能夠使應(yīng)用的數(shù)據(jù)流管理變得既清晰又高效。現(xiàn)在，我們就來(lái)詳細(xì)了解一下如何創(chuàng)建和配置Redux Store，以及它在應(yīng)用中的作用。
創(chuàng)建Redux Store的過(guò)程非常直接。首先，你需要從Redux庫(kù)中引入createStore函數(shù)，然后使用這個(gè)函數(shù)來(lái)創(chuàng)建Store。這個(gè)過(guò)程需要一個(gè)Reducer作為參數(shù)，Reducer定義了狀態(tài)如何響應(yīng)不同的動(dòng)作并返回新的狀態(tài)。以我們之前提到的計(jì)數(shù)器應(yīng)用為例，Store的配置過(guò)程如下：
// 引入Redux庫(kù)中的createStore函數(shù)import { createStore } from 'redux';// 引入之前定義的counterReducerimport { counterReducer } from './ReduxReducer';// 使用counterReducer創(chuàng)建Redux storeconst store = createStore(counterReducer);// 導(dǎo)出store對(duì)象export default store;在這個(gè)例子中，我們使用counterReducer來(lái)初始化Store，這意味著應(yīng)用的狀態(tài)將根據(jù)counterReducer定義的規(guī)則來(lái)變化。
創(chuàng)建了Store之后，它將成為應(yīng)用狀態(tài)管理的中心。Store提供了幾個(gè)關(guān)鍵的方法，讓我們能夠與應(yīng)用狀態(tài)進(jìn)行交互：
通過(guò)這些方法，Redux Store成為了一個(gè)強(qiáng)大的工具，使得狀態(tài)管理變得既可控又靈活。無(wú)論是讀取當(dāng)前狀態(tài)、更新?tīng)顟B(tài)，還是監(jiān)聽(tīng)狀態(tài)的變化，Store都提供了簡(jiǎn)單而有效的接口。
在使用Redux進(jìn)行狀態(tài)管理的React應(yīng)用中，將React組件與Redux的Store連接起來(lái)是一個(gè)至關(guān)重要的步驟。這不僅讓我們的組件能夠訪問(wèn)應(yīng)用狀態(tài)，還允許我們通過(guò)分發(fā)動(dòng)作來(lái)更新這些狀態(tài)。接下來(lái)，我們通過(guò)一個(gè)計(jì)數(shù)器應(yīng)用的例子，來(lái)深入了解如何實(shí)現(xiàn)React組件與Redux的連接。
首先，我們定義了一個(gè)React組件CounterApp，它負(fù)責(zé)渲染計(jì)數(shù)器的UI界面：
import React from 'react';import { connect } from 'react-redux';import { INCREMENT, DECREMENT } from './ReduxActions';class CounterApp extends React.Component { render() { return ( <div> <p>Counter Value: {this.props.value}</p> <button onClick={() => this.props.increment()}>Increment</button> <button onClick={() => this.props.decrement()}>Decrement</button> </div> ); }}在這個(gè)組件中，我們通過(guò)this.props.value來(lái)顯示計(jì)數(shù)器的當(dāng)前值，同時(shí)定義了兩個(gè)按鈕，用于觸發(fā)增加（Increment）和減少（Decrement）操作。
為了將CounterApp組件連接到Redux的Store，我們使用了react-redux庫(kù)中的connect函數(shù)。這個(gè)函數(shù)允許我們將Redux的狀態(tài)（state）映射到組件的屬性（props）上，以及將分發(fā)動(dòng)作（dispatch actions）的函數(shù)映射到組件的屬性上：
// 將Redux狀態(tài)映射到組件的props上const mapStateToProps = state => ({ value: state.value});// 將分發(fā)動(dòng)作的函數(shù)映射到組件的props上const mapDispatchToProps = dispatch => ({ increment: () => dispatch({ type: INCREMENT }), decrement: () => dispatch({ type: DECREMENT })});// 連接組件export const ConnectedCounterApp = connect(mapStateToProps, mapDispatchToProps)(CounterApp);通過(guò)mapStateToProps函數(shù)，我們將Redux的狀態(tài)中的value映射到了組件的value屬性上。通過(guò)mapDispatchToProps函數(shù)，我們創(chuàng)建了兩個(gè)函數(shù)increment和decrement，當(dāng)調(diào)用這些函數(shù)時(shí)，會(huì)分別分發(fā)INCREMENT和DECREMENT類型的動(dòng)作。
接下來(lái)，我們將深入總結(jié)下如何通過(guò)Redux Store、Redux Actions以及React組件之間的互動(dòng)，來(lái)體現(xiàn)這一原則。
在Redux架構(gòu)中，所有的應(yīng)用狀態(tài)都被存儲(chǔ)在一個(gè)稱為Store的對(duì)象中。這個(gè)Store通過(guò)counterReducer來(lái)管理計(jì)數(shù)器的狀態(tài)，其中的value屬性表示當(dāng)前的計(jì)數(shù)值。這種集中式的狀態(tài)管理方式不僅簡(jiǎn)化了狀態(tài)的訪問(wèn)和更新，還使得應(yīng)用狀態(tài)的變化變得可預(yù)測(cè)和可追蹤。
Redux Actions：狀態(tài)變化的唯一途徑
在Redux中，狀態(tài)的任何變化都必須通過(guò)分發(fā)（dispatch）動(dòng)作（Action）來(lái)實(shí)現(xiàn)。在我們的計(jì)數(shù)器應(yīng)用例子中，INCREMENT和DECREMENT動(dòng)作被用來(lái)分別增加和減少計(jì)數(shù)值。這些動(dòng)作是改變狀態(tài)的唯一途徑，確保了狀態(tài)變化的一致性和可控性。
React組件：連接數(shù)據(jù)與界面
通過(guò)react-redux庫(kù)提供的connect函數(shù)，React組件可以直接連接到Redux的Store。組件的屬性（props）通過(guò)mapStateToProps和mapDispatchToProps函數(shù)分別映射到Store的狀態(tài)和分發(fā)動(dòng)作的函數(shù)。這樣，組件不僅可以直接訪問(wèn)到應(yīng)用的狀態(tài)（即單一數(shù)據(jù)源），還可以通過(guò)分發(fā)動(dòng)作來(lái)更新這些狀態(tài)。這種設(shè)計(jì)保證了組件的數(shù)據(jù)和行為都嚴(yán)格依賴于Redux Store，強(qiáng)化了單一數(shù)據(jù)源的概念。
在Redux架構(gòu)中，狀態(tài)的不變性（即只讀狀態(tài)）是其核心原則之一。這個(gè)原則確保了一旦狀態(tài)被定義，它就不能被直接改變。任何對(duì)狀態(tài)的修改都必須通過(guò)分發(fā)動(dòng)作（dispatching actions）來(lái)進(jìn)行，而這些動(dòng)作將被Reducer處理，從而產(chǎn)生一個(gè)全新的狀態(tài)。這種方法不僅使?fàn)顟B(tài)變化變得可預(yù)測(cè)，而且極大地簡(jiǎn)化了調(diào)試過(guò)程，使得開發(fā)者更容易理解應(yīng)用狀態(tài)隨時(shí)間的演變，以及動(dòng)作如何影響應(yīng)用的數(shù)據(jù)流。
讓我們通過(guò)一個(gè)待辦事項(xiàng)（To-do List）應(yīng)用的例子來(lái)更深入地理解這一原則。在這個(gè)應(yīng)用中，應(yīng)用的狀態(tài)用來(lái)表示任務(wù)列表，遵循著只讀原則。
首先，定義一個(gè)動(dòng)作類型ADD_TASK，用于添加新的任務(wù)：
// 定義添加任務(wù)的動(dòng)作類型export const ADD_TASK = 'ADD_TASK';接著，通過(guò)Reducer來(lái)管理任務(wù)的狀態(tài)：
// 管理待辦事項(xiàng)的Reducerexport const tasksReducer = (state = { tasks: [] }, action) => { switch (action.type) { case ADD_TASK: // 通過(guò)展開原有任務(wù)列表并添加新任務(wù)來(lái)返回一個(gè)新?tīng)顟B(tài) return { tasks: [...state.tasks, action.payload] }; default: // 如果不匹配任何動(dòng)作類型，返回當(dāng)前狀態(tài) return state; }};在這個(gè)例子中，tasksReducer接收當(dāng)前狀態(tài)和一個(gè)動(dòng)作作為參數(shù)。基于動(dòng)作類型ADD_TASK，它通過(guò)將新任務(wù)添加到當(dāng)前任務(wù)列表的副本中來(lái)返回一個(gè)新的狀態(tài)，從而遵守了狀態(tài)的不變性原則。這意味著原始的任務(wù)列表狀態(tài)保持不變，確保了狀態(tài)的可預(yù)測(cè)性和可追蹤性。
首先，我們通過(guò)Redux的createStore函數(shù)創(chuàng)建了一個(gè)Store，該Store使用了tasksReducer來(lái)管理待辦事項(xiàng)的狀態(tài)：
import { createStore } from 'redux';import { tasksReducer } from './ReduxReducer';const store = createStore(tasksReducer);export default store;這個(gè)Store將作為應(yīng)用的單一真理源，負(fù)責(zé)存儲(chǔ)和管理待辦事項(xiàng)列表的狀態(tài)。
接著，我們定義了一個(gè)React組件TodoApp，用于展示待辦事項(xiàng)列表并提供添加新任務(wù)的功能：
import React from 'react';import { connect } from 'react-redux';import { ADD_TASK } from './ReduxActions';class TodoApp extends React.Component { constructor() { super(); this.state = { newTask: '' }; } handleInputChange = (event) => { this.setState({ newTask: event.target.value }); }; handleAddTask = () => { const newTask = this.state.newTask; this.props.addTask(newTask); this.setState({ newTask: '' }); }; render() { return ( <div> <h1>Tasks</h1> <ul> {this.props.tasks.map((task, index) => ( <li key={index}>{task}</li> ))} </ul> <input type="text" value={this.state.newTask} onChange={this.handleInputChange} /> <button onClick={this.handleAddTask}>Add Task</button> </div> ); }}在這個(gè)組件中，我們通過(guò)輸入框接收新任務(wù)，并在點(diǎn)擊按鈕時(shí)通過(guò)addTask方法分發(fā)ADD_TASK類型的動(dòng)作來(lái)更新Redux Store中的狀態(tài)。
最后，我們通過(guò)connect函數(shù)將TodoApp組件連接到Redux Store。mapStateToProps函數(shù)將Redux Store中的狀態(tài)映射到組件的props，使得組件能夠訪問(wèn)待辦事項(xiàng)列表；mapDispatchToProps函數(shù)則將分發(fā)動(dòng)作的方法映射到組件的props：
const mapStateToProps = state => ({ tasks: state.tasks});const mapDispatchToProps = dispatch => ({ addTask: newTask => dispatch({ type: ADD_TASK, payload: newTask })});export const ConnectedTodoApp = connect(mapStateToProps, mapDispatchToProps)(TodoApp);通過(guò)這種方式，TodoApp組件既可以訪問(wèn)Redux Store中的狀態(tài)，也可以通過(guò)分發(fā)動(dòng)作來(lái)更新?tīng)顟B(tài)，實(shí)現(xiàn)了React組件與Redux狀態(tài)管理的無(wú)縫連接。
代碼案例通過(guò)以下方式遵循"狀態(tài)只讀"原則：
Redux Reducer：
tasksReducer定義了狀態(tài)如何響應(yīng)動(dòng)作而被修改。它通過(guò)返回一個(gè)新的狀態(tài)對(duì)象而不是直接修改現(xiàn)有狀態(tài)對(duì)象來(lái)遵循只讀原則。
Redux Store和Dispatch：
Redux Store是用tasksReducer創(chuàng)建的。當(dāng)需要添加一個(gè)新任務(wù)時(shí)，會(huì)分發(fā)一個(gè)攜帶負(fù)載（新任務(wù)）的ADD_TASK動(dòng)作。這個(gè)動(dòng)作被reducer處理后，會(huì)創(chuàng)建一個(gè)新的狀態(tài)。
渲染：
任務(wù)列表基于從Redux Store獲取的當(dāng)前狀態(tài)在組件中顯示。只讀的本質(zhì)確保了UI反映了最新的狀態(tài)，而無(wú)需直接操作。
Redux依賴于稱為reducer的純函數(shù)來(lái)指定應(yīng)用狀態(tài)如何響應(yīng)動(dòng)作。純函數(shù)是指給定相同輸入時(shí)，總是返回可預(yù)測(cè)的輸出而不會(huì)引起任何副作用的函數(shù)。純函數(shù)確保狀態(tài)變化是一致且可復(fù)現(xiàn)的，并且不會(huì)產(chǎn)生副作用，如修改外部變量或與DOM交互。
讓我們考慮一個(gè)簡(jiǎn)單的計(jì)數(shù)器應(yīng)用，來(lái)舉例說(shuō)明使用純函數(shù)（reducer）管理Redux中的狀態(tài)變化。
// Redux動(dòng)作const INCREMENT = 'INCREMENT';const DECREMENT = 'DECREMENT';// Redux Reducerconst cReducer = (state = { count_num: 0 }, action) => { switch (action.type) { case INCREMENT: return { count_num: state.count_num + 1 }; case DECREMENT: return { count_num: state.count_num - 1 }; default: return state; }};// Redux Storeconst { createStore } = Redux;const store = createStore(cReducer);// 訂閱Redux Store變化store.subscribe(() => { console.log('Current Count:', store.getState().count_num);});// 分發(fā)動(dòng)作store.dispatch({ type: INCREMENT });store.dispatch({ type: INCREMENT });store.dispatch({ type: DECREMENT });counterReducer是一個(gè)純函數(shù)，它接受當(dāng)前狀態(tài)和一個(gè)動(dòng)作作為參數(shù)。根據(jù)動(dòng)作類型，它返回一個(gè)新?tīng)顟B(tài)。在這個(gè)例子中，對(duì)于INCREMENT，它將計(jì)數(shù)增加1；對(duì)于DECREMENT，它將計(jì)數(shù)減少1。Redux store被創(chuàng)建，然后使用store.subscribe()方法來(lái)訂閱Redux store中的變化。每當(dāng)分發(fā)一個(gè)動(dòng)作并修改狀態(tài)時(shí)，subscribe中的回調(diào)函數(shù)就會(huì)執(zhí)行。在這個(gè)例子中，它將當(dāng)前計(jì)數(shù)記錄到控制臺(tái)。使用store.dispatch()方法將動(dòng)作分發(fā)到Redux store。每分發(fā)一個(gè)動(dòng)作，cReducer就根據(jù)當(dāng)前狀態(tài)和動(dòng)作類型計(jì)算新?tīng)顟B(tài)。store訂閱確保在每個(gè)動(dòng)作之后，更新的計(jì)數(shù)被記錄到控制臺(tái)，提供對(duì)狀態(tài)變化的可見(jiàn)性。
代碼通過(guò)以下方式遵循通過(guò)純函數(shù)完成修改的原則：
Redux Reducer：
counterReducer是一個(gè)純函數(shù)，它接受當(dāng)前狀態(tài)和一個(gè)動(dòng)作作為參數(shù)，并返回一個(gè)新?tīng)顟B(tài)而不改變?cè)紶顟B(tài)。它遵循不變性原則，確保可預(yù)測(cè)性和可追蹤性。
Redux Store和Dispatch：
Redux store使用cReducer創(chuàng)建。動(dòng)作（INCREMENT和DECREMENT）被分發(fā)到store，觸發(fā)reducer基于分發(fā)的動(dòng)作創(chuàng)建一個(gè)新?tīng)顟B(tài)。
訂閱Store變化：
使用store.subscribe()方法來(lái)監(jiān)聽(tīng)Redux store中的變化。每次動(dòng)作分發(fā)后，新的計(jì)數(shù)被記錄到控制臺(tái)，展示了更新的狀態(tài)而沒(méi)有直接修改。
純函數(shù)的可預(yù)測(cè)性簡(jiǎn)化了測(cè)試和調(diào)試。開發(fā)者可以獨(dú)立地隔離并測(cè)試reducer，確保狀態(tài)變化正如所期望的，為更加穩(wěn)健和可預(yù)測(cè)的代碼庫(kù)做出貢獻(xiàn)。
輸出：
執(zhí)行提供的代碼將在控制臺(tái)中產(chǎn)生以下輸出：
Current Count: 1Current Count: 2Current Count: 1輸出顯示了使用Redux中的純函數(shù)（reducer）對(duì)計(jì)數(shù)狀態(tài)進(jìn)行順序修改的結(jié)果。每個(gè)動(dòng)作分發(fā)觸發(fā)reducer創(chuàng)建基于之前狀態(tài)和動(dòng)作類型的新?tīng)顟B(tài)，而不改變?cè)紶顟B(tài)。
Redux是JavaScript中廣泛使用的狀態(tài)管理庫(kù)，通常與React結(jié)合使用，以在應(yīng)用程序中有效地處理狀態(tài)。熟悉Node.js、React、React-Redux以及Webpack和Babel等工具對(duì)于在應(yīng)用程序中使用Redux至關(guān)重要。
Redux的三個(gè)關(guān)鍵原則包括確保中心化且可訪問(wèn)的存儲(chǔ)、執(zhí)行不可變性以實(shí)現(xiàn)可預(yù)測(cè)性、以及利用純函數(shù)（reducers）來(lái)實(shí)現(xiàn)狀態(tài)之間的轉(zhuǎn)換的概念。
單一真理源原則促進(jìn)了中心存儲(chǔ)或Redux store中的統(tǒng)一狀態(tài)，簡(jiǎn)化了Redux驅(qū)動(dòng)應(yīng)用程序中的調(diào)試和測(cè)試過(guò)程。
Redux中的不可變性確保應(yīng)用程序的狀態(tài)不能被直接修改。這一概念對(duì)于可預(yù)測(cè)性、調(diào)試和維護(hù)一致的狀態(tài)轉(zhuǎn)換至關(guān)重要。
狀態(tài)只讀原則通過(guò)防止直接修改狀態(tài)來(lái)執(zhí)行不可變性和防止副作用，這在復(fù)雜應(yīng)用中增強(qiáng)了可預(yù)測(cè)性和可追蹤性。
Redux中的純函數(shù)或reducer在確保可預(yù)測(cè)的狀態(tài)變化中起著重要作用。這些函數(shù)是確定性的，對(duì)于相同的輸入總是產(chǎn)生相同的輸出，并且它們沒(méi)有副作用。
通過(guò)純函數(shù)完成修改原則涉及使用reducer從舊狀態(tài)創(chuàng)建新?tīng)顟B(tài)，確保Redux應(yīng)用程序中一致且可預(yù)測(cè)的狀態(tài)轉(zhuǎn)換。
隨著我們對(duì)Redux核心原則的深入探討，相信你對(duì)如何在應(yīng)用中有效管理狀態(tài)有了更加深刻的認(rèn)識(shí)。但理論總是服務(wù)于實(shí)踐的，接下來(lái)我們將進(jìn)一步探索如何將Redux與React結(jié)合使用，通過(guò)一個(gè)實(shí)際的案例，讓這些原則和概念在真實(shí)世界中生根發(fā)芽。
本文鏈接：http://m.www897cc.com/showinfo-26-85547-0.htmlReact狀態(tài)管理專題：深入探討下Redux的三大原則
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 五大系統(tǒng)設(shè)計(jì)中的取舍
下一篇： 玉伯、狼叔來(lái)了...這場(chǎng)大前端大會(huì)絕對(duì)不容錯(cuò)過(guò)
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)