react如何分割组建
分割组件的原则
将UI拆分为更小的、可复用的组件，每个组件负责单一功能或视图部分。遵循单一职责原则，避免组件承担过多职责。
按功能划分
根据功能模块划分组件，例如导航栏、表单、列表、卡片等。功能独立的模块适合拆分为单独组件，便于维护和复用。
按数据流划分
根据数据依赖关系划分组件。将数据获取和处理的逻辑集中在容器组件中，展示组件只负责UI渲染。例如：
// 容器组件
const UserListContainer = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetchUsers().then(data => setUsers(data));
}, []);
return <UserList users={users} />;
};
// 展示组件
const UserList = ({ users }) => (
<ul>
{users.map(user => <UserItem key={user.id} user={user} />)}
</ul>
);按UI层级划分
将页面拆分为布局组件和内容组件。布局组件处理整体结构（如网格、侧边栏），内容组件填充具体内容。例如：
const AppLayout = ({ sidebar, content }) => (
<div className="layout">
<div className="sidebar">{sidebar}</div>
<div className="content">{content}</div>
</div>
);复合组件模式
通过组合多个小组件构建复杂功能。例如下拉菜单可以拆分为Toggle、Menu和MenuItem组件：
const Dropdown = () => (
<DropdownToggle>
<DropdownMenu>
<DropdownMenuItem>Option 1</DropdownMenuItem>
<DropdownMenuItem>Option 2</DropdownMenuItem>
</DropdownMenu>
</DropdownToggle>
);高阶组件(HOC)
通过高阶组件复用逻辑。将通用逻辑提取到HOC中，增强基础组件：
const withLoading = (Component) => (props) =>
props.isLoading ? <Spinner /> : <Component {...props} />;
const EnhancedComponent = withLoading(BaseComponent);自定义Hook
将组件逻辑提取到自定义Hook中，实现逻辑复用而不影响组件结构：
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
};
// 在组件中使用
const MyComponent = () => {
const data = useFetch('/api/data');
return <div>{data}</div>;
};组件拆分时机
当组件代码超过300行、包含多个独立功能区块、或相同UI模式重复出现3次以上时，考虑进行拆分。保持组件大小适中，既不过于庞大也不过度碎片化。
