前端開發的SOLID - 單一職責原則

不管是人還是程式，都避免不了做過多事情而造成的一些額外負擔，例如一次管太多事情會讓你忘記，日後不易記得，這裡就來介紹實用的概念吧。

Single responsibility principle - 單一職責原則

這邊舉以下的範例程式作為例子：

const onLoadUserList = (setUsers) => {
    axios
       .get("https://ex.tw/")
       .then(response  =>  setUsers(response.data))
       .catch(err  =>  console.log(err));
}

const UserListPage = () => {
   const  [users, setUsers] =  useState([]);

   useEffect(()  =>  {
       onLoadUserList(setUsers);
   }, []);

    return(
      <div  className="App">
        {users.map(user => (
       <li>
         <p>{user.name}</p>
        </li>
     ))}
      </div>
    );
}

你會看到UserListPage的component違反了這個原則，不緊要呼叫API，還需要處理渲染List的畫面。
目前看起來是需要做兩件事情的，而非單一職責。
這是一個簡單的範例才會比較看起來沒什麼，但是請自行想像，如果這個component需要同時處理很多使用者畫面和執行很多API，會變成什麼樣的怪物？因此需要進行功能抽離。

Container：

const onLoadUserList = (setUsers) => {
    axios
       .get("https://ex.tw/")
       .then(response  =>  setUsers(response.data))
       .catch(err  =>  console.log(err));
}

const UserListPage = () => {
    return (
        <div className="App">
            <UsersList users={users} />
        </div>
    );
}

Component：

const UsersList = (props) => {
    const { users } = props;
    return (
        <>
            {users.map(user => (
                <li>
                    <p>{user.name}</p>
                </li>
            ))}
        </>
    )
}