useState
state Hook 讓函數(shù)組件也可以有state狀態(tài),并進行狀態(tài)數(shù)據(jù)的讀寫操作
import React from 'react'
function Demo () {
const [count, setCount] = React.useState(0) // 調(diào)用會返回一個數(shù)組 倆個元素,1是狀態(tài) 2是用于更新狀態(tài)的方法.傳入initValue 初始值
function add() {
setCount(count + 1)
}
return (
<div>
<h2>當前求和為:{count} </h2>
<button onClick={add}>點我</button>
</div>
)
}
export default Demo
useEffect
effectHook 可以讓你在函數(shù)組件中執(zhí)行副作用操作(用于操作類組件中的生命周期鉤子)
React中的副作用操作(聲明周期都做什么):
發(fā)送ajax請求
訂閱消息/ 啟動定時器
手動操作真實dom
可以吧useEffect Hook看下如下三個函數(shù)的組合
compontDidMount()
compontDidUpdate()
compontWillUnMount()
React.useEffect(() => {
let timer = setInterval(() => {
setCount(count => count + 1)
}, 1000)
// 相當于componentDidMount 可以掛載定時器
return () => {
clearInterval(timer)
// 相當于compontWillUnMount
}
}, []) // 如果沒有穿第二個參數(shù) 相當于監(jiān)聽所有人(compontDidUpdate),有改變有調(diào)用 空數(shù)組是誰也不堅持 [count] 監(jiān)聽count
// 參數(shù)1返回的函數(shù)相當于compontWillUnMount 可以卸載定時器
useFed
React.useRef
const myRef = React.useRef()
function show () {
alert(myRef.current.value)
}
<input type="text" ref={myRef} />
<button onClick={show}></button>
