当前位置：首页 > news >正文

React 单一职责原则：优化组件设计与提高可维护性

news 来源：原创 2025/4/28 9:53:36

单一职责原则（SRP）

在 React 中，组件是构建 UI 的核心单位，而良好的组件设计是保证应用质量和可维护性的关键。单一职责原则是一种设计原则，也适用于 React 组件的开发。它强调每个组件应该只关注一个职责，这样可以提高组件的可维护性、复用性以及降低代码的复杂度。

什么是单一职责原则

单一职责原则的定义是每个类应该只有一个职责， 也就是只做一件事。这个原则是最容易解释的，因为我们可以简单地将其理解为“每个功能/模块/组件都应该只做一件事”。

在 React 组件中，单一职责原则要求将组件的功能分解为更小的部分，每个部分只负责一个特定的职责。这样做的好处是，当需求发生变化时，只需要修改与该职责相关的部分，而不会影响整个组件。这提高了代码的可维护性和可测试性。

在所有这些原则中，单一职责原则是最容易遵循的，也是最有影响力的一项，因为它极大提高了代码的质量。为了确保组件只做一件事，可以这样：

将功能较多的大型组件拆分为较小的组件；
将与组件功能无关的代码提取到单独的函数中；
将有联系的功能提取到自定义 Hooks 中。

如何应用单一职责原则在 React 中

在 React 中应用单一职责原则主要通过组件的拆分和组合来实现。以下是一些建议：

拆分大型组件：当一个组件变得庞大且复杂时，考虑将其拆分为更小的组件，每个组件关注不同的职责。这样可以提高可维护性和复用性。
提取可复用的功能：识别重复使用的功能，将其提取为单独的组件，并通过 props 进行参数化。这样可以减少重复代码，提高复用性。
保持组件的简洁和独立性：确保每个组件只关注自己的职责，并且不包含与其他职责无关的代码。这样可以降低代码的复杂度和维护成本。
使用高阶组件（Higher-Order Components）：高阶组件是一种函数，接受一个组件作为参数，并返回一个新的增强组件。通过使用高阶组件，可以将与特定职责相关的逻辑与组件分离，提高代码的可维护性。
使用自定义钩子（Custom Hooks）：自定义钩子是一种将组件逻辑进行复用的方式。通过将与特定职责相关的逻辑封装在自定义钩子中，可以使组件更加简洁和独立。

下面来看一个显示活跃用户列表的组件：

const ActiveUsersList = () => {const [users, setUsers] = useState([])useEffect(() => {const loadUsers = async () => {  const response = await fetch('/some-api')const data = await response.json()setUsers(data)}loadUsers()}, [])const weekAgo = new Date();weekAgo.setDate(weekAgo.getDate() - 7);return (<ul>{users.filter(user => !user.isBanned && user.lastActivityAt >= weekAgo).map(user => <li key={user.id}><img src={user.avatarUrl} /><p>{user.fullName}</p><small>{user.role}</small></li>)}</ul>    )
}

这个组件虽然代码不多，但是做了很多事情：获取数据、过滤数据、渲染数据。来看看如何分解它。

首先，只要同时使用了 useState 和 useEffect，就可以将它们提取到自定义 Hook 中：

const useUsers = () => {const [users, setUsers] = useState([])useEffect(() => {const loadUsers = async () => {  const response = await fetch('/some-api')const data = await response.json()setUsers(data)}loadUsers()}, [])return { users }
}const ActiveUsersList = () => {const { users } = useUsers()const weekAgo = new Date()weekAgo.setDate(weekAgo.getDate() - 7)return (<ul>{users.filter(user => !user.isBanned && user.lastActivityAt >= weekAgo).map(user => <li key={user.id}><img src={user.avatarUrl} /><p>{user.fullName}</p><small>{user.role}</small></li>)}</ul>    )
}

现在，useUsers Hook 只关心一件事——从 API 获取用户。它使我们的组件代码更具可读性。

接下来看一下组件渲染的 JSX。每当我们对对象数组进行遍历时，都应该注意它为每个数组项生成的 JSX 的复杂性。如果它是一个没有附加任何事件处理函数的单行代码，将其保持内联是完全没有问题的。但对于更复杂的 JSX，将其提取到单独的组件中可能是一个更好的主意：

const UserItem = ({ user }) => {return (<li><img src={user.avatarUrl} /><p>{user.fullName}</p><small>{user.role}</small></li>)
}const ActiveUsersList = () => {const { users } = useUsers()const weekAgo = new Date()weekAgo.setDate(weekAgo.getDate() - 7)return (<ul>{users.filter(user => !user.isBanned && user.lastActivityAt >= weekAgo).map(user => <UserItem key={user.id} user={user} />)}</ul>    )
}

这里将用于呈现用户信息的逻辑提取到了一个单独的组件中，从而使我们的组件更小、更可读。

最后，从 API 获取到的用户列表中过滤出所有非活跃用户的逻辑是相对独立的，可以在其他部分重用，所以可以将其提取到一个公共函数中：

const getOnlyActive = (users) => {const weekAgo = new Date()weekAgo.setDate(weekAgo.getDate() - 7)return users.filter(user => !user.isBanned && user.lastActivityAt >= weekAgo)
}const ActiveUsersList = () => {const { users } = useUsers()return (<ul>{getOnlyActive(users).map(user => <UserItem key={user.id} user={user} />)}</ul>    )
}

到现在为止，通过上面三步拆解，组件已经变得比较简单。但是，仔细观察会发现，这个组件还有优化的空间。目前，组件首先获取数据，然后需要对数据进行过滤。理想情况下，我们只想获取数据并渲染它，而不需要任何额外的操作。所以，可以将这个逻辑封装到一个新的自定义 Hook 中，最终的代码如下：

// 获取数据
const useUsers = () => {const [users, setUsers] = useState([])useEffect(() => {const loadUsers = async () => {  const response = await fetch('/some-api')const data = await response.json()setUsers(data)}loadUsers()}, [])return { users }
}// 列表渲染
const UserItem = ({ user }) => {return (<li><img src={user.avatarUrl} /><p>{user.fullName}</p><small>{user.role}</small></li>)
}// 列表过滤
const getOnlyActive = (users) => {const weekAgo = new Date()weekAgo.setDate(weekAgo.getDate() - 7)return users.filter(user => !user.isBanned && user.lastActivityAt >= weekAgo)
}const useActiveUsers = () => {const { users } = useUsers()const activeUsers = useMemo(() => {return getOnlyActive(users)}, [users])return { activeUsers }
}const ActiveUsersList = () => {const { activeUsers } = useActiveUsers()return (<ul>{activeUsers.map(user => <UserItem key={user.id} user={user} />)}</ul>    )
}

在这里，我们创建了useActiveUsers Hook 来处理获取和过滤数据的逻辑，而组件只做了最少的事情——渲染它从 Hook 中获取的数据。

现在，这个组件只剩下两个职责：获取数据和渲染数据，当然我们也可以在组件的父级获取数据，并通过 props 传入该组件，这样只需要渲染组件就可以了。当然，还是要视情况而定。我们可以简单地将获取并渲染数据看作是“一件事”。