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

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

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

容器和表示組件

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

的原則

• 容器組件： 處理業(yè)務(wù)邏輯、狀態(tài)管理和數(shù)據(jù)獲取。他們專注于事物如何運(yùn)作。
• 演示組件： 處理數(shù)據(jù)和 UI 的顯示。他們關(guān)注事物的外觀。

這種劃分使您的代碼庫更易于維護(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)。

示例：獲取和顯示用戶數(shù)據(jù)

以下是容器和演示組件模式的實(shí)現(xià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;

在此示例中：

• UserContainer 獲取用戶數(shù)據(jù)并將其與加載狀態(tài)一起作為 props 傳遞給 UserList。
• UserList 僅專注于渲染用戶數(shù)據(jù)。

這種模式提高了清晰度，減少了代碼重復(fù)，并簡(jiǎn)化了測(cè)試。對(duì)于數(shù)據(jù)獲取和 UI 渲染頻繁且復(fù)雜的應(yīng)用程序尤其有用。

用于組合的自定義掛鉤

自定義 Hooks 使您能夠封裝可重用的邏輯，使您的 React 代碼更干凈、更模塊化。您可以將其提取到掛鉤中并在需要的地方使用它，而不是在多個(gè)組件之間重復(fù)邏輯。這提高了代碼的可重用性和可測(cè)試性，同時(shí)遵守DRY（不要重復(fù)自己）原則。

示例：獲取數(shù)據(jù)掛鉤

自定義掛鉤

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;

在此示例中，useFetchData 鉤子封裝了數(shù)據(jù)獲取邏輯，允許任何組件以最少的樣板獲取數(shù)據(jù)。自定義掛鉤對(duì)于簡(jiǎn)化代碼和確保干凈的架構(gòu)非常有價(jià)值。

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

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

減速機(jī)的好處

1. 可預(yù)測(cè)性：狀態(tài)變化是通過操作明確定義的。
2. 可擴(kuò)展性：適合具有多個(gè)依賴項(xiàng)的復(fù)雜狀態(tài)管理。
3. 可維護(hù)性：集中邏輯簡(jiǎn)化了調(diào)試和測(cè)試。

示例：管理身份驗(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;

在此示例中：

• authReducer 定義狀態(tài)如何根據(jù)操作發(fā)生變化。
• AuthComponent 使用 useReducer 來管理身份驗(yàn)證狀態(tài)。

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

上下文 API 的提供者模式

Provider 模式 利用 React 的 Context API 在組件之間共享狀態(tài)或函數(shù)，而無需進(jìn)行 prop 鉆取。它將組件包裝在上下文提供程序中，允許深度嵌套的組件訪問共享數(shù)據(jù)。

好處

1. 避免 Prop 鉆取： 簡(jiǎn)化通過深層嵌套組件傳遞數(shù)據(jù)。
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;

高階組件 (HOC)

高階組件 (HOC) 是采用組件并返回具有附加功能的新組件的函數(shù)。它們?cè)试S您在多個(gè)組件之間重用邏輯，而無需修改其結(jié)構(gòu)。

好處

1. 代碼可重用性：跨組件共享身份驗(yàn)證或主題等邏輯。
2. 封裝：將增強(qiáng)邏輯與原始組件分開。

示例：身份驗(yàn)證 HOC

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ù)合成分

復(fù)合組件模式允許您構(gòu)建具有多個(gè)協(xié)同工作的子組件的父組件。此模式非常適合創(chuàng)建靈活且可重用的 UI 組件。

好處

1. 可定制性：子組件可以以不同的方式組合。
2. 清晰度：清楚地定義父組件和子組件之間的關(guān)系。

示例：選項(xiàng)卡組件

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;

1. useMemo: 記住計(jì)算結(jié)果，僅在依賴項(xiàng)發(fā)生變化時(shí)重新計(jì)算。

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;

1. useCallback: 記憶函數(shù)，在將回調(diào)傳遞給子組件時(shí)很有用。

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;
  }
}

記憶化提高了涉及大型數(shù)據(jù)集或復(fù)雜 UI 更新的場(chǎng)景中的性能，確保 React 應(yīng)用程序保持響應(yīng)能力。

結(jié)論

掌握React 設(shè)計(jì)模式是構(gòu)建可擴(kuò)展、可維護(hù)且高效的應(yīng)用程序的關(guān)鍵。通過應(yīng)用 容器和演示組件、自定義 Hooks 和 Memoization 等模式，您可以簡(jiǎn)化開發(fā)、提高代碼可重用性并增強(qiáng)性能。 高階組件、復(fù)合組件和提供者模式等高級(jí)模式進(jìn)一步簡(jiǎn)化了復(fù)雜的狀態(tài)管理和組件交互。

這些模式不僅僅是理論上的，它們解決了 React 開發(fā)中的現(xiàn)實(shí)挑戰(zhàn)，幫助您編寫干凈且模塊化的代碼。開始將這些模式合并到您的項(xiàng)目中，以創(chuàng)建健壯、易于擴(kuò)展且可長(zhǎng)期維護(hù)的應(yīng)用程序。借助工具包中的 React 設(shè)計(jì)模式，您將能夠更好地處理任何項(xiàng)目，無論多么復(fù)雜。
如需更多見解，請(qǐng)查看 Patterns.dev 上的 React 設(shè)計(jì)模式文檔。

以上是React 設(shè)計(jì)模式：可擴(kuò)展應(yīng)用程序的最佳實(shí)踐的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！