在 React Native 中創(chuàng)建復(fù)雜的應(yīng)用程序時(shí)，使用內(nèi)置功能管理狀態(tài)和處理多個(gè)用戶和屏幕將很困難。然而，React Native 中的狀態(tài)管理通過確保所有組件之間的流暢流和數(shù)據(jù)共享來幫助開發(fā)健壯和強(qiáng)大的應(yīng)用程序。作為企業(yè)主或企業(yè)家，您應(yīng)該知道 React Native 狀態(tài)管理如何使開發(fā)人員可以輕松地為您的企業(yè)構(gòu)建企業(yè)應(yīng)用程序。在這篇博文中，我們將探索更多關(guān)于狀態(tài)管理、它在 React Native 中的使用、各種庫、示例等。

React Native 狀態(tài)管理：概述

當(dāng)您在應(yīng)用程序開發(fā)過程中使用基于不同來源但共享相同狀態(tài)的多個(gè)組件時(shí)，很難將 props 傳遞給每個(gè)組件。這就是狀態(tài)管理的用武之地，它提供了一種跨應(yīng)用程序組件共享和管理此數(shù)據(jù)的有效方式。

狀態(tài)是一個(gè)奇特的術(shù)語，用于描述匯總數(shù)據(jù)，您可以在其中存儲(chǔ)資產(chǎn)并根據(jù)需要更改它們。管理 React Native 應(yīng)用程序狀態(tài)對于學(xué)習(xí) React Native 的新手來說是一個(gè)有問題的概念。但是廣泛的狀態(tài)管理工具使前端開發(fā)人員可以輕松地簡化整個(gè)系統(tǒng)的通信和數(shù)據(jù)共享。通過與應(yīng)用程序交互來改變狀態(tài)可以完全改變 UI 體驗(yàn)。

在開發(fā)企業(yè)級(jí)移動(dòng)或 Web 應(yīng)用程序時(shí)，React Native 中的狀態(tài)管理可能更受歡迎。在尋求連貫的用戶體驗(yàn)而不冒因無效通信而丟失數(shù)據(jù)的風(fēng)險(xiǎn)時(shí)，這是一個(gè)需要考慮的關(guān)鍵方面。npm 注冊表上提供了大量React Native 狀態(tài)管理庫，包括 redux、recoil、hooks 等。每一個(gè)都是為了達(dá)到其目的而設(shè)計(jì)的，并且有自己的優(yōu)點(diǎn)可以忍受。因此，選擇最佳狀態(tài)管理庫取決于您的項(xiàng)目要求和要實(shí)現(xiàn)的目標(biāo)。

React Native 中的狀態(tài)管理有何好處？

作為構(gòu)建復(fù)雜應(yīng)用程序的挑戰(zhàn)性方面之一，狀態(tài)管理是指定義應(yīng)用程序的整體行為和功能的數(shù)據(jù)。使用 React Native 構(gòu)建的移動(dòng)或 Web 應(yīng)用程序具有用于管理狀態(tài)的內(nèi)置機(jī)制，允許組件存儲(chǔ)數(shù)據(jù)并在內(nèi)部更新狀態(tài)。內(nèi)置狀態(tài)管理適用于功能很少的簡單應(yīng)用程序。然而，隨著應(yīng)用程序復(fù)雜性的增加，管理組件之間共享的狀態(tài)變得困難。

通過使用各種狀態(tài)管理工具，開發(fā)具有多個(gè)屏幕和用戶的復(fù)雜應(yīng)用程序變得可行。為 React Native 選擇最好的狀態(tài)管理不僅有助于簡化流程并防止由于分散的流程而導(dǎo)致的不一致，而且還改善了應(yīng)用程序的整體用戶體驗(yàn)。現(xiàn)在，讓我們探討一下您應(yīng)該使用 React Native 狀態(tài)管理的其他一些原因。

避免重復(fù)數(shù)據(jù)共享

狀態(tài)管理工具允許您重用現(xiàn)有功能，從而輕松跨應(yīng)用程序共享數(shù)據(jù)。開發(fā)人員無需使用復(fù)雜的 prop drilling 即可檢索應(yīng)用程序組件的狀態(tài)，在這種情況下，相同的數(shù)據(jù)會(huì)通過互連的組件發(fā)送到其他組件。當(dāng)你想與多個(gè)嵌套組件共享數(shù)據(jù)時(shí)，props 鉆取是相當(dāng)重要的。但它會(huì)導(dǎo)致代碼和數(shù)據(jù)結(jié)構(gòu)更加復(fù)雜。

維護(hù)單一數(shù)據(jù)源

在應(yīng)用程序開發(fā)編碼期間將有幾個(gè)實(shí)例，程序員將不得不訪問位于許多地方的變量數(shù)據(jù)。但是，使用狀態(tài)管理工具將允許他們從單個(gè)數(shù)據(jù)源獲取數(shù)據(jù)。不必從多個(gè)來源訪問數(shù)據(jù)來獲取應(yīng)用程序的狀態(tài)，這確實(shí)很耗時(shí)。

跨多個(gè)組件的可擴(kuò)展數(shù)據(jù)

在為大型企業(yè)開發(fā)React Native Web 應(yīng)用程序時(shí)，開發(fā)人員必須將可擴(kuò)展性視為一個(gè)關(guān)鍵因素。關(guān)于構(gòu)建可擴(kuò)展的應(yīng)用程序，狀態(tài)管理工具和庫有助于避免長期的錯(cuò)誤和錯(cuò)誤。它將提高代碼的質(zhì)量，并使其在應(yīng)用程序開發(fā)過程中易于管理。

React Native 狀態(tài)管理庫

當(dāng)您處理可擴(kuò)展和復(fù)雜的應(yīng)用程序時(shí)，React Native 中的狀態(tài)管理庫可以派上用場。管理狀態(tài)將需要高級(jí)庫，以便在不傳遞 props 的情況下在組件之間進(jìn)行順暢高效的數(shù)據(jù)共享和通信。狀態(tài)管理庫對于具有復(fù)雜工作流的應(yīng)用程序非常有用，您需要訪問代碼的不同部分來執(zhí)行或開發(fā)單個(gè)功能。

盡管有無數(shù)的 React Native 狀態(tài)管理庫可用，但一些最流行的庫如下：

上下文API

Context API 允許開發(fā)人員通過組件樹共享數(shù)據(jù)，而無需使用入門級(jí)的手動(dòng)道具鉆取。通過使用上下文 API，開發(fā)人員可以獲得更清晰的代碼以及在應(yīng)用程序內(nèi)部輕松共享狀態(tài)。它專門設(shè)計(jì)用于通過 React 組件樹共享全局?jǐn)?shù)據(jù)，例如當(dāng)前經(jīng)過身份驗(yàn)證的用戶、主題或首選語言。當(dāng)從多個(gè)嵌套級(jí)別的各種組件訪問數(shù)據(jù)時(shí)，上下文 API 是有利的。

為什么要使用：

• 有效地產(chǎn)生全局變量

• 無需道具鉆孔即可管理狀態(tài)

• 一種更簡單、更輕便的方法

• 從父母到深層嵌套的孩子輕松共享數(shù)據(jù)

• 企業(yè)應(yīng)用的狀態(tài)管理

準(zhǔn)備好讓您的 React Native 應(yīng)用程序的狀態(tài)管理更上一層樓了嗎？
立即聘請 React Native 開發(fā)人員，體驗(yàn)更快、更高效、更具可擴(kuò)展性的狀態(tài)管理解決方案！

十分簡單

顧名思義，這個(gè) React Native 狀態(tài)管理工具讓管理狀態(tài)變得簡單易行。使用 Easy-Peasy，您可以獲得最少編碼和樣板的好處，與其他第三方庫相比，提供簡單且完美的狀態(tài)管理。作為多種狀態(tài)管理方法的組合，Easy-Peasy 還為基于 React Hooks 和 Redux 中間件的 API 提供了廣泛的支持。這個(gè)狀態(tài)管理庫利用 Redux 在內(nèi)部管理狀態(tài)，允許開發(fā)人員增強(qiáng)應(yīng)用程序商店。

為什么要使用：

• 移除 Redux 抽象

• 簡化狀態(tài)管理流程

• 提供直觀的 API 來快速管理狀態(tài)

• 提供對基于 React Hooks 和 Redux 中間件的 API 的支持

• 簡單易懂的編碼

移動(dòng)端

Mobx的簡單和最小的樣板代碼使 React Native 中的狀態(tài)管理變得容易。無需更改代碼，因?yàn)樗愃朴?JavaScript。此外，您不必像使用 Redux 那樣使用新架構(gòu)。它專門設(shè)計(jì)用于通過其各種組件簡化整個(gè)應(yīng)用程序的狀態(tài)管理。使用 Mobx 的另一個(gè)優(yōu)勢是它的可變性特性，當(dāng)您不希望有任何副作用時(shí)，它可以靜默地更新狀態(tài)。

為什么要使用：

• 幫助對象發(fā)出觀察者做出反應(yīng)的新變化

• 輕松且可擴(kuò)展的狀態(tài)管理

• 透明地應(yīng)用功能反應(yīng)式編程 (TFRP)

• 一個(gè)久經(jīng)考驗(yàn)的庫，可以自由擴(kuò)展

• 簡化代碼的編寫、測試和調(diào)試

畏縮

Recoil 在開發(fā)人員中廣為人知，因?yàn)樗菬o樣板的 API。由于其簡單的界面，類似于 React 本地狀態(tài)，在應(yīng)用程序開發(fā)過程中可以很容易地管理和共享狀態(tài)。與 Redux 和 Context API 相比，開發(fā)人員可以在 Recoil 中方便地丟棄無用的重新渲染。當(dāng)使用 Recoil 進(jìn)行狀態(tài)管理時(shí)，任何 React 組件都可以訪問存儲(chǔ)狀態(tài)的原子。在解決應(yīng)用程序性能問題時(shí)，您可以體驗(yàn)到一種統(tǒng)一的方式來共享狀態(tài)。

為什么要使用：

• 簡單兼容的狀態(tài)管理方法

• 專為 React 組件開發(fā)

• 超級(jí)容易與 React Native 集成

• 開發(fā)小型應(yīng)用程序時(shí)的不錯(cuò)選擇

• 允許使用選擇器和可調(diào)度操作初始化存儲(chǔ)

React Native 狀態(tài)管理示例

當(dāng)您尋找最好的 React Native 狀態(tài)管理工具時(shí)，了解每個(gè)工具的行為和功能至關(guān)重要。由于 React Native 有利于構(gòu)建跨平臺(tái)應(yīng)用程序開發(fā)，因此開發(fā)人員必須確保有效地管理狀態(tài)。為了幫助您更好地理解，這里有幾個(gè)示例，說明您可以如何在 React Native 中使用不同的庫或工具進(jìn)行狀態(tài)管理。

本地狀態(tài)管理

從“反應(yīng)”中導(dǎo)入反應(yīng)，{useState}；import { View, Text, Button } from 'react-native';常量計(jì)數(shù)器 = () => {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    設(shè)置計(jì)數(shù)（計(jì)數(shù) + 1）；
  };
  返回 （
    < 查看 >
      <文本>計(jì)數(shù)：{count}
      < Button title="Increment" onPress= {incrementCount} / >
    
  );};導(dǎo)出默認(rèn)計(jì)數(shù)器；

在 React Native 中使用本地狀態(tài)管理時(shí)，需要使用使用狀態(tài)()鉤子，用于管理功能組件中的狀態(tài)。

我們用過const [count, setCounter] = useState(0);在上面的例子中。這里，使用狀態(tài)()將一對值返回到當(dāng)前狀態(tài)和一個(gè)更新當(dāng)前狀態(tài)的函數(shù)。

你應(yīng)該明白數(shù)數(shù)是當(dāng)前狀態(tài)變量并且設(shè)置計(jì)數(shù)是一個(gè)用于更新計(jì)數(shù)值的函數(shù)。因此，當(dāng)用戶單擊增量按鈕時(shí)，腳本將調(diào)用增量計(jì)數(shù)功能，導(dǎo)致遞增數(shù)數(shù)狀態(tài)為 1。最終，更新后的數(shù)數(shù)狀態(tài)值將呈現(xiàn)在屏幕上。

上下文API

import React, { createContext, useContext, useState } from 'react';import { View, Text, Button } from 'react-native';const CountContext = createContext();const CounterProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  const incrementCount = () => {
    設(shè)置計(jì)數(shù)（計(jì)數(shù) + 1）；
  };
  返回 （
    < CountContext.Provider value= {{ count, incrementCount }} >
      {孩子們}
    
  );};常量計(jì)數(shù)器 = () => {
  const { count, incrementCount } = useContext(CountContext);
  返回 （
    < 查看 >
      <Text>計(jì)數(shù)：{count}</Text>
      < Button title="Increment" onPress={incrementCount} / >
     
  );};導(dǎo)出 { CounterProvider, Counter };

盡管 Context API 不是一個(gè)獨(dú)立的庫，但根據(jù)功能要求，它是一個(gè)可行的選擇。將數(shù)據(jù)或值保存在狀態(tài)和增量計(jì)數(shù)功能，你可以使用創(chuàng)建上下文和使用上下文鉤子來創(chuàng)建一個(gè)計(jì)數(shù)上下文目的。然后，你將不得不包裹柜臺(tái)組件使用柜臺(tái)供應(yīng)商并將其與計(jì)數(shù)上下文目的。為了訪問數(shù)數(shù)狀態(tài)和增量計(jì)數(shù)功能，柜臺(tái)組件使用使用上下文鉤。訪問的狀態(tài)值將呈現(xiàn)在屏幕上。

終極版

從“反應(yīng)”導(dǎo)入反應(yīng)；import { View, Text, Button } from 'react-native';從'redux'導(dǎo)入{createStore}；import { Provider, useSelector, useDispatch } from 'react-redux';const 初始狀態(tài) = {
  計(jì)數(shù)：0，};const incrementCount = () => {
  返回 {
    類型：'INCREMENT_COUNT'，
  };};const reducer = (state = initialState, action) => {
  開關(guān)（動(dòng)作類型）{
    案例“INCREMENT_COUNT”：
      返回 {
        ...狀態(tài)，
        計(jì)數(shù)：state.count + 1，
      };
    默認(rèn)：
      返回狀態(tài)；
  }};const store = createStore(reducer);常量計(jì)數(shù)器 = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  返回 （
    < 查看 >
      <文本>計(jì)數(shù)：{count}</文本>
      < Button title="Increment" onPress={() => dispatch(incrementCount())} / >
    
  );};const App = () => {
  返回 （
    
  );};導(dǎo)出默認(rèn)應(yīng)用程序；

您可以使用的另一個(gè)狀態(tài)管理庫是 Redux。您將必須定義初始狀態(tài)對象、reducer 函數(shù)和存儲(chǔ)對象。定義 reducer 函數(shù)將根據(jù)調(diào)度的動(dòng)作更新狀態(tài)，store 對象將保存狀態(tài)和 reducer。

此后，您可以使用使用選擇器勾選數(shù)數(shù)從商店?duì)顟B(tài)和使用調(diào)度掛鉤派遣增量計(jì)數(shù)用戶點(diǎn)擊時(shí)的動(dòng)作增量按鈕。與 Context API 類似，您必須將柜臺(tái)組件使用供應(yīng)商組件并將其與 Redux 集成店鋪目的。

借助我們的狀態(tài)管理專業(yè)知識(shí)，釋放您的 React Native 應(yīng)用程序的全部潛力。
我們經(jīng)驗(yàn)豐富的開發(fā)人員團(tuán)隊(duì)將在每一步與您合作，以創(chuàng)建高質(zhì)量、用戶友好且可擴(kuò)展的應(yīng)用程序。立即聯(lián)系我們，開始構(gòu)建您夢想中的應(yīng)用程序！我們是實(shí)現(xiàn)您的業(yè)務(wù)目標(biāo)的理想React Native 應(yīng)用程序開發(fā)公司。

移動(dòng)端

從“反應(yīng)”導(dǎo)入反應(yīng)；import { View, Text, Button } from 'react-native';從 'mobx' 導(dǎo)入 { observable, action };從'mobx-react'導(dǎo)入{觀察者}；類 CounterStore {
  @observable 計(jì)數(shù) = 0;
  @action incrementCount() {
    這個(gè)。計(jì)數(shù)++；
  }}const counterStore = new CounterStore();const Counter = observer(() => {
  返回 （
    < 查看 >
      計(jì)數(shù)：{counterStore.count}</Text>
      < 按鈕
        title="增量"
        onPress={() => counterStore.incrementCount()}
      / >
    
  );});導(dǎo)出默認(rèn)計(jì)數(shù)器；

使用 Mobx 進(jìn)行狀態(tài)管理，需要?jiǎng)?chuàng)建一個(gè)專賣店具有可觀察計(jì)數(shù)屬性和增量計(jì)數(shù)行動(dòng)以更新數(shù)數(shù)財(cái)產(chǎn)。此外，您還必須創(chuàng)建一個(gè)專賣店對象使用專賣店班級(jí)。然后，你需要包裝柜臺(tái)使用來自的觀察者函數(shù)的組件mobx-反應(yīng)圖書館。這柜臺(tái)組件應(yīng)該對專賣店目的。因此，每當(dāng)用戶按下增量按鈕，腳本將調(diào)用增量計(jì)數(shù)行動(dòng)，更新數(shù)數(shù)財(cái)產(chǎn)。最后，柜臺(tái)組件使用更新后的內(nèi)容重新渲染數(shù)數(shù)價(jià)值。

結(jié)論

（言鼎科技）