useState
useState 使函数组件也有了状态，并能对状态进行读写操作。
语法：
const [xxx, setXxx] = React.useState(initVal)
参数：第一次初始化指定的值会在内部做缓存
返回值是两个元素的数组，第一个是内部的当前状态，第二个是更新状态的函数
setXxx() 的两种写法：
-
set(newVal)
-
set(val => newVal)
useEffect
用于在函数组件中执行副作用（用于模拟类组件中的生命周期）
副作用操作：
- 发送ajax请求
- 设置订阅 、 启动定时器
- 手动更改真实dom
语法：
useEffect(() => {
return () => {
}
}, [])
第一个参数：
-
处理副作用函数
-
有return 函数返回时：模仿的是
componentWillUnmount
第二个参数
-
当第二个参数不传时，模仿的
componentDidUpdate和componentDidMount -
第二个参数传的是有值的数组 模仿的是
componentDidUpdate
使用：
import { useState, useEffect } from "react"
import ReactDOM from 'react-dom'
function Effect() {
const [count, setCount] = useState(0)
useEffect(() => {
const timer = setInterval(() => {
setCount(count+1)
}, 1000);
return () => {
clearInterval(timer)
}
}, [count])
const unmount = () => {
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
}
return (
<>
<h2>计时器{count}</h2>
<button onClick={unmount}>销毁组件</button>
</>
)
}
export default Effect
useRef
与类组件中的 React.createRef() 相似
import { useRef } from "react"
function MyRef() {
const myRef = useRef()
const handleSubmit = () => {
console.log(myRef.current.value);
}
return (
<>
<input type="text" ref={myRef} />
<button onClick={handleSubmit}>获取表单数据</button>
</>
)
}
export default MyRef
