react学习笔记10 全局组件和局部组件

在 React 和 TypeScript 中，全局组件和局部组件是指组件的使用范围和生命周期的不同。全局组件通常在整个应用程序中被广泛使用，而局部组件则仅限于某个特定的部分或页面。全局组件全局组件通常用于实现一些通用的功能，例如导航栏、页脚、模态对话框等，它们可以在多个页面或组件中复用。

示例代码假设你有一个全局的导航栏组件：

// components/Navbar.tsx  
import React from 'react';  
  
interface NavbarProps {  
    title: string;  
}  
  
const Navbar: React.FC<NavbarProps> = ({ title }) => {  
    return (  
        <nav>  
        <h1>{title}</h1>  
        <ul>  
        <li>Home</li>  
        <li>About</li>  
        <li>Contact</li>  
        </ul>  
    </nav>  
    );  
};  
  
export default Navbar; 

局部组件局部组件则是针对特定页面或功能设计的组件，它们的使用范围有限，只在特定的上下文中使用。

示例代码假设你有一个局部的用户列表组件：

// components/UserList.tsx  
import React from 'react';  
  
interface User {  
    id: number;  
    name: string;  
}  
  
interface UserListProps {  
    users: User[];  
}  
  
const UserList: React.FC<UserListProps> = ({ users }) => {  
    return (  
        <div>  
            <h2>User List</h2>  
        <ul>  
            {users.map((user) => (  
            <li key={user.id}>{user.name}</li>  
            ))}  
        </ul>  
    </div>  
    );  
};  
  
export default UserList;  

tsx使用全局组件要在应用中使用全局组件，你需要在需要的地方导入并使用它。

例如，在一个页面组件中使用全局导航栏组件：

// pages/HomePage.tsx  
import React from 'react';  
import Navbar from '../components/Navbar';  
  
const HomePage: React.FC = () => {  
    return (  
        <div>  
            <Navbar title="Home Page" />  
            <h1>Welcome to the Home Page</h1>  
            {/* 其他内容 */}  
            </div>  
        );  
};  
  
export default HomePage;  

tsx使用局部组件局部组件的使用类似，但它们通常只在特定的页面或组件中使用：

// pages/UsersPage.tsx  
import React from 'react';  
import UserList from '../components/UserList';  
  
interface UsersPageProps {  
    users: User[];  
}  
  
const UsersPage: React.FC<UsersPageProps> = ({ users }) => {  
return (  
    <div>  
        <UserList users={users} />  
    </div>  
);  
};  
  
export default UsersPage;  

总结

全局组件：在整个应用中广泛使用的组件，如导航栏、页脚等。

局部组件：特定页面或功能专用的组件，如用户列表、文章详情等。

为了更好地组织和管理组件，你可以根据它们的使用范围和功能来决定哪些是全局组件，哪些是局部组件。全局组件通常放在项目的 components 文件夹中，而局部组件则可以放在特定页面或功能相关的文件夹中。