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

);};// 使用 Props Getters 模式的 Hooksconst useLoginForm = () => {const [loginData, setLoginData] = useState({ username: '', password: '' });const handleInputChange = (name) => (e) => {const { value } = e.target;setLoginData((prevData) => ({...prevData,[name]: value,}));};const handleLogin = () => {// 实现登录逻辑console.log(`Logging in with ${loginData.username} and ${loginData.password}`);};const getUsernameProps = () => ({getValue: () => loginData.username,onChange: handleInputChange('username'),});const getPasswordProps = () => ({getValue: () => loginData.password,onChange: handleInputChange('password'),});return {getUsernameProps,getPasswordProps,handleLogin,};};// 使用示例const App = () => {const { getUsernameProps, getPasswordProps, handleLogin } = useLoginForm();return ();};export default App;在这个例子中，我们基于模式 3 进行了改造，把 ControlledLoginPanel 组件需要的 Props 通过函数的方式进行获?。?允迪指?榛睢⒏?虮愕淖榧?从?。
优点：

易用性：开发人员只需要将 Getter传入到正确的 JSX元素即可。
组件关注点分离：组件通过 props 获取所需的属性，使组件关注点更为分离，组件本身不处理状态和逻辑，提高了组件的可维护性。
减少嵌套层级：相较于 Hooks 模式，Props Getters 模式可能减少了一些嵌套，使得组件结构更加扁平。

缺点：

缺乏可见性： Getter 带来了抽象，使组件更容易集成，但也更为黑盒。
引入更多回调函数：使用 Props Getters 模式可能引入更多的回调函数，一些开发者可能认为这会使代码显得更加复杂。
依赖外部 API： Props Getters 模式依赖外部传递的回调函数，可能导致一些依赖关系，不够自包含。

适用场景：

数据过滤：在一个数据展示组件中，通过 Props Getters 模式可以将数据过滤逻辑提取出来，允许外部根据特定条件获取过滤后的数据。
表单验证：在一个表单组件中，通过 Props Getters 模式可以将表单验证的逻辑从组件中抽离，允许外部调用表单组件的验证函数，并获取验证结果。

5. State Reducer 模式State Reducer 模式是一种通过将组件的状态更新逻辑委托给一个函数，实现更灵活的状态管理方式。这种模式通常在处理复杂的状态逻辑时非常有用。

import React, { useState } from 'react';const TextInput = ({ getInputProps }) => {const inputProps = getInputProps();return <input {...inputProps} />;};const StateReducerExample = () => {// 初始状态为一个空字符串const [inputValue, setInputValue] = useState('');// stateReducer 函数用于处理状态的变化const stateReducer = (state, changes) => {// 使用 switch case 处理不同的状态变化情况switch (Object.keys(changes)[0]) {// 如果变化的是 value 属性case 'value':// 如果输入的字符数量超过 10 个，则不允许变化if (changes.value.length > 10) {return state;}break;// 可以添加其他 case 处理不同的状态变化default:break;}// 返回新的状态return { ...state, ...changes };};// 获取传递给子组件的 propsconst getInputProps = () => {return {value: inputValue,// 在输入框变化时调用 stateReducer 处理状态变化onChange: (e) => setInputValue(stateReducer({ value: e.target.value })),};};return (<div><h3>State Reducer Example</h3>{/* 将获取的 props 传递给 TextInput 组件 */}<TextInput getInputProps={getInputProps} /></div>);};export default StateReducerExample;

在这个例子中，StateReducerExample 组件包含一个输入框，通过 getInputProps 函数将输入框的值和变化处理逻辑传递给 TextInput 组件。stateReducer 函数处理状态的变化，确保输入的字符数量不超过 10 个。
优点：