這篇文章帶大家了解一下hook，聊聊為什麼推薦使用hook進行開發，並介紹一下React最常用的兩個Hook，希望對大家有幫助！
Hook是React 16.8新增的特性，專門用在函數式元件，它可以取代class元件中react的其他特性，是實際工作中要常用的。 【相關推薦：Redis影片教學】
hook是專門配合函數式元件開發使用的，可以用它取代class元件的一些生命週期，避免大量this引起的混亂，因此hook便於開發，且更易於讓開發者理解代碼
以上是個人的簡單總結，更多原因可以參考react官網：
https://react.docschina.org/docs/hooks-intro.html#motivation
程式碼中：
#React. useState(0)相當於class元件中的this.state加入一個屬性值
variable相當於class元件中的this.state. variable的值
setVariable可以用來修改variable的值，可以相當於class元件中的this.setState
import React,(useState) from 'react'
export default function useState_Demo() {
const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
function changeVariable(){
setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
}
render (
<div>
<button onclick = {change}>点我会使variable+1</button>
</div>
)
}##程式碼中：
以下程式碼中可以看出，useEffect的使用取代了在class元件中componentDidMoun、componentDidUpdate、componentWillUnmount的使用
import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
useEffect(() => {
//这个return是在该组件监测的数据变化时或者被卸载时调用的，被卸载时调用可以相当于componentWillUnmount钩子
return () => {
console.log('该组件被卸载了')
}
}, [variable])//第二个参数传了[variable]，表示检测variable的更新变化，一旦variable变化就会再次执行useEffect的回调
//第二个参数传了[],表示谁都不检测只执行一次useEffect的回调，相当于componentDidMount钩子
//第二个参数不传参，只要该组件有state变化就会执行useEffect的回调，相当于componentDidUpdate钩子
function changeVariable(){
setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
}
render (
<div>
<button onclick = {change}>点我会使variable+1</button>
</div>
)
}1、只在元件函數的最外層使用Hook，不要在循環，條件或巢狀函數中調用Hook
import React,(useEffect) from 'react'
export default function useState_Demo() {
//这里才是正确的
useEffect(() => {})
//错误1，使用了条件判断
if(true) {
useEffect(() => {})
}
//错误2，使用了循环
while(true) {
useEffect(() => {})
}
//错误3,使用了嵌套
useEffect(() => {
useEffect(() => {})
})
}2、無法在元件的函數外使用Hook
import React,(useState, useEffect) from 'react'
//错误1，在组件函数外使用了useState
const [variable, setVariable] = useState(0);
//错误2，在组件函数外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
//在组件函数里使用才是正确的
const [variable, setVariable] = useState(0);
}3、為了避免以上的錯誤，可以安裝eslint-plugin-react-hooks ESLint 外掛程式來檢查程式碼上錯誤
hook就是一個函數，自訂hook是為了方便元件之間共享邏輯，其實就是對重複使用功能進行封裝，自訂hook內部也呼叫了react自帶的hook，命名要以use開頭
//自定义hook
function useHook(initState) {
const [variable, setVariable] = useState(initState)
return variable;
}
//使用自定义hook
export default function useState_Demo() {
const variableState = useHook(0)
}可能你會疑惑，多個元件中使用相同的Hook 會共用state 嗎？
答案是：不會。因為每次呼叫react自帶的hook都是獨自互不影響的，所以自訂hook被多次重複呼叫也是獨自互不影響的
更多程式相關知識，請造訪：程式設計入門！ ！
以上是什麼是hook？聊聊React中常用的兩個Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章！
