React 設(shè)計模式簡介

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

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

容器和表示元件

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

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

這種劃分使您的程式碼庫更易於維護，因為邏輯或 UI 的變更可以獨立處理而不會相互影響。

此模式的好處

1. 程式碼可重複使用性： 演示元件可以在應(yīng)用程式的不同部分重複使用。
2. 提高了可測試性：測試邏輯變得更容易，因為它被隔離在容器組件中。
3. 簡化維護：可以獨立處理邏輯或 UI 的更改，從而降低破壞程式碼其他部分的風險。

範例：取得和顯示用戶數(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;

在此範例中：

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

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

用於組合的自訂掛鉤

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

範例：取得資料掛鉤

自訂掛鉤

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 鉤子封裝了資料擷取邏輯，允許任何元件以最少的樣板取得資料。自訂掛鉤對於簡化程式碼和確保乾淨的架構(gòu)非常有價值。

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

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

減速機的好處

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

範例：管理身份驗證狀態(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ù)操作而變化。
• AuthComponent 使用 useReducer 來管理身分驗證狀態(tài)。

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

上下文 API 的提供者模式

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

好處

1. 避免 Prop 鑽?。?/strong> 簡化透過深層巢狀元件傳遞資料。
2. 集中狀態(tài)管理：輕鬆管理主題或驗證等全域狀態(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;
  }
}