react组件如何拆分
拆分 React 组件的原则与方法
单一职责原则
每个组件应只负责一个独立的功能或 UI 部分。例如，将按钮、输入框、列表项等基础元素拆分为独立组件，避免一个组件同时处理数据获取和渲染逻辑。
基于功能或模块划分
将大型组件按功能模块拆分为子组件。例如，电商页面的商品列表、购物车、搜索栏可分别拆分为 ProductList、Cart、SearchBar 组件。
容器与展示组件分离
-
容器组件：负责数据逻辑（如 API 调用、状态管理），通过 props 传递数据。
-
展示组件：仅接收 props 并渲染 UI，无内部状态。例如：
// 容器组件 const ProductContainer = () => { const [products, setProducts] = useState([]); useEffect(() => { fetchData().then(setProducts); }, []); return <ProductList products={products} />; }; // 展示组件 const ProductList = ({ products }) => ( <ul>{products.map(item => <li key={item.id}>{item.name}</li>)}</ul> );
代码复用的拆分策略
自定义 Hooks
将可复用的逻辑（如表单处理、API 调用）提取为自定义 Hook。例如：
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => { fetch(url).then(res => res.json()).then(setData); }, [url]);
return data;
};
// 使用 Hook
const MyComponent = () => {
const data = useFetch('/api/products');
return <div>{data && data.name}</div>;
};高阶组件（HOC）
通过函数包装组件实现逻辑复用。例如鉴权 HOC：
const withAuth = (WrappedComponent) => {
return (props) => {
const isAuthenticated = checkAuth();
return isAuthenticated ? <WrappedComponent {...props} /> : <Redirect to="/login" />;
};
};文件组织建议
按功能或路由分组
将相关组件放入同一目录，例如：
src/
components/
Button/
Button.jsx
Button.css
Header/
Header.jsx
Navbar.jsx
pages/
HomePage/
HomePage.jsx
ProductList.jsx索引文件导出
在组件目录下创建 index.js 统一导出，简化引用路径：
// components/Button/index.js
export { default } from './Button';性能优化相关的拆分
动态导入（懒加载）
使用 React.lazy 拆分路由级组件，减少初始加载体积：
const LazyComponent = React.lazy(() => import('./LazyComponent'));
const App = () => (
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>
);避免不必要的重新渲染
对纯展示组件使用 React.memo，或通过细粒度状态管理（如 Context + useMemo）减少渲染范围。
