首頁 web前端 js教程 redux必須搭配react嗎

redux必須搭配react嗎

Dec 22, 2020 am 09:24 AM
react redux

redux不是必須搭配react的,除了支援React外還支援其他的UI框架;而且redux並不是適合所有專案所有應用的;在react中,能不用redux就不用redux。

redux必須搭配react嗎

推薦:《react影片教學

redux是個JavaScript狀態容器,主要提供狀態管理。可以運行於服務端,客戶端,原生應用程式。除了支援React外還支援其他的UI框架,體積小,只有2kb。當要與React一起使用的時候,可以使用react-redux插件來進一步提升我們的開發體驗。

在開始今天的主題之前,有幾個點我需要強調一下

react的state和redux的state根本是完全不沾邊的兩個東西,切記不要混為一談。 react的state是存在於類別元件中的一個存放自身變數的屬性,redux的state整個應用程式的store中的某一個namespace下的狀態。二者沒有任何關係。

redux是一個獨立於react的,你可以選擇使用或選擇不適用,如果您不是使用的基於redux的腳手架,那麼想使用redux您是需要單獨引用的。 react包中並沒有redux。

假如您的應用程式中要使用redux,您是需要將react和redux關聯起來的,這裡有一個套件叫做react-redux,是用來關聯react和redux的,其中有一個高階函數叫connect,它接受兩個方法,mapStateToProps和mapDispatchToProps就是這兩個方法將redux的state注入到了react的props中。

上面是帶大家回顧redux的一些基本知識點,接下來我們進入主題。

redux的使用場景

如果您的React應用程式中狀態十分多,難以維護的時候,這個時候redux是個不錯的選擇。 (這裡所說的狀態就是react的state)

如果您需要資料共享,也就是多個react元件需要用同一個資料來源。

如果您需要一些全域性的狀態控制,例如應用程式中的目前登入人,我們說不定會在哪個元件中使用登入人資訊,如果我們將它註冊到全域redux中,那麼我們就無需關係哪個元件要用了,我們用的時候直接從全域redux中取就行

某元件的業務邏輯過於複雜,在react元件中處理這些資料太過繁瑣,我們可以考慮將部分邏輯拆分到redux中。

使用redux可以將資料和UI分離開,如果您為了實現這樣的效果,您可以嘗試使用redux.

我們為什麼要減少redux的使用

看過阮一峰大哥部落格的同學一定看過這幾句話

如果你不知道是否需要Redux,那就是不需要它。

只有遇到 React 實在解決不了的問題,你才需要 Redux 。

所以redux並不是適合所有專案所有應用的。

使用redux需要創建很多模板程式碼,會讓state的更新變得十分複雜,這一點誰用誰知道,哈哈。

使用過多的redux會讓應用程式失去彈性

Redux 帶來了函數式程式設計、不可變性想法等等,為了配合這些概念,開發者必須要寫很多「模式程式碼(boilerplate)”,繁瑣以及重複是開發者不願意容忍的。當然也有很多hack 旨在減少boilerplate,但目前階段,可以說Redux 天生就附著繁瑣;

  • 使用Redux,那麼你的應用就要用objects 或arrays 描述狀態;OMG !

  • 使用 Redux,那麼你的應用程式就要使用 plain objects 即 actions ,來描述變化;OMG!

  • 使用 Redux,那麼你的應用程式就要使用純函數去處理變化;OMG!

應用程式中,很多狀態都要抽像到 store,那麼何時使用 local states 何時會接取 Redux store?不能痛痛快快地寫業務,一個變化就要對應編寫action(action creator),reducer 等等;

和響應式結合函數式的Mobx 相比,程式設計體驗「打折扣」

#以上是引用了網友的一段話,可見redux的過度使用時存在很多弊端的,我這裡就不一一羅列他的弊端了。有興趣的同學可以去自己搜一下,總是,我認為能不用redux就不用redux

讀到這裡,我想解決了一些讀者心中的疑問「我們什麼時候用react的state什麼時候用redux的state?」答案就很明確了。

redux畢竟是一個比較成功的框架,其中的資料流也是很經典,解決了不少難題,任何東西都有利弊,我們只要做好權衡,相信我們可以寫出更加優秀的應用。

以上是redux必須搭配react嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何利用React和WebSocket建立即時聊天應用 如何利用React和WebSocket建立即時聊天應用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket建立即時聊天應用程式引言:隨著網路的快速發展,即時通訊越來越受到人們的關注。即時聊天應用程式已成為現代社交和工作生活中不可或缺的一部分。本文將介紹如何利用React和WebSocket建立一個簡單的即時聊天應用,並提供具體的程式碼範例。一、技術準備在開始建立即時聊天應用之前,我們需要準備以下技術和工具:React:一個用於構建

React前後端分離指南:如何實作前後端的解耦與獨立部署 React前後端分離指南:如何實作前後端的解耦與獨立部署 Sep 28, 2023 am 10:48 AM

React前後端分離指南:如何實現前後端的解耦和獨立部署,需要具體程式碼範例在當今的Web開發環境中,前後端分離已經成為一種趨勢。透過將前端和後端程式碼分開,可以讓開發工作更加靈活、高效,並且方便進行團隊協作。本文將介紹如何使用React實現前後端分離,從而實現解耦和獨立部署的目標。首先,我們要先理解什麼是前後端分離。傳統的Web開發模式中,前端和後端是耦合在

如何利用React和Flask建構簡單易用的網路應用 如何利用React和Flask建構簡單易用的網路應用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask建構簡單易用的網路應用引言:隨著網路的發展,網路應用的需求也越來越多樣化和複雜化。為了滿足使用者對於易用性和效能的要求,使用現代化的技術堆疊來建立網路應用變得越來越重要。 React和Flask是兩個在前端和後端開發中非常受歡迎的框架,它們可以很好的結合在一起,用來建立簡單易用的網路應用。本文將詳細介紹如何利用React和Flask

React響應式設計指南:如何實現自適應的前端佈局效果 React響應式設計指南:如何實現自適應的前端佈局效果 Sep 26, 2023 am 11:34 AM

React響應式設計指南:如何實現自適應的前端佈局效果隨著行動裝置的普及和使用者對多螢幕體驗的需求增加,響應式設計成為了現代前端開發的重要考量之一。而React作為目前最受歡迎的前端框架之一,提供了豐富的工具和元件,能夠幫助開發人員實現自適應的佈局效果。本文將分享一些關於使用React實現響應式設計的指南和技巧,並提供具體的程式碼範例供參考。使用React的Fle

如何利用React和RabbitMQ建立可靠的訊息應用 如何利用React和RabbitMQ建立可靠的訊息應用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ建立可靠的訊息傳遞應用程式引言:現代化的應用程式需要支援可靠的訊息傳遞,以實現即時更新和資料同步等功能。 React是一種流行的JavaScript庫,用於建立使用者介面,而RabbitMQ是一種可靠的訊息傳遞中間件。本文將介紹如何結合React和RabbitMQ建立可靠的訊息傳遞應用,並提供具體的程式碼範例。 RabbitMQ概述:

React程式碼偵錯指南:如何快速定位與解決前端bug React程式碼偵錯指南:如何快速定位與解決前端bug Sep 26, 2023 pm 02:25 PM

React程式碼偵錯指南:如何快速定位並解決前端bug引言:在開發React應用程式時,經常會遇到各種各樣的bug,這些bug可能會使應用程式崩潰或導致不正確的行為。因此,掌握調試技巧是每個React開發者必備的能力。本文將介紹一些定位和解決前端bug的實用技巧,並提供具體的程式碼範例,幫助讀者快速定位和解決React應用程式中的bug。一、調試工具的選擇:在Re

React Router使用指南:如何實現前端路由控制 React Router使用指南:如何實現前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何實現前端路由控制隨著單頁應用的流行,前端路由成為了一個不可忽視的重要部分。 ReactRouter作為React生態系統中最受歡迎的路由庫,提供了豐富的功能和易用的API,使得前端路由的實作變得非常簡單和靈活。本文將介紹ReactRouter的使用方法,並提供一些具體的程式碼範例。安裝ReactRouter首先,我們需要

如何利用React和Google BigQuery建立快速的資料分析應用 如何利用React和Google BigQuery建立快速的資料分析應用 Sep 26, 2023 pm 06:12 PM

如何利用React和GoogleBigQuery建立快速的資料分析應用引言:在當今資訊爆炸的時代,資料分析已經成為了各產業中不可或缺的環節。而其中,建構快速、有效率的資料分析應用則成為了許多企業和個人追求的目標。本文將介紹如何利用React和GoogleBigQuery結合來建立快速的資料分析應用,並提供詳細的程式碼範例。一、概述React是用來構建

See all articles