南通网站建设一条龙,外贸商城源码,国家工业和信息化部网站备案系统,dw制作网页入门Image Source : https://bugfender.com
React是一个强大的JavaScript库#xff0c;用于构建用户界面。其基于组件的体系结构和构建可重用组件的能力使其成为许多企业级应用程序的首选。然而#xff0c;随着应用程序的规模和复杂性的增长#xff0c;维护和扩展变得更加困难。… Image Source : https://bugfender.com
React是一个强大的JavaScript库用于构建用户界面。其基于组件的体系结构和构建可重用组件的能力使其成为许多企业级应用程序的首选。然而随着应用程序的规模和复杂性的增长维护和扩展变得更加困难。这就是设计模式发挥作用的地方。在这篇博客文章中我们将探讨一些最常用的React企业设计模式以及TypeScript中的代码示例。
容器和呈现组件模式
React中使用最广泛的模式之一是容器和表示组件模式。这种模式将表示逻辑与业务逻辑分离使代码更加模块化更易于测试。容器组件负责从服务器获取数据并将其作为prop 传递给表示组件。表示组件负责呈现UI。
// Container Component
import React, { useEffect } from react;
import { useDispatch, useSelector } from react-redux;
import { fetchUsers } from ./userActions;
import { RootState } from ./rootReducer;
import UserList from ./UserList;const UserListContainer: React.FC () {const dispatch useDispatch();const { loading, users } useSelector((state: RootState) state.users);useEffect(() {dispatch(fetchUsers());}, [dispatch]);return UserList loading{loading} users{users} /;
};export default UserListContainer;// Presentational Component
import React from react;
import { User } from ./userTypes;interface Props {loading: boolean;users: User[];
}const UserList: React.FCProps ({ loading, users }) {if (loading) return divLoading.../div;if (!users) return null;return (ul{users.map((user) (li key{user.id}{user.name}/li))}/ul);
};export default UserList;
渲染Props 图案
“渲染prop ”模式是一种使用值为函数的prop 在组件之间共享代码的技术。当组件具有相似的功能但具有不同的渲染要求时此模式非常有用。
import React from react;interface Props {render: (count: number, increment: () void) JSX.Element;
}const Counter: React.FCProps ({ render }) {const [count, setCount] React.useState(0);const increment () {setCount(count 1);};return render(count, increment);
};export default Counter;// Usage
import React from react;
import Counter from ./Counter;const App: React.FC () {return (divh1Render Props Pattern/h1Counterrender{(count, increment) (divpCount: {count}/pbutton onClick{increment}Increment/button/div)}//div);
};export default App;
高阶组件模式。
高阶组件HOC模式是React中的一种设计模式它通过提供一种增强或修改组件功能的方法来实现组件的可重用性和代码共享。
简单地说HOC是一个函数它接受一个组件作为参数并返回一个具有附加功能的新组件。然后可以像React中的任何其他组件一样渲染新组件。原始组件由HOC包裹HOC为包裹的组件提供额外的行为或prop 。
HOC可用于广泛的任务如提供上下文、处理错误、获取数据或强制身份验证。它们可以帮助减少代码重复提高代码可维护性并促进代码重用。
import React from react;// Define a higher-order component
const withName (WrappedComponent) {return class extends React.Component {state {name: John Doe}render() {return (WrappedComponent name{this.state.name} {...this.props} /)}}
}// Define a regular component
const MyComponent (props) {return (divpHello, my name is {props.name}./ppI am a {props.role}./p/div)
}// Wrap MyComponent with the withName HOC
const MyComponentWithName withName(MyComponent);// Render MyComponentWithName
const App () {return (divMyComponentWithName roledeveloper //div)
}export default App;
禁用prop 模式
禁用prop模式是React中使用的一种设计模式它通过提供一种方法来禁用按钮、链接和表单字段等交互元素当它们不可用或不适用时从而能够创建可访问的用户界面。
该模式包括向组件中的交互式元素添加一个禁用的prop 当设置为true时将禁用该元素并阻止其接收用户输入。这对于由于特定条件例如表单不完整或用户权限不足导致交互式元素不适用的情况尤其有用。
import React from react;const App () {return (divSomeComponent disabled //div);
};const SomeComponent ({ disabled false }) {return (!disabled (divh2Disable SomeComponent to see magic happen!/h2/div));
};
受控和非受控组件模式
受控组件是一个表单元素其值由React控制。换句话说组件的值总是通过props显式设置并通过回调进行更新。这意味着组件的状态始终与输入数据同步允许React控制组件的行为并允许开发人员轻松处理用户输入。
import React, { useState } from react;function ControlledInput() {const [value, setValue] useState();const handleChange (event) {setValue(event.target.value);};return (input typetext value{value} onChange{handleChange} /);
}
不受控制的零部件是由浏览器管理其值的形状元素。换句话说组件的值由用户设置React不控制其行为。这会使处理复杂表单中的用户输入变得更加困难但在简单表单中使用也会更快、更容易。
import React, { useRef } from react;function UncontrolledInput() {const inputRef useRef(null);const handleSubmit (event) {event.preventDefault();console.log(inputRef.current.value);};return (form onSubmit{handleSubmit}input typetext ref{inputRef} /button typesubmitSubmit/button/form);
}
复合部件模式
复合组件模式是React中用于管理由多个子组件组成的组件的设计模式。这种模式包括将父组件的关注点分离为较小的组件然后使用prop 、上下文和其他技术的组合来管理这些较小组件之间的关系。
复合组件模式背后的理念是为开发人员提供一种方法以创建由较小构建块组成的可重复使用、灵活和易于使用的组件。这使开发人员能够创建复杂的UI组件这些组件可以很容易地进行自定义和扩展同时仍然保持清晰易懂的代码结构。
import React, { createContext, useState } from react;const ToggleContext createContext();function Toggle({ children }) {const [on, setOn] useState(false);const toggle () setOn(!on);return (ToggleContext.Provider value{{ on, toggle }}{children}/ToggleContext.Provider);
}function ToggleOn({ children }) {const { on } useContext(ToggleContext);return on ? children : null;
}function ToggleOff({ children }) {const { on } useContext(ToggleContext);return on ? null : children;
}function ToggleButton(props) {const { on, toggle } useContext(ToggleContext);return button onClick{toggle} {...props} /;
}function App() {return (ToggleToggleOnThe button is on/ToggleOnToggleOffThe button is off/ToggleOffToggleButtonToggle/ToggleButton/Toggle);
}
prop 集合模式
prop 集合模式是React中用于将prop 集合传递给组件的设计模式。它包括将多个相关prop 组合成一个对象然后将其作为一个prop 传递给组件。
当我们想将大量相关的prop 传递给组件时这种模式特别有用因为它可以减少代码中的混乱并使prop 的管理变得更容易。
import React from react;function Button(props) {const { label, color, size, ...rest } props;return (button style{{ color, fontSize: size }} {...rest}{label}/button);
}function App() {const buttonProps {label: Click Me,color: red,size: 20px,onClick: () console.log(Button clicked!)};return Button {...buttonProps} /;
}
函数作为子模式
Function as Child模式是React中使用的一种设计模式它涉及将函数作为子级传递给组件然后在组件内部调用该组件来呈现实际内容。
import React from react;function Toggle(props) {const [on, setOn] useState(false);const handleToggle () {setOn(!on);};return props.children({on: on,toggle: handleToggle});
}function App() {return (Toggle{({ on, toggle }) (div{on ? The button is on : The button is off}button onClick{toggle}Toggle/button/div)}/Toggle);
}
受控输入模式
受控输入模式是React中用于管理输入字段的模式。它包括将输入字段的当前值存储在组件状态中并在输入值更改时使用事件处理程序更新状态。
import React, { useState } from react;function ControlledInput() {const [inputValue, setInputValue] useState();const handleInputChange (event) {setInputValue(event.target.value);};return (divinput typetext value{inputValue} onChange{handleInputChange} /pThe input value is: {inputValue}/p/div);
}
不可变模式
不可变模式通常用于管理组件的状态。我们不直接修改状态而是使用更新的值创建一个新的状态对象然后将其传递给组件进行渲染。
Immutable.js库可用于创建不可变的数据结构这些数据结构可用于React状态管理。以下是如何在React组件中使用不可变模式的示例
import React, { Component } from react;
import { Map } from immutable;class MyComponent extends Component {state {data: Map({name: John,age: 30,email: johnexample.com})};handleNameChange (event) {const name event.target.value;const newData this.state.data.set(name, name);this.setState({ data: newData });};render() {const { data } this.state;return (divlabelName:/labelinput typetext value{data.get(name)} onChange{this.handleNameChange} /labelAge:/labelspan{data.get(age)}/spanlabelEmail:/labelspan{data.get(email)}/span/div);}
}
在这篇博客文章中我们讨论了一些最常用的React企业设计模式包括高阶组件、渲染prop 、容器表示组件模式、复合组件、受控组件等等。通过在React项目中应用这些设计模式和最佳实践您可以提高代码质量增加团队协作并使您的应用程序更具可扩展性、灵活性和可维护性。然而重要的是要记住这些模式不是一刀切的解决方案可能需要根据项目的具体要求进行调整。
总的来说React企业设计模式是一套有价值的工具和技术可以帮助您构建更好的React应用程序提高开发生产力和效率并提供满足用户和利益相关者需求的高质量软件。
编码快乐
文章链接
【React设计】React企业设计模式 | 程序员云开发,云时代的程序员.
欢迎收藏【架构师酒馆】和【开发者开聊】
