useState
这里用到了解构赋值
const [n,setN] = useState(0)
//useState返回一个数组,第一个是`读`,第二个是`写`,n的初始值是0
useEffect
- 模拟componentDIdMount
useEffect(()=>{
console.log('第一次渲染')
},[])
- 模拟componentDidUpdate
const [n,setN] = useState(0)
useEffect(()=>{
console.log('n变了')
},[n])
//如果不传数组的话,则包含了所有的state,任意一个变了都会执行
- 模拟componentWillUnmount
useEffect(()=>{
console.log('第一次渲染')
return ()=>{
console.log('组件要死了')
}
})
//return 一个函数,这个函数在组件销毁前会执行一次
- 自定义hooks:必须以
use
开头
示例:自定义 hooks 实现第一次变化不执行,第二次以后才执行
const useUpdate = (fn, dep) => {
const [count, setCount] = useState(0)
useEffect(() => {
setCount(x => x + 1) //不这么写会有警告
}, [dep])
useEffect(() => {
if (count > 1)
fn()
}, [count,fn]) //两个都是依赖,少一个会有警告
}
useUpdate(() => {
console.log('n变了');
}, n)
网友评论