设计模式是软件开发中常见问题的经过验证的解决方案。在 react 中，应用这些模式可以使您的代码更加模块化、可重用且更易于维护。在本文中，我们将探讨 react 中一些最常见和有用的设计模式：高阶组件 (hoc)、渲染道具和 hook。
高阶组件（hoc）是接收组件并返回具有附加功能的新组件的函数。它们通常用于向多个组件添加通用逻辑。
让我们创建一个简单的 hoc，只需单击按钮即可添加日志记录功能：
import react from 'react';
// higher order component
const withlogger = (wrappedcomponent) => {
return class extends react.component {
handleclick = () => {
console.log('button clicked!');
};
render() {
return <wrappedcomponent onclick="{this.handleclick}"></wrappedcomponent>;
}
};
};
// componente original
const button = ({ onclick, children }) => (
<button onclick="{onclick}">{children}</button>
);
// componente envolvido com hoc
const buttonwithlogger = withlogger(button);
export default buttonwithlogger;
render props 是一种允许您使用值为函数的 prop 在组件之间共享逻辑的技术。该函数接收渲染内容所需的数据。
让我们创建一个管理可见性状态的组件并通过渲染道具提供此逻辑：
import react, { usestate } from 'react';
// componente de render props
const toggle = ({ children }) => {
const [isvisible, setisvisible] = usestate(false);
const togglevisibility = () => setisvisible(!isvisible);
return children({ isvisible, togglevisibility });
};
// componente que utiliza render props
const app = () => (
<toggle>
{({ isvisible, togglevisibility }) => (
<div>
<button onclick="{togglevisibility}">toggle</button>
{isvisible && <p>content is visible</p>}
</div>
)}
</toggle>
);
export default app;
hooks 是 react 的最新新增功能，允许您在不编写类的情况下使用状态和其他 react 功能。它们是 hoc 和渲染道具的强大而灵活的替代品。
让我们创建一个自定义钩子来管理可见性状态：
import { useState } from 'react';
// Hook Personalizado
const useToggle = (initialState = false) => {
const [isVisible, setIsVisible] = useState(initialState);
const toggleVisibility = () => setIsVisible(!isVisible);
return [isVisible, toggleVisibility];
};
// Componente que utiliza o Hook
const App = () => {
const [isVisible, toggleVisibility] = useToggle();
return (
<div>
<button onclick="{toggleVisibility}">Toggle</button>
{isVisible && <p>Content is visible</p>}
</div>
);
};
export default App;
高阶组件（hoc）：
渲染道具:
钩子:
react 中的每种设计模式都有自己的用例和优点。高阶组件 (hoc) 对于向多个组件添加常见行为非常有用，而渲染属性允许您灵活地共享复杂的逻辑。反过来，钩子提供了一种简单而强大的方法来管理功能组件中的状态和副作用。选择正确的模式取决于您项目的具体需求和团队的偏好。
在 react 应用程序中实现这些设计模式可以使您的代码更加模块化、可重用且更易于维护，从而产生更加健壮和可扩展的代码库。
希望这篇文章对您有所帮助。如果您有任何疑问或建议，请随时评论！