useState
state Hook 让函数组件也可以有state状态,并进行状态数据的读写操作
import React from 'react'
function Demo () {
const [count, setCount] = React.useState(0) // 调用会返回一个数组 俩个元素,1是状态 2是用于更新状态的方法.传入initValue 初始值
function add() {
setCount(count + 1)
}
return (
<div>
<h2>当前求和为:{count} </h2>
<button onClick={add}>点我</button>
</div>
)
}
export default Demo
useEffect
effectHook 可以让你在函数组件中执行副作用操作(用于操作类组件中的生命周期钩子)
React中的副作用操作(声明周期都做什么):
发送ajax请求
订阅消息/ 启动定时器
手动操作真实dom
可以吧useEffect Hook看下如下三个函数的组合
compontDidMount()
compontDidUpdate()
compontWillUnMount()
React.useEffect(() => {
let timer = setInterval(() => {
setCount(count => count + 1)
}, 1000)
// 相当于componentDidMount 可以挂载定时器
return () => {
clearInterval(timer)
// 相当于compontWillUnMount
}
}, []) // 如果没有穿第二个参数 相当于监听所有人(compontDidUpdate),有改变有调用 空数组是谁也不坚持 [count] 监听count
// 参数1返回的函数相当于compontWillUnMount 可以卸载定时器
useFed
React.useRef
const myRef = React.useRef()
function show () {
alert(myRef.current.value)
}
<input type="text" ref={myRef} />
<button onClick={show}></button>
