当前位置：首页 > React

react如何分割组建

2026-01-23 22:02:40React

组件分割的基本原则

将UI拆分为更小的、可复用的组件是React开发的核心思想。合理的组件分割能提升代码可维护性和复用性。

按功能职责划分

根据组件的功能进行划分，例如将导航栏、表单、列表等独立为组件。每个组件应只关注单一职责。

react如何分割组建

// 导航栏组件
function Navbar() {
  return <nav>...</nav>;
}

// 表单组件
function Form() {
  return <form>...</form>;
}

容器与展示组件分离

容器组件负责数据获取和状态管理，展示组件只负责UI渲染。这种模式使组件更易于测试和复用。

// 容器组件
function UserContainer() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(data => setUsers(data));
  }, []);

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

// 展示组件
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

按业务领域划分

对于复杂应用，可以按业务领域划分组件。例如电商应用可分为商品、订单、支付等模块。

react如何分割组建

// 商品模块
function ProductModule() {
  return (
    <div>
      <ProductList />
      <ProductDetail />
    </div>
  );
}

高阶组件复用逻辑

通过高阶组件(HOC)复用跨组件的逻辑，避免代码重复。

function withLoading(WrappedComponent) {
  return function WithLoading({ isLoading, ...props }) {
    return isLoading ? <Spinner /> : <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLoading(MyComponent);

自定义Hook共享状态逻辑

使用自定义Hook在不同组件间共享状态逻辑，这是React 16.8+推荐的方式。

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

// 在多个组件中使用
function ComponentA() {
  const data = useFetch('/api/a');
  // ...
}

function ComponentB() {
  const data = useFetch('/api/b');
  // ...
}

标签: react