每个开发人员都应该了解可扩展和高效应用程序的顶级 React 设计模式-js教程-PHP中文网

Top React Design Patterns Every Developer Should Know for Scalable and Efficient Apps

随着 React 继续主导前端生态系统，掌握其设计模式可以显着提高应用程序的效率和可扩展性。 React 设计模式提供了组织和构建组件、管理状态、处理 props 和提高可重用性的最佳实践。在本博客中，我们将探讨一些关键的 React 设计模式，这些模式可以使您的开发过程从优秀走向卓越。

1. 展示组件和容器组件

React 中的基本模式之一是 展示组件和容器组件 模式，它是关于分离关注点的：

呈现组件：这些组件负责事物的外观。他们通过 props 接收数据和回调，但没有自己的逻辑。它们的唯一目的是渲染 UI。
容器组件：这些组件管理事物的工作方式。它们包含逻辑、管理状态并处理数据获取或事件处理。容器组件将数据传递给展示组件。


// Presentational Component
const UserProfile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: 'john@example.com' });

  return <UserProfile user={user} />;
};

登录后复制

这种模式鼓励关注点分离，使代码更易于维护和测试。

2. 高阶组件（HOC）

高阶组件 (HOC) 是重用组件逻辑的强大设计模式。 HOC 是一个函数，它接受一个组件并返回一个具有增强行为或添加功能的新组件。

此模式通常用于横切关注点，例如身份验证、主题或数据获取。


// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return <div>You need to log in!</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Usage
const Dashboard = () => <div>Welcome to the dashboard</div>;
export default withAuth(Dashboard);

登录后复制

HOC 通过跨多个组件实现可重用逻辑来推广 DRY（不要重复自己）原则。

3. 渲染道具

Render Props 模式涉及将函数作为 prop 传递给组件，从而允许基于该函数动态渲染内容。这对于在不使用 HOC 的情况下在组件之间共享状态逻辑特别有用。


// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

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

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

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

登录后复制

此模式通过将逻辑与 UI 分离来为您提供灵活性，使组件更具可重用性和可定制性。

4. 复合组件

复合组件模式通常用于react-select 或react-table 等库中。它允许父组件控制一组子组件。这种模式提高了构建可重用和动态界面的灵活性。


// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <div>
        {children.map((child, index) => (
          <button key={index} onClick={() => setActiveTab(index)}>
            {child.props.title}
          </button>
        ))}
      </div>
      <div>{children[activeTab]}</div>
    </div>
  );
};

// Usage
<Tabs>
  <div title="Tab 1">Content of Tab 1</div>
  <div title="Tab 2">Content of Tab 2</div>
</Tabs>;

登录后复制

此模式为父子通信提供了一个干净的 API，同时保持组件的灵活性和可定制性。

5. 受控组件与非受控组件

React 提供了两种管理表单输入的方式：受控组件 和 非受控组件。

受控组件：这些组件的状态完全由 React 通过 props 控制，这使得它们更加可预测。
不受控制的组件：这些组件依赖于 ref 直接操作 DOM，提供较少的控制，但可能提高性能。


// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

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

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

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

  return <input ref={inputRef} />;
};

登录后复制

在这些模式之间进行选择取决于您是否需要细粒度控制或轻量级性能优化。

6. 自定义挂钩

React Hooks 允许我们以可重用的方式构建自定义逻辑。通过将通用逻辑提取到自定义钩子中，我们可以避免代码重复并使我们的代码库更加模块化。


// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>Loading...</p>;

  return <div>{data.someField}</div>;
};

登录后复制

自定义挂钩可以更好地分离关注点并以声明方式重用常见功能。