狀態管理

暖暖De幸福發表於2024-11-08

在元件間共享狀態

有時候你希望兩個元件的狀態始終同步更改。要實現這一點，可以將相關狀態從這兩個元件上移除，並把這些狀態移到最近的父級元件，然後透過 props 將狀態傳遞給這兩個元件。這被稱為“狀態提升”，這是編寫 React 程式碼時常做的事。

對 state 進行保留和重置

當你重新渲染一個元件時， React 需要決定元件樹中的哪些部分要保留和更新，以及丟棄或重新建立。

如彈出表單填寫之後關閉，再次開啟，會有上一次的值。

遷移狀態邏輯至 Reducer 中

對於那些需要更新多個狀態的元件來說，過於分散的事件處理程式可能會令人不知所措。對於這種情況，你可以在元件外部將所有狀態更新邏輯合併到一個稱為 “reducer” 的函式中。這樣，事件處理程式就會變得簡潔，因為它們只需要指定使用者的 “actions”。在檔案的底部，reducer 函式指定狀態應該如何更新以響應每個 action！

使用 Context 深層傳遞引數

通常，你會透過 props 將資訊從父元件傳遞給子元件。但是，如果要在元件樹中深入傳遞一些 prop，或者樹裡的許多元件需要使用相同的 prop，那麼傳遞 prop 可能會變得很麻煩。Context 允許父元件將一些資訊提供給它下層的任何元件，不管該元件多深層也無需透過 props 逐層透傳。

  • LevelContext.js
import { createContext } from 'react';

export const LevelContext = createContext(0);
  • Heading.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Heading({ children }) {
  const level = useContext(LevelContext);
  switch (level) {
    case 0:
      throw Error('標題必須在 Section 內！');
    case 1:
      return <h1>{children}</h1>;
    case 2:
      return <h2>{children}</h2>;
    case 3:
      return <h3>{children}</h3>;
    case 4:
      return <h4>{children}</h4>;
    case 5:
      return <h5>{children}</h5>;
    case 6:
      return <h6>{children}</h6>;
    default:
      throw Error('未知級別：' + level);
  }
}
  • Section.js
import { useContext } from 'react';
import { LevelContext } from './LevelContext.js';

export default function Section({ children }) {
  const level = useContext(LevelContext);
  return (
    <section className="section">
      <LevelContext.Provider value={level + 1}>
        {children}
      </LevelContext.Provider>
    </section>
  );
}
  • App.js
import Heading from './Heading.js';
import Section from './Section.js';

export default function Page() {
  return (
    <Section>
      <Heading>大標題</Heading>
      <Section>
        <Heading>一級標題</Heading>
        <Heading>一級標題</Heading>
        <Heading>一級標題</Heading>
        <Section>
          <Heading>二級標題</Heading>
          <Heading>二級標題</Heading>
          <Heading>二級標題</Heading>
          <Section>
            <Heading>三級標題</Heading>
            <Heading>三級標題</Heading>
            <Heading>三級標題</Heading>
          </Section>
        </Section>
      </Section>
    </Section>
  );
}

使用 Reducer 和 Context 擴充你的應用

Reducer 幫助你合併元件的狀態更新邏輯。Context 幫助你將資訊深入傳遞給其他元件。你可以將 reducers 和 context 組合在一起使用，以管理複雜應用的狀態。

相關文章