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

Single responsibility principle - 單一功能原則

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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:

1
2
3
4
5
6
7
8
9
10
11
12
const UsersList = (props) => {
const { users } = props;
return (
<>
{users.map(user => (
<li>
<p>{user.name}</p>
</li>
))}
</>
)
}

一個負責管畫面,一個負責管程式邏輯,這樣是不是單純很多了呢?