如何应用 SOLID 原则整理 React 代码之单一原则

SOLID 原则的主要是作为关心自己工作的软件专业人员的指导方针，另外还为那些以经得起时间考验的设计精美的代码库为荣的人。

今天，我们将从一个糟糕的代码示例开始，应用 SOLID 的第一个原则，看看它如何帮助我们编写小巧、漂亮、干净的并明确责任的 React 组件，。

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

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 <>

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

但我们可以做得更好。

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

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 

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

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

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

    return <>

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

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