iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

寫出好維護又簡潔的 react 程式碼 feat: Function Programming系列 第 2

day2: 程式碼風格的重要性

對於程式碼的風格,不管是初學者或是有經驗的開發者,當一個專案執行時,
在規劃程式碼的寫法,若沒有考慮到程式碼的可讀性和可維護性,在若干天後或是當別人接手程式時,需要增加新功能或是重構程式碼時,因為可讀性太差,或程式碼出現跟命名不預期的行為,甚至是耦合度太高,造成改不動,
這些都是撰寫程式碼常見的錯誤,以下提供了幾種撰寫 react 程式碼常見的錯誤範例,提供大家參考:

命名上

const aaa = 123

// 在維續時根本不知道 aaa 是什麼

const doJob = ()=>{
.........
}

// 當 do 的 function 一多,根本不知道 doJob 指的是什麼功能

//JSX tag

<customerButton></customerButton>

// component 沒有使用 Pascal Case

過多的 if else

// 譬如以下是個數字相加的處理 function

// extra 不是要必要傳入的參數

const sumFunction = (a,b,extra)=>{
  if(typeof extra === 'undefine'){
      return a+b
    }
  else{
        return a+b+extra
    }
}

這邊利用了 if else 其實是多餘的寫法,
可以利用其他方法達成我們要的效果

solid (單一職責原則)

import React, {useEffect, useReducer, useState} from "react";

const initialState = {
    isLoading: true
};

// COMPLEX STATE MANAGEMENT
function reducer(state, action) {
    switch (action.type) {
        case 'LOADING':
            return {isLoading: true};
        case 'FINISHED':
            return {isLoading: false};
        default:
            return state;
    }
}

export const Users = () => {

    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);
    }

    // REMOTE DATA FETCHING
    useEffect(() => {
        dispatch({type:'LOADING'})
        fetch('https://randomuser.me/api/')
            .then(response => response.json())
            .then(data => {
                dispatch({type:'FINISHED'})
                setUsers(data?.results)
            })
    },[])

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

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

//像是上面的程式碼,分為四個程式碼階段,
1. fetch 資料
2. filter 資料
3. 複雜狀態管理
4. 複雜的 UI 介面
但是全部的事情都混在一個 component,其實是可以利用 hook 做功能性拆分的

之後我們會針對以上的程式碼範例,來提供具體的寫法建議,
請讀者看下去。

https://blog.pragmaticengineer.com/readable-code/https://www.geeksforgeeks.org/how-to-use-single-responsibility-principle-in-reactjs/https://hackernoon.com/understanding-solid-principles-in-javascript-w1cx3yrvhttps://dev.to/sylwiavargas/5-ways-to-refactor-if-else-statements-in-js-functions-208e


上一篇
day1:參加的動機及大綱
下一篇
day3: 程式碼的命名 (component, className)
系列文
寫出好維護又簡潔的 react 程式碼 feat: Function Programming30

2 則留言

0

好大一包R

joseph wu iT邦新手 5 級 ‧ 2021-09-18 16:02:40 檢舉

對,需要切切切

0
Ken Chen
iT邦新手 5 級 ‧ 2021-09-18 10:18:36

最近回去看一年前的專案,那個命名跟元件切分也是讓我感到驚人

只好說服自己過一年又長大了

joseph wu iT邦新手 5 級 ‧ 2021-09-18 16:02:05 檢舉

真的,回頭看看自己寫的扣,會突然覺得很想重構,代表長大了

我要留言

立即登入留言