React 設(shè)計(jì)模式簡(jiǎn)介

隨著 React 應(yīng)用程式的規(guī)模和複雜性不斷增長(zhǎng)，維護(hù)乾淨(jìng)、高效和可擴(kuò)展的程式碼成為一項(xiàng)挑戰(zhàn)。 React 設(shè)計(jì)模式為常見(jiàn)開(kāi)發(fā)問(wèn)題提供了經(jīng)過(guò)驗(yàn)證的解決方案，使開(kāi)發(fā)人員能夠建立更易於管理和擴(kuò)展的應(yīng)用程式。這些模式促進(jìn)了模組化、程式碼重用和對(duì)最佳實(shí)踐的遵守，使它們成為任何 React 開(kāi)發(fā)人員的必備工具。

在本指南中，我們將透過(guò)實(shí)用的方式探索關(guān)鍵的React 設(shè)計(jì)模式，例如容器和表示組件、自訂掛鉤和記憶化模式舉例來(lái)證明它們的好處。無(wú)論您是初學(xué)者還是經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員，本文都將幫助您了解如何使用這些模式來(lái)改進(jìn)您的工作流程並創(chuàng)建更好的 React 應(yīng)用程式。

容器和表示元件

容器和表示元件模式是React中廣泛使用的設(shè)計(jì)方法，它將應(yīng)用程式邏輯與UI渲染分開(kāi)。這種分離有助於創(chuàng)建模組化、可重複使用和可測(cè)試的組件，符合關(guān)注點(diǎn)分離。

• 容器元件： 處理業(yè)務(wù)邏輯、狀態(tài)管理和資料取得。他們專注於事物如何運(yùn)作。
• 示範(fàn)元件： 處理資料和 UI 的顯示。他們關(guān)注事物的外觀。

這種劃分使您的程式碼庫(kù)更易於維護(hù)，因?yàn)檫壿嫽?UI 的變更可以獨(dú)立處理而不會(huì)相互影響。

此模式的好處

1. 程式碼可重複使用性： 演示元件可以在應(yīng)用程式的不同部分重複使用。
2. 提高了可測(cè)試性：測(cè)試邏輯變得更容易，因?yàn)樗桓綦x在容器組件中。
3. 簡(jiǎn)化維護(hù)：可以獨(dú)立處理邏輯或 UI 的更改，從而降低破壞程式碼其他部分的風(fēng)險(xiǎn)。

範(fàn)例：取得和顯示用戶數(shù)據(jù)

以下是容器和示範(fàn)組件模式的實(shí)作方式：

容器組件

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

示範(fàn)組件

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

在此範(fàn)例中：

• UserContainer 取得使用者資料並將其與載入狀態(tài)一起作為 props 傳遞給 UserList。
• UserList 僅專注於渲染使用者資料。

這種模式提高了清晰度，減少了程式碼重複，並簡(jiǎn)化了測(cè)試。對(duì)於資料擷取和 UI 渲染頻繁且複雜的應(yīng)用程式尤其有用。

用於組合的自訂掛鉤

自訂 Hooks 讓您能夠封裝可重複使用的邏輯，讓您的 React 程式碼更乾淨(jìng)、更模組化。您可以將其提取到掛鉤中並在需要的地方使用它，而不是在多個(gè)元件之間重複邏輯。這提高了程式碼的可重複使用性和可測(cè)試性，同時(shí)遵守DRY（不要重複自己）原則。

範(fàn)例：取得資料掛鉤

自訂掛鉤

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

使用掛鉤

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

在此範(fàn)例中，useFetchData 鉤子封裝了資料擷取邏輯，允許任何元件以最少的樣板取得資料。自訂掛鉤對(duì)於簡(jiǎn)化程式碼和確保乾淨(jìng)的架構(gòu)非常有價(jià)值。

使用Reducer進(jìn)行狀態(tài)管理

管理複雜或分組狀態(tài)時(shí)，Reducer 模式提供了一種結(jié)構(gòu)化的方法來(lái)處理狀態(tài)轉(zhuǎn)換。它將狀態(tài)邏輯集中到單一函數(shù)中，使?fàn)顟B(tài)更新可預(yù)測(cè)且更易於調(diào)試。 React 的 useReducer 鉤子非常適合實(shí)現(xiàn)這種模式。

減速機(jī)的好處

1. 可預(yù)測(cè)性：狀態(tài)變化是透過(guò)操作明確定義的。
2. 可擴(kuò)充性：適合具有多個(gè)相依性的複雜狀態(tài)管理。
3. 可維護(hù)性：集中邏輯簡(jiǎn)化了除錯(cuò)和測(cè)試。

範(fàn)例：管理身份驗(yàn)證狀態(tài)

減速函數(shù)

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

使用 useReducer 的組件

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

在此範(fàn)例中：

• authReducer 定義狀態(tài)如何根據(jù)操作而變化。
• AuthComponent 使用 useReducer 來(lái)管理身分驗(yàn)證狀態(tài)。

Reducer 對(duì)於處理可擴(kuò)展應(yīng)用程式中複雜的狀態(tài)邏輯特別有效，可提高狀態(tài)管理的清晰度和一致性。

上下文 API 的提供者模式

Provider 模式 利用 React 的 Context API 在元件之間共用狀態(tài)或函數(shù)，而無(wú)需進(jìn)行 prop 鑽孔。它將組件包裝在上下文提供者中，允許深度嵌套的組件存取共享資料。

好處

1. 避免 Prop 鑽?。?/strong> 簡(jiǎn)化透過(guò)深層巢狀元件傳遞資料。
2. 集中狀態(tài)管理：輕鬆管理主題或驗(yàn)證等全域狀態(tài)。

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}

import React, { useState, useEffect } from "react";
import UserList from "./UserList";

const UserContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((data) => {
        setUsers(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  return <UserList users={users} loading={loading} />;
};

export default UserContainer;

import React from "react";

const UserList = ({ users, loading }) => {
  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetchData;

import React from "react";
import useFetchData from "./useFetchData";

const Posts = () => {
  const { data: posts, loading } = useFetchData("/api/posts");

  if (loading) return <p>Loading...</p>;
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default Posts;

const initialState = { isAuthenticated: false, user: null };

function authReducer(state, action) {
  switch (action.type) {
    case "LOGIN":
      return { ...state, isAuthenticated: true, user: action.payload };
    case "LOGOUT":
      return initialState;
    default:
      return state;
  }
}