react 设计模式简介
随着 react 应用程序的规模和复杂性不断增长，维护干净、高效和可扩展的代码成为一项挑战。 react 设计模式为常见开发问题提供了经过验证的解决方案，使开发人员能够构建更易于管理和扩展的应用程序。这些模式促进了模块化、代码重用和对最佳实践的遵守，使它们成为任何 react 开发人员的必备工具。
在本指南中，我们将通过实用的方式探索关键的 react 设计模式，例如 容器和表示组件、自定义挂钩和记忆化模式举例说明它们的好处。无论您是初学者还是经验丰富的开发人员，本文都将帮助您了解如何使用这些模式来改进您的工作流程并创建更好的 react 应用程序。
容器和表示组件
容器和表示组件模式是react中广泛使用的设计方法，它将应用程序逻辑与ui渲染分开。这种分离有助于创建模块化、可重用和可测试的组件，符合关注点分离。
的原则- 容器组件： 处理业务逻辑、状态管理和数据获取。他们专注于事物如何运作。
- 演示组件： 处理数据和 ui 的显示。他们关注事物的外观。
这种划分使您的代码库更易于维护，因为逻辑或 ui 的更改可以独立处理而不会相互影响。
该模式的好处
- 代码可重用性： 演示组件可以在应用程序的不同部分重用。
- 提高了可测试性：测试逻辑变得更容易，因为它被隔离在容器组件中。
- 简化维护：可以独立处理逻辑或 ui 的更改，从而降低破坏代码其他部分的风险。
示例：获取和显示用户数据
以下是容器和演示组件模式的实现方式：
容器组件
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
演示组件
import react from "react";
const userlist = ({ users, loading }) => {
if (loading) return loading...
;
return (
-
{users.map((user) => (
- {user.name} ))}
在此示例中：
- usercontainer 获取用户数据并将其与加载状态一起作为 props 传递给 userlist。
- userlist 仅专注于渲染用户数据。
这种模式提高了清晰度，减少了代码重复，并简化了测试。对于数据获取和 ui 渲染频繁且复杂的应用程序尤其有用。
用于组合的自定义挂钩
自定义 hooks 使您能够封装可重用的逻辑，使您的 react 代码更干净、更模块化。您可以将其提取到挂钩中并在需要的地方使用它，而不是在多个组件之间重复逻辑。这提高了代码的可重用性和可测试性，同时遵守dry（不要重复自己）原则。
示例：获取数据挂钩
自定义挂钩
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 loading...
;
return (
-
{posts.map((post) => (
- {post.title} ))}
在此示例中，usefetchdata 钩子封装了数据获取逻辑，允许任何组件以最少的样板获取数据。自定义挂钩对于简化代码和确保干净的架构非常有价值。
使用reducer进行状态管理
管理复杂或分组状态时，reducer 模式提供了一种结构化的方法来处理状态转换。它将状态逻辑集中到单个函数中，使状态更新可预测且更易于调试。 react 的 usereducer 钩子非常适合实现这种模式。
减速机的好处
- 可预测性：状态变化是通过操作明确定义的。
- 可扩展性：适合具有多个依赖项的复杂状态管理。
- 可维护性：集中逻辑简化了调试和测试。
示例：管理身份验证状态
减速函数
小邮包-包月订购包年服务网，该程序由好买卖商城开发，程序采用PHP+MYSQL架设，程序商业模式为目前最为火爆的包月订制包年服务模式，这种包年订购在国外网站已经热火很多年了，并且已经发展到一定规模，像英国的男士用品网站BlackSocks，一年的袜子购买量更是达到了1000万双。功能：1、实现多产品上线，2、不用注册也可以直接下单购买，3、集成目前主流支付接口，4、下单发货均有邮件提醒。
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;
}
}
使用 usereducer 的组件
import react, { usereducer } from "react";
const authcomponent = () => {
const [state, dispatch] = usereducer(authreducer, initialstate);
const login = () => dispatch({ type: "login", payload: { name: "john doe" } });
const logout = () => dispatch({ type: "logout" });
return (
{state.isauthenticated ? (
<>
welcome, {state.user.name}
) : (
)}
);
};
export default authcomponent;
在此示例中：
- authreducer 定义状态如何根据操作发生变化。
- authcomponent 使用 usereducer 来管理身份验证状态。
reducer 对于处理可扩展应用程序中复杂的状态逻辑特别有效，可提高状态管理的清晰度和一致性。
上下文 api 的提供者模式
provider 模式 利用 react 的 context api 在组件之间共享状态或函数，而无需进行 prop 钻取。它将组件包装在上下文提供程序中，允许深度嵌套的组件访问共享数据。
好处
- 避免 prop 钻取： 简化通过深层嵌套组件传递数据。
- 集中状态管理：轻松管理主题或身份验证等全局状态。
示例：主题背景
import react, { createcontext, usestate, usecontext } from "react";
const themecontext = createcontext();
const themeprovider = ({ children }) => {
const [theme, settheme] = usestate("light");
return (
{children}
);
};
const usetheme = () => usecontext(themecontext);
export { themeprovider, usetheme };
使用上下文
import react from "react";
import { themeprovider, usetheme } from "./themecontext";
const themetoggle = () => {
const { theme, settheme } = usetheme();
return (
);
};
const app = () => (
);
export default app;
高阶组件 (hoc)
高阶组件 (hoc) 是采用组件并返回具有附加功能的新组件的函数。它们允许您在多个组件之间重用逻辑，而无需修改其结构。
好处
- 代码可重用性：跨组件共享身份验证或主题等逻辑。
- 封装：将增强逻辑与原始组件分开。
示例：身份验证 hoc
const withauth = (component) => (props) => {
const isauthenticated = true; // replace with actual auth logic
return isauthenticated ? please log in
;
};
const dashboard = () => welcome to the dashboard;
export default withauth(dashboard);
复合成分
复合组件模式允许您构建一个具有多个协同工作的子组件的父组件。此模式非常适合创建灵活且可重用的 ui 组件。
好处
- 可定制性：子组件可以以不同的方式组合。
- 清晰度：清楚地定义父组件和子组件之间的关系。
示例：选项卡组件
import react, { usestate, createcontext, usecontext } from "react";
const tabscontext = createcontext();
const tabs = ({ children }) => {
const [activetab, setactivetab] = usestate(0);
return (
{children}
);
};
tabs.tab = ({ index, label }) => {
const { activetab, setactivetab } = usecontext(tabscontext);
return (
);
};
tabs.panel = ({ index, children }) => {
const { activetab } = usecontext(tabscontext);
return activetab === index ? {children} : null;
};
// usage
const app = () => (
content for tab 1
content for tab 2
);
export default app;
记忆化
memoization 是一种性能优化技术，可防止 react 中不必要的组件重新渲染或值重新计算。
技巧
- react.memo: 防止功能组件重新渲染，除非它们的 props 发生变化。
const expensivecomponent = react.memo(({ value }) => {
console.log("rendered");
return {value}
;
});
export default expensivecomponent;
- usememo: 记忆计算结果，仅在依赖项发生变化时重新计算。
const expensivecalculation = ({ number }) => {
const calculatedvalue = react.usememo(() => number * 2, [number]);
return {calculatedvalue}
;
};
export default expensivecalculation;
- usecallback: 记忆函数，在将回调传递给子组件时很有用。
const Parent = () => {
const handleClick = React.useCallback(() => console.log("Clicked!"), []);
return
记忆化提高了涉及大型数据集或复杂 ui 更新的场景中的性能，确保 react 应用程序保持响应能力。
结论
掌握react 设计模式是构建可扩展、可维护且高效的应用程序的关键。通过应用 容器和演示组件、自定义 hooks 和 memoization 等模式，您可以简化开发、提高代码可重用性并增强性能。 高阶组件、复合组件和提供者模式等高级模式进一步简化了复杂的状态管理和组件交互。
这些模式不仅仅是理论上的，它们解决了 react 开发中的现实挑战，帮助您编写干净且模块化的代码。开始将这些模式合并到您的项目中，以创建健壮、易于扩展且可长期维护的应用程序。借助工具包中的 react 设计模式，您将能够更好地处理任何项目，无论多么复杂。
如需更多见解，请查看 patterns.dev 上的 react 设计模式文档。
