iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

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

day4: 程式碼的命名 (function, event, customer hook)

在 function 的命名上時常犯的錯會以過度簡單的命名,造成無法理解該 function 做的事

  • function - 通常以動詞 + 名詞組成
BAD
const fetchData = {
....
}

const totalOfItems ={
....
}

GOOD
const fetchUserData = {
....
}

const calculateTotal = {
....
}
  • event function - 通常如果是 event 是 local 的 function, 不是 props 而來, 會使用 handle + 名詞 + 動詞或是 handle + 動詞, 如果是子組件,props 接受 event, 如果有多個 event 會用 on 開頭 + 名詞 + 動詞, 單一 event 則可以用 on + 動詞 (ex: onClick, onHover)
ex: 
function App(){
//父組件
 const handleButtonClick = {
	.....
 }
	<div>
		<Button onClick={handleButtonClick}/>
	</div>
}

function ({onClick}){
//子組件
	<button onClick={onClick}></button>
}

-------------------------------------------------------------------------------

//父組件範例
BAD
const deleteUser = ()=>{
....
}

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

GOOD
const handleUserDelete = ()=>{
....
}

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

//子組件範例
BAD
const buttonClick = ()=>{
....
}

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

GOOD
const onButtonClick = ()=>{
 .....
}

const onSubmit = ()=>{
....
}
  • customer hook - 需要以 use 開頭 + 名詞 or use + 動名詞
BAD
const useWindow = ()=>{
....
}

GOOD
const useWindowWidth = ()=>{
....
}

https://hackernoon.com/the-art-of-naming-variables-52f44de00aad

https://jaketrent.com/post/naming-event-handlers-react

https://reactjs.org/docs/handling-events.html


上一篇
day3: 程式碼的命名 (component, className)
下一篇
day5: CSS style 規劃 CSS module (global CSS, CSS module)
系列文
寫出好維護又簡潔的 react 程式碼 feat: Function Programming30

尚未有邦友留言

立即登入留言