浅析五种 React 组件设计模式 _小知识

作为一名 React 开发者，你可能会面临下面几个问题：

如何构建一个高复用度性的组件，使其适应不同的业务场景？
如何构建一个具有简单 API的组件，使其易于使用？
如何构建一个在 UI 和功能方面具有可扩展性的组件？

为解决上述问题，下面介绍五种 React 组件设计模式，并对比它们的优缺点。
1. 复合组件模式复合组件模式是一种通过将多个简单组件组合在一起创建更复杂组件的方法。这种模式使得组件的逻辑分离，每个简单组件负责特定的功能。通过复合组件，可以轻松构建可复用的、功能完备的组件。
【浅析五种 React 组件设计模式】如果想要设计一个定制化程度高，API方便理解的组件，可以考虑这个模式，这种模式不会出现多层Props传递的情况。

import React, { useState } from 'react';// 基础按纽组件const Button = ({ label, onClick }) => (<button onClick={onClick}>{label}</button>);// 基础文本组件const TextBox = ({ value, onChange }) => (<input type="text" value=https://www.isolves.com/it/cxkf/bk/2024-01-09/{value} onChange={onChange} />);// 复合组件const LoginPanel = () => {const [username, setUsername] = useState('');const [password, setPassword] = useState('');const handleLogin = () => {// 实现登录逻辑console.log(`Logging in with ${username} and ${password}`);};return ( setUsername(e.target.value)} /> setPassword(e.target.value)} />
);};// 使用示例const App = () => {return ();};export default App;

在这个例子中，LoginPanel 是一个复合组件，它包含了两个基本组件 TextBox 和一个带有登录逻辑的 Button 。
优点：

API 复杂度降低：避免将Props全部塞入一个容器组件中，而是直接将Props传递给相对应的子组件。
高度可复用性：基础组件可以在多个场景中重复使用。
逻辑分离：每个基础组件专注于一项任务。
组件数量增多：随着组件层级的增加，将会增加JSX的行数，并且代码可能变得复杂。
不适用于所有场景：对于简单的场景，引入复合组件模式可能会显得繁琐和不必要。

适用场景：

表单和表单域：当设计表单时，可以使用复合式组件将整个表单拆分成多个表单域组件，每个表单域负责处理特定的输入或验证逻辑。这样可以更好地组织表单逻辑，提高可维护性。
对话框和模态框：对话框或模态框通常包含标题、内容和操作按钮。可以使用复合式组件将这些部分拆分成独立的组件，以便在应用中以不同方式重复使用。

2. 受控组件模式受控组件模式就是将组件转换为受控组件，通过直接修改 Props 影响组件内部的状态，一般在表单组件中比较常用。

import React, { useState } from 'react';const Button = ({ label, onClick }) => (<button onClick={onClick}>{label}</button>);const TextBox = ({ value, onChange }) => (<input type="text" value=https://www.isolves.com/it/cxkf/bk/2024-01-09/{value} onChange={onChange} />);// 受控组件模式的复合组件const ControlledLoginPanel = () => {const [loginData, setLoginData] = useState({ username: '', password: '' });const handleInputChange = (e) => {const { name, value } = e.target;setLoginData((prevData) => ({...prevData,[name]: value,}));};const handleLogin = () => {// 实现登录逻辑console.log(`Logging in with ${loginData.username} and ${loginData.password}`);};return (
);};// 使用示例const App = () => {return ();};export default App;

在这个例子中，ControlledLoginPanel 组件就是一个受控组件的例子，其中的输入框的值由 React 状态管理。
优点：