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