React 组件设计：9个实用的架构模式

react 给了开发者很多自由，但自由也可能带来问题：代码不一致、难以维护、团队协作困难。使用经过验证的设计模式可以避免这些问题。

下面介绍9个实用的 React 组件架构模式。这些模式能帮助你构建更健壮的 UI 界面。

1. 展示组件与容器组件模式

这个模式把组件分成两类：

容器组件：负责数据处理和逻辑
展示组件：只负责显示界面

这样做的好处是逻辑和界面清晰分离。展示组件没有副作用和状态，更容易复用和测试。

// 容器组件
function UserContainer() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser().then(data => {
      setUser(data);
      setLoading(false);
    });
  }, []);

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

// 展示组件
function UserProfile({ user, loading }) {
  if (loading) return <div>加载中...</div>;
  if (!user) return <div>用户不存在</div>;
  
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

2. 受控组件与非受控组件

受控组件由父组件通过 props 管理值，非受控组件自己管理状态。

// 受控组件
function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

// 非受控组件
function UncontrolledInput() {
  const inputRef = useRef();
  return <input defaultValue="初始值" ref={inputRef} />;
}

受控组件更适合表单集成，非受控组件渲染更快。

3. 复合组件模式

通过 Context 共享状态，让相关组件一起工作。

const TabsContext = createContext();

function Tabs({ children, defaultValue }) {
  const [activeTab, setActiveTab] = useState(defaultValue);
  
  return (
    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

function TabList({ children }) {
  return <div className="tab-list">{children}</div>;
}

function Tab({ value, children }) {
  const { activeTab, setActiveTab } = useContext(TabsContext);
  
  return (
    <button 
      className={activeTab === value ? 'active' : ''}
      onClick={() => setActiveTab(value)}
    >
      {children}
    </button>
  );
}

使用方式：

<Tabs defaultValue="first">
  <TabList>
    <Tab value="first">第一个</Tab>
    <Tab value="second">第二个</Tab>
  </TabList>
</Tabs>

4. Render Props 模式

通过函数 prop 共享组件逻辑。

function Toggle({ children }) {
  const [on, setOn] = useState(false);
  const toggle = () => setOn(!on);
  
  return children({ on, toggle });
}

// 使用
<Toggle>
  {({ on, toggle }) => (
    <button onClick={toggle}>
      {on ? '开启' : '关闭'}
    </button>
  )}
</Toggle>

5. 无头组件模式

提供逻辑和状态，但不控制界面展示。

function useDropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);
  
  return { isOpen, toggle };
}

// 使用
function MyDropdown() {
  const { isOpen, toggle } = useDropdown();
  
  return (
    <div>
      <button onClick={toggle}>
        菜单 {isOpen ? '▲' : '▼'}
      </button>
      {isOpen && (
        <div className="dropdown-menu">
          <div>选项一</div>
          <div>选项二</div>
        </div>
      )}
    </div>
  );
}

6. 状态减速器模式

允许使用者自定义状态更新逻辑。

function useToggle({ reducer = (state, action) => {
  switch (action.type) {
    case 'toggle':
      return { on: !state.on };
    default:
      return state;
  }
} } = {}) {
  const [state, dispatch] = useReducer(reducer, { on: false });
  const toggle = () => dispatch({ type: 'toggle' });
  
  return [state.on, toggle];
}

7. 智能组件与纯展示组件

智能组件处理业务逻辑，纯展示组件只负责显示。

// 智能组件
function ProductListContainer() {
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    fetchProducts().then(setProducts);
  }, []);
  
  return <ProductList products={products} />;
}

// 纯展示组件
function ProductList({ products }) {
  return (
    <div className="product-list">
      {products.map(product => (
        <div key={product.id} className="product-item">
          <h3>{product.name}</h3>
          <p>价格: {product.price}元</p>
        </div>
      ))}
    </div>
  );
}

8. 就近放置原则

把状态和逻辑放在使用它们的地方，不要过早抽象。

// 好的做法：状态就近放置
function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    // 处理登录逻辑
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={username}
        onChange={e => setUsername(e.target.value)}
        placeholder="用户名"
      />
      <input 
        type="password"
        value={password}
        onChange={e => setPassword(e.target.value)}
        placeholder="密码"
      />
      <button type="submit">登录</button>
    </form>
  );
}

只有在确实需要复用时，才提取自定义 Hook。

9. Props 配置与 Children 组合

用 props 配置组件行为，用 children 组合界面。

function Card({ variant = 'default', children }) {
  return (
    <div className={`card card-${variant}`}>
      {children}
    </div>
  );
}

function CardHeader({ children }) {
  return <div className="card-header">{children}</div>;
}

function CardBody({ children }) {
  return <div className="card-body">{children}</div>;
}

使用方式：

<Card variant="primary">
  <CardHeader>
    <h3>卡片标题</h3>
  </CardHeader>
  <CardBody>
    <p>卡片内容...</p>
  </CardBody>
</Card>

总结

这些模式不是必须严格遵守的规则，而是经过验证的最佳实践。根据项目需求选择合适的模式：

需要逻辑与界面分离时，使用容器/展示组件模式
构建复杂交互组件时，考虑复合组件模式
需要高度自定义界面时，使用无头组件模式
保持代码简单，避免过早抽象

好的组件设计让代码更容易维护、测试和扩展。开始在实践中应用这些模式，你会发现 React 开发变得更加顺畅。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12989