首页 > 资讯 > 前端开发 > JavaScript >教你应用 SOLID 原则整理 React 代码之单一原则

848

分享到

教你应用 SOLID 原则整理 React 代码之单一原则

2024-04-02 19:04:59 848人浏览薄情痞子

摘要

目录什么是单一责任原则？让我们从一个糟糕的例子开始1. 移动数据处理逻辑2. 可重用的数据获取钩子3. 分解 UI 组件让我们回顾一下我们刚刚做了什么总结SOLID 原则的主要是作为

什么是单一责任原则？

单一责任原则告诉我们的是，每个类或组件应该有一个单一的存在目的。

组件应该只做一件事，并且做得很好。

让我们重构一段糟糕但正常工作的代码，并使用这个原则使其更加清晰和完善。

让我们从一个糟糕的例子开始

首先让我们看看一些违反这一原则的代码，添加注释是为了更好地理解:

import React, {useEffect, useReducer, useState} from "react";
const initialState = {
    isLoading: true
};
// 复杂的状态管理
function reducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}
export const SingleResponsibilityPrinciple = () => {
    const [users , setUsers] = useState([])
    const [filteredUsers , setFilteredUsers] = useState([])
    const [state, dispatch] = useReducer(reducer, initialState);
    const showDetails = (userId) => {
        const user = filteredUsers.find(user => user.id===userId);
        alert(user.contact)
    }
    // 远程数据获取
    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch('https://JSONplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(json => {
                dispatch({type:'FINISHED'})
                setUsers(json)
            })
    },[])
    // 数据处理
    useEffect(() => {
        const filteredUsers = users.map(user => {
            return {
                id: user.id,
                name: user.name,
                contact: `${user.phone} , ${user.email}`
            };
        });
        setFilteredUsers(filteredUsers)
    },[users])
    // 复杂UI渲染
    return <>
        <div> Users List</div>
        <div> Loading state: {state.isLoading? 'Loading': 'Success'}</div>
        {users.map(user => {
            return <div key={user.id} onClick={() => showDetails(user.id)}>
                <div>{user.name}</div>
                <div>{user.email}</div>
            </div>
        })}
    </>
}

这段代码的作用

这是一个函数式组件，我们从远程数据源获取数据，再过滤数据，然后在 UI 中显示数据。我们还检测 api 调用的加载状态。

为了更好地理解这个例子，我把它简化了。但是你几乎可以在任何地方的同一个组件中找到它们！这里发生了很多事情:

远程数据的获取
数据过滤
复杂的状态管理
复杂的 UI 功能

因此，让我们探索如何改进代码的设计并使其紧凑。

1. 移动数据处理逻辑

不要将 Http 调用保留在组件中。这是经验之谈。您可以采用几种策略从组件中删除这些代码。

您至少应该创建一个自定义 Hook 并将数据获取逻辑移动到那里。例如，我们可以创建一个名为 useGetRemoteData 的 Hook，如下所示:

import {useEffect, useReducer, useState} from "react";
const initialState = {
    isLoading: true
};
function reducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}
export const useGetRemoteData = (url) => {
    const [users , setUsers] = useState([])
    const [state, dispatch] = useReducer(reducer, initialState);
    const [filteredUsers , setFilteredUsers] = useState([])
    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(response => response.json())
            .then(json => {
                dispatch({type:'FINISHED'})
                setUsers(json)
            })
    },[])
    useEffect(() => {
        const filteredUsers = users.map(user => {
            return {
                id: user.id,
                name: user.name,
                contact: `${user.phone} , ${user.email}`
            };
        });
        setFilteredUsers(filteredUsers)
    },[users])
    return {filteredUsers , isLoading: state.isLoading}
}

现在我们的主要组件看起来像这样:

import React from "react";
import {useGetRemoteData} from "./useGetRemoteData";

export const SingleResponsibilityPrinciple = () => {

    const {filteredUsers , isLoading} = useGetRemoteData()

    const showDetails = (userId) => {
        const user = filteredUsers.find(user => user.id===userId);
        alert(user.contact)
    }

    return <>
        <div> Users List</div>
        <div> Loading state: {isLoading? 'Loading': 'Success'}</div>
        {filteredUsers.map(user => {
            return <div key={user.id} onClick={() => showDetails(user.id)}>
                <div>{user.name}</div>
                <div>{user.email}</div>
            </div>
        })}
    </>
}

看看我们的组件现在是多么的小，多么的容易理解！这是在错综复杂的代码库中所能做的最简单、最重要的事情。

但我们可以做得更好。

2. 可重用的数据获取钩子

现在，当我们看到我们 useGetRemoteData Hook 时，我们看到这个 Hook 正在做两件事:

从远程数据源获取数据
过滤数据

让我们把获取远程数据的逻辑提取到一个单独的钩子，这个钩子的名字是 useHttpGetRequest，它把 URL 作为一个参数:

import {useEffect, useReducer, useState} from "react";
import {loadingReducer} from "./LoadingReducer";

const initialState = {
    isLoading: true
};

export const useHttpGetRequest = (URL) => {

    const [users , setUsers] = useState([])
    const [state, dispatch] = useReducer(loadingReducer, initialState);

    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch(URL)
            .then(response => response.json())
            .then(json => {
                dispatch({type:'FINISHED'})
                setUsers(json)
            })
    },[])

    return {users , isLoading: state.isLoading}
}

我们还将 reducer 逻辑移除到一个单独的文件中:

export function loadingReducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}

所以现在我们的 useGetRemoteData 变成了:

import {useEffect, useState} from "react";
import {useHttpGetRequest} from "./useHttpGet";
const REMOTE_URL = 'https://jsonplaceholder.typicode.com/users'

export const useGetRemoteData = () => {
    const {users , isLoading} = useHttpGetRequest(REMOTE_URL)
    const [filteredUsers , setFilteredUsers] = useState([])

    useEffect(() => {
        const filteredUsers = users.map(user => {
            return {
                id: user.id,
                name: user.name,
                contact: `${user.phone} , ${user.email}`
            };
        });
        setFilteredUsers(filteredUsers)
    },[users])

    return {filteredUsers , isLoading}
}

干净多了，对吧? 我们能做得更好吗? 当然，为什么不呢？

3. 分解 UI 组件

看看我们的组件，其中显示了用户的详细信息。我们可以为此创建一个可重用的 UserDetails 组件:

const UserDetails = (user) => {

    const showDetails = (user) => {
        alert(user.contact)
    }

    return <div key={user.id} onClick={() => showDetails(user)}>
        <div>{user.name}</div>
        <div>{user.email}</div>
    </div>
}

最后，我们的原始组件变成:

import React from "react";
import {useGetRemoteData} from "./useGetRemoteData";

export const Users = () => {
    const {filteredUsers , isLoading} = useGetRemoteData()

    return <>
        <div> Users List</div>
        <div> Loading state: {isLoading? 'Loading': 'Success'}</div>
        {filteredUsers.map(user => <UserDetails user={user}/>)}
    </>
}

我们把代码从 60 行精简到了 12 行！我们创建了五个独立的组成部分，每个部分都有明确而单一的职责。

让我们回顾一下我们刚刚做了什么

让我们回顾一下我们的组件，看看我们是否实现了 SRP:

Users.js - 负责显示用户列表
UserDetails.js ー负责显示用户的详细资料
useGetRemoteData.js - 负责过滤远程数据
useHttpGetrequest.js - 负责 HTTP 调用
LoadingReducer.js - 复杂的状态管理

当然，我们可以改进很多其他的东西，但是这应该是一个很好的起点。

总结

这是一个简单的演示，演示如何减少每个文件中的代码量，并使用 SOLID 的强大功能创建漂亮的可重用组件。

到此这篇关于如何应用 SOLID 原则整理 React 代码之单一原则的文章就介绍到这了,更多相关React SOLID单一原则内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 教你应用 SOLID 原则整理 React 代码之单一原则

本文链接: https://www.lsjlt.com/news/164310.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

教你应用 SOLID 原则整理 React 代码之单一原则

目录什么是单一责任原则？让我们从一个糟糕的例子开始1. 移动数据处理逻辑2. 可重用的数据获取钩子3. 分解 UI 组件让我们回顾一下我们刚刚做了什么总结SOLID 原则的主要是作为...

99+

2024-04-02
如何应用 SOLID 原则在 React 中整理代码之开闭原则

目录本系列其他文章什么是开闭原则？让我们从一个例子开始一个糟糕的解决方案解决方案是什么？让我们创建单独的用户组件注意总结 SOLID 是一套原则。它们主要是关心代码质量和可维护性的软...

99+

2024-04-02
react中怎么应用SOLID原则

这篇文章主要介绍“react中怎么应用SOLID原则”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react中怎么应用SOLID原则”文章能帮助大家解决问题。什么是开闭原则？Robert c. Ma...

99+

2023-07-02
在React中怎么应用SOLID原则

本篇内容介绍了“在React中怎么应用SOLID原则”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、单一职责原则（SRP）单一职责原则的定...

99+

2023-07-02
在React中应用SOLID原则的方法

目录1、单一职责原则（SRP）2、开放封闭原则（OCP）3、里氏替换原则（LSP）4、接口隔离原则（ISP）5、依赖倒置原则（DIP）6、小结在面向对象编程（OOP）中，SOLID ...

99+

2024-04-02
Android实例代码理解设计模式SOLID六大原则

目录单一职责原则定义代码解释未遵守单一原则遵守单一原则开闭原则定义代码解释里氏替换原则定义代码解释依赖倒置原则定义代码解释未遵守依赖导致原则遵守依赖导致原则接口隔离原则定义代码解释未...

99+

2024-04-02
C++单一职责原则的代码怎么写

今天小编给大家分享一下C++单一职责原则的代码怎么写的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。单一职责原则：就一个类而言...

99+

2023-07-05
C++单一职责原则示例代码浅析

单一职责原则：就一个类而言，应该只有一个引起它变化的原因，如果一个类承担的职责过多就等于把这些职责耦合在一起，至少会造成以下两方面的问题：我们要去修改该类中的一个职责可能会影响到...

99+

2023-02-27

C++ 单一职责 C++ 单一职责原则
CSS代码整理及优化七大原则是什么

这篇文章将为大家详细讲解有关CSS代码整理及优化七大原则是什么，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。现在有很多准则来帮助你在完成CSS布局后进行CS...

99+

2024-04-02
“PHP 面向对象编程设计模式：理解 SOLID 原则及其应用”

SOLID 原则是面向对象编程设计模式中的一组指导原则，旨在提高软件设计的质量和可维护性。由罗伯特·马丁（Robert C. Martin）提出，SOLID 原则包括：单一职责原则（Single Responsibility Pri...

99+

2024-02-25

SOLID 原则面向对象编程设计模式单一职责原则开放-封闭原则里氏替换原则接口隔离原则依赖倒置原则
C# 实例解释面向对象编程中的单一功能原则(示例代码)

在面向对象编程领域中，单一功能原则（Single responsibility principle）规定每个类都应该有且仅有一个单一的功能，并且该功能应该由这个类完全封装起来。在面...

99+

2024-04-02
随机森林算法原理及实际应用的Python示例（带完整代码）

随机森林算法是一种集成技术，能够使用多个决策树和一种称为Bootstrap和聚合的技术来执行回归和分类任务。这背后的基本思想是结合多个决策树来确定最终输出，而不是依赖于单个决策树。机器学习中的随机森林随机森林产生大量分类树...

99+

2024-01-23

算法的概念