iT邦幫忙

2023 iThome 鐵人賽

0
Modern Web

React Native的學習與實作系列 第 8

【Day8】React Native的狀態管理(1)

  • 分享至 

  • xImage
  •  

React Native中的狀態管理是開發中不可或缺的一部分。React的Context API提供了一種方便的方式來管理應用程式的狀態。以下是一個簡單的例子,演示了如何使用Context API進行狀態管理:

首先,在你的應用程序中創建一個新的Context:

import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export const useAppContext = () => {
  return useContext(AppContext);
};

export const AppProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <AppContext.Provider value={{ count, increment, decrement }}>
      {children}
    </AppContext.Provider>
  );
};

然後,在你的應用程式的最上層物件中使用<AppProvider>

import React from 'react';
import { AppProvider } from './AppContext';
import CounterComponent from './CounterComponent';

const App = () => {
  return (
    <AppProvider>
      <CounterComponent />
    </AppProvider>
  );
};

export default App;

最後,在子物件中使用useAppContext hook 來獲取和更新狀態:

import React from 'react';
import { useAppContext } from './AppContext';

const CounterComponent = () => {
  const { count, increment, decrement } = useAppContext();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

這樣,你就使用React的Context API實現了簡單的狀態管理。


上一篇
【Day7】React Native 元件與佈局(3)
下一篇
【Day9】React Native的狀態管理(2)
系列文
React Native的學習與實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言