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