ReactJS 设计模式：编写健壮且可扩展的组件

ReactJS 中的设计模式为应用程序开发中的常见问题提供了标准化且经过验证的解决方案。使用这些模式不仅使您的代码更具可读性和可维护性，而且还增强了其可扩展性和健壮性。让我们深入研究一些最流行的 ReactJS 设计模式，并通过示例来说明它们的用法。

1. 容器和表示组件模式

容器和展示模式将组件分为两类：

• 展示组件：关注事物的外观（UI）。
• 容器组件：关注事物如何工作（逻辑和状态管理）。

这种分离可以实现更好的可重用性、更容易的测试和更清晰的代码。

示例：展示和容器组件

// Presentational Component: Displaying User List (UserList.js)
import React from 'react';

const UserList = ({ users }) => (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

export default UserList;

// Container Component: Fetching User Data (UserContainer.js)
import React, { useState, useEffect } from 'react';
import UserList from './UserList';

const UserContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setUsers(data);
    };
    fetchUsers();
  }, []);

  return <UserList users={users} />;
};

export default UserContainer;

这里，UserList 是一个展示组件，它接收用户作为 props，而 UserContainer 则处理数据获取和状态管理。

2. 高阶组件（HOC）模式

A 高阶组件 (HOC) 是一个将组件作为参数并返回新组件的函数。 HOC 通常用于横切关注点，例如身份验证、日志记录或增强组件行为。

示例：创建 HOC 进行授权

// withAuthorization.js (HOC for Authorization)
import React from 'react';

const withAuthorization = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      if (!localStorage.getItem('authToken')) {
        // Redirect to login if not authenticated
        window.location.href = '/login';
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

export default withAuthorization;

// Dashboard.js (Component Wrapped with HOC)
import React from 'react';
import withAuthorization from './withAuthorization';

const Dashboard = () => <h1>Welcome to the Dashboard</h1>;

export default withAuthorization(Dashboard);

通过使用 withAuthorization 包装 Dashboard，您可以确保只有经过身份验证的用户才能访问它。

3. 渲染道具模式

Render Props 模式涉及使用值为函数的 prop 在组件之间共享代码。此模式对于基于特定条件或状态的动态渲染非常有用。

示例：使用渲染道具进行鼠标跟踪

// MouseTracker.js (Component with Render Props)
import React, { useState } from 'react';

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    setPosition({ x: event.clientX, y: event.clientY });
  };

  return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
};

export default MouseTracker;

// App.js (Using Render Props)
import React from 'react';
import MouseTracker from './MouseTracker';

const App = () => (
  <MouseTracker
    render={({ x, y }) => (
      <h1>
        Mouse position: ({x}, {y})
      </h1>
    )}
  />
);

export default App;

MouseTracker 组件使用 render prop 将鼠标位置数据传递给任何组件，使其具有高度可重用性。

4. 自定义挂钩模式

自定义 Hook 允许您跨多个组件封装和重用有状态逻辑。这种模式促进了代码的可重用性和清晰的关注点分离。

示例：创建用于获取数据的自定义挂钩

// useFetch.js (Custom Hook)
import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    };
    fetchData();
  }, [url]);

  return { data, loading };
};

export default useFetch;

// App.js (Using the Custom Hook)
import React from 'react';
import useFetch from './useFetch';

const App = () => {
  const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <div>Loading...</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default App;

useFetch 自定义钩子封装了数据获取逻辑，可以在不同组件之间复用。

5. 复合组件模式

复合组件模式允许组件一起工作来管理状态和行为。此模式对于构建复杂的 UI 组件（例如选项卡、手风琴或下拉菜单）非常有用。

示例：使用复合组件构建选项卡

// Tabs.js (Parent Component)
import React, { useState } from 'react';

const Tabs = ({ children }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  return React.Children.map(children, (child, index) =>
    React.cloneElement(child, { isActive: index === activeIndex, setActiveIndex, index })
  );
};

const Tab = ({ children, isActive, setActiveIndex, index }) => (
  <button onClick={() => setActiveIndex(index)}>{children}</button>
);

const TabPanel = ({ children, isActive }) => (isActive ? <div>{children}</div> : null);

Tabs.Tab = Tab;
Tabs.TabPanel = TabPanel;

export default Tabs;

// App.js (Using Compound Components)
import React from 'react';
import Tabs from './Tabs';

const App = () => (
  <Tabs>
    <Tabs.Tab>Tab 1</Tabs.Tab>
    <Tabs.Tab>Tab 2</Tabs.Tab>
    <Tabs.TabPanel>Content for Tab 1</Tabs.TabPanel>
    <Tabs.TabPanel>Content for Tab 2</Tabs.TabPanel>
  </Tabs>
);

export default App;

Tabs 组件管理状态，而 Tab 和 TabPanel 组件协同显示选项卡内容。

6. 受控和非受控组件模式

受控组件完全由 React 状态管理，而非受控组件则依赖 DOM 来获取状态。两者都有其用途，但为了一致性和可维护性，受控组件通常是首选。

示例：受控组件与非受控组件

// Controlled Component (TextInputControlled.js)
import React, { useState } from 'react';

const TextInputControlled = () => {
  const [value, setValue] = useState('');

  return (
    <input type="text" value={value} onChange={(e) => setValue(e.target.value)} />
  );
};

export default TextInputControlled;

// Uncontrolled Component (TextInputUncontrolled.js)
import React, { useRef } from 'react';

const TextInputUncontrolled = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Log Input Value</button>
    </>
  );
};

export default TextInputUncontrolled;

在受控组件中，React 完全控制表单状态，而在非受控组件中，状态由 DOM 本身管理。

7. 钩子工厂模式

Hooks 工厂模式涉及创建动态生成和管理多个状态或行为的钩子，提供灵活的方式来管理复杂逻辑。

示例：使用 Hooks Factory 进行动态状态管理

// useDynamicState.js (Hook Factory)
import { useState } from 'react';

const useDynamicState = (initialStates) => {
  const states = {};
  const setters = {};

  initialStates.forEach(([key, initialValue]) => {
    const [state, setState] = useState(initialValue);
    states[key] = state;
    setters[key] = setState;
  });

  return [states, setters];
};

export default useDynamicState;

// App.js (Using the Hooks Factory)
import React from 'react';
import useDynamicState from './useDynamicState';

const App = () => {
  const [states, setters] = useDynamicState([
    ['name', ''],
    ['age', 0],
  ]);

  return (
    <div>
      <input
        type="text"
        value={states.name}
        onChange={(e) => setters

.name(e.target.value)}
      />
      <input
        type="number"
        value={states.age}
        onChange={(e) => setters.age(parseInt(e.target.value))}
      />
      <p>Name: {states.name}</p>
      <p>Age: {states.age}</p>
    </div>
  );
};

export default App;

这个钩子工厂动态创建和管理多个状态，提供灵活性和更简洁的代码。

结论

通过利用这些设计模式，您可以创建更健壮、可扩展和可维护的 React 应用程序。这些模式可帮助您编写符合最佳实践的干净、可重用的代码，确保您的应用程序随着时间的推移更容易开发和管理。

您想更深入地研究这些模式或探索其他主题吗？

以上是ReactJS 设计模式：编写健壮且可扩展的组件的详细内容。更多信息请关注PHP中文网其他相关文章！