React應用狀態同步工作流探討

在React應用中，狀態同步是一個重要的工作流，確保用戶界面（UI）與應用狀態保持一致。以下是一些常見的狀態同步工作流和最佳實踐：

1. 組件狀態（Component State）

React組件可以通過useState和useReducer來管理本地狀態。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2. 上下文（Context）

對于跨組件的狀態共享，可以使用React的Context API。

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

const ThemeContext = createContext();

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      Current theme is {theme}
    </button>
  );
}

3. Redux

對于大型應用，Redux是一個流行的狀態管理庫。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

4. MobX

MobX是另一個流行的狀態管理庫，使用觀察者模式來自動同步狀態。

import React from 'react';
import { observable, action, makeObservable } from 'mobx';
import { observer } from 'mobx-react';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action
    });
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const Counter = observer(() => {
  const store = new CounterStore();

  return (
    <div>
      <p>You clicked {store.count} times</p>
      <button onClick={() => store.increment()}>Increment</button>
      <button onClick={() => store.decrement()}>Decrement</button>
    </div>
  );
});

5. 狀態提升（Lifting State Up）

對于多個組件共享相同狀態的情況，可以將狀態提升到它們的最近共同祖先組件中。

import React, { useState } from 'react';

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child count={count} setCount={setCount} />
    </div>
  );
}

function Child(props) {
  return (
    <div>
      <p>You clicked {props.count} times</p>
      <button onClick={() => props.setCount(props.count + 1)}>
        Click me
      </button>
    </div>
  );
}

6. 使用Hooks進行狀態管理

React Hooks如useContext, useReducer, 和 useState可以幫助你在函數組件中管理狀態。

import React, { useState, useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      Current theme is {theme}
    </button>
  );
}

總結

選擇合適的狀態同步工作流取決于應用的大小和復雜性。對于小型應用，組件狀態和上下文可能就足夠了。對于大型應用，Redux或MobX可能是更好的選擇。狀態提升也是一種有效的策略，特別是在處理多個組件共享相同狀態的情況。