React Hook 的簡單使用

1、什麼是react hook

2、為什麼要使用hook

3、使用usestate建立乙個點贊的小功能

import react,

from
'react'
const likebutton:react.fc=
()=>
}>
點讚 <
/button>
<
/>)}
export
default likebutton

使用：（1）：使用usereffec完成dom標題的更新

import react,

from
'react'
const likebutton:react.fc=
()=>
`  }
)return
(<
>
}>
點讚 <
/button>
<
/>)}
export
default likebutton

import react,

from
'react'
const mousetracker:react.fc=
()=>
)useeffect((
)=>)}
document.
addeventlistener
('click'
,updatemouse)
return()
=>})
return
(x: y:
<
/p>)}
export
default mousetracker

import react,

from
'react'
const likebutton:react.fc=
()=>
`  }
,[like]
)return
(<
>
}>
點讚 <
/button>
<
/>)}
export
default likebutton

import react,

from
'react'
const likebutton:react.fc=
()=>
`  }
,[like]
)function
handelalterclick()
,500)}
return
(<
>
}>
點讚 <
/button>
>alert<
/button>
<
/>)}
export
default likebutton

import react,

from
'react'
const likebutton:react.fc=
()=>
`  }
,[like]
)useeffect((
)=>
else})
function
handelalterclick()
,500)}
return
(<
>
}>
點讚 <
/button>
<
/>)}
export
default likebutton

import react,

from
'react'
const likebutton:react.fc=
()=>
`  }
,[like]
)useffect((
)=>})
return
(<
>
"text" ref=
/>
}>
點讚 <
/button>
<
/>)}
export
default likebutton

import

from
'react'
const
usemouseposition=(
)=>
)useeffect((
)=>)}
document.
addeventlistener
('click'
,updatemouse)
return()
=>},
)return positions
}export
default usemouseposition

呼叫：

import react from

'react'
import
import likebutton from
'./components/likebutton'
import usemouseposition from
'./hook/usemouseposition'
function()
y:<
/p>
<
/div>)}
export

React Hook基本使用

簡單說一下為什麼我會了解到hook api吧。之前寫react只會用class元件的方法，但是新專案使用到了hook，然後被迫學習這個api。為什麼要使用hook？根據官方文件介紹 hook是react16.8的新增特性。它可以讓你在不編寫class的情況下使用state以及其他的react特性。e...

react hook 使用注意點

1.useeffect useeffect執行環境 componentdidmount useeffect componentupdate count變數更新時執行 useeffect count componentwillunmount useeffect 2.當在useeffect 使用 變數或...

react hook 中的閉包問題

1 在 react 中，當父元件向子元件傳遞乙個函式的時候，那個函式中包含乙個變數，state 會產生閉包問題 上 父元件 const uploadtable props props const deletefile file return 當子元件 呼叫 父元件 deletefile 函式的時候，...